您的位置：首页 > Web前端 > React

react 打字机效果_React中的打字稿—如何添加

2020-08-17 23:50 330 查看

react 打字机效果

In this article, I will be showing you how to add typescript from your existing react application.

在本文中，我将向您展示如何从现有的React应用程序中添加打字稿。

If you are a software developer that started from strongly typed programming languages such as Java and C sharp, you might want to always have a type checking and see errors beforehand. Unlike without adding typescript, you only see the type errors after you’ve compiled and run the code.

如果您是从强类型编程语言(例如Java和C Sharp)开始的软件开发人员，则可能希望始终进行类型检查并事先查看错误。与不添加打字稿的情况不同，您只有在编译并运行代码后才能看到类型错误。

It serves as an early and preventive measure while you are developing your application.

在您开发应用程序时，它可以作为早期预防措施。

You can also follow the demonstration via video:

您也可以通过视频观看演示：

How to add Typescript in React 如何在React中添加Typescript

First, setup a react application using the create-react-app command

首先，使用create-react-app命令设置一个React应用程序

npx create-react-app

We can add typescript to this project by adding the following node packages

我们可以通过添加以下节点包来向该项目添加打字稿

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

What this does is that you are installing the following packages:

这是要安装以下软件包：

Typescript — installs the base typescript language
打字稿-安装基本打字稿语言
Node
节点
React
React
React-DOM
ReactDOM
Jest — A testing framework
笑话-测试框架

After installing, we can checkout our current project and here you can see that extension of the files are still .JS, this will still work as expected.

安装后，我们可以签出当前项目，在这里您可以看到文件扩展名仍然是.JS，这仍将按预期工作。

But if you want to leverage typescript, you will start replacing it with the .TS and .TSX extensions.

但是，如果您想使用打字稿，则将开始使用.TS和.TSX扩展名替换它。

.TS — is a replacement for normal javascript files

.TS-替代普通的javascript文件

.TSX — is a replacement for files with react’s JSX render components

.TSX —替换具有react的JSX渲染组件的文件

// filename: Header.tsimport React from 'react';export default function Header(){    return (
        <>
            <p>This is a header section</p>
        </>
    );}

If we only add with .TS extension, it will cause an error as typescript does not recognize what is the content of the returned statement which is supposed to be JSX.

如果仅添加.TS扩展名，则将导致错误，因为打字稿无法识别应该为JSX的返回语句的内容。

What we will do is to rename it to .TSX and see what happens.

我们要做的是将其重命名为.TSX，然后看看会发生什么。

// filename: Header.tsximport React from 'react';export default function Header(){    return (
        <>
            <p>This is a header section</p>
        </>
    );}

Say for example, we need to add props to the Header component.

例如，我们需要向Header组件添加道具。

we can utilize Typescript by adding an interface that we will be assigning to the props in order to give it a proper object definition.

我们可以通过添加要分配给道具的接口来利用Typescript，以便为其提供适当的对象定义。

We can add the interface named HeaderProps with a field of title which is a string.

我们可以添加一个名为HeaderProps的接口，其标题字段为字符串。

And then we can define the interface to the props like so.

然后我们可以像这样定义道具的接口。

// filename: Header.tsximport React from 'react';interface HeaderProps {
	title: string
}export default function Header(props: HeaderProps){    return (
        <>
            <p>This is a header section</p>
        </>
    );}

So if we will add this Header component to the existing App component, we will do so by removing the boilerplate code and replace it with the Header component that we’ve built.

因此，如果将这个Header组件添加到现有的App组件中，我们将通过删除样板代码并将其替换为我们构建的Header组件来做到这一点。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Header from './Header';function App() {
  return (
    <div className="App">
      <Header/> {/* was replaced */}
    </div>
  );
}export default App;

Notice that we don’t see an error even if title is required based from the interface defined to the Header Props. This is because we haven’t renamed App component to typescript (TSX)

请注意，即使根据标头道具定义的接口需要标题，我们也不会看到错误。这是因为我们尚未将App组件重命名为打字稿(TSX)