React+TypeScript教程之1 - 介绍及设置

由微软推出的TypeScript自从一推出就广受关注，现在无论开发前端React/Vue，还是后端API，很多项目中都广泛接受了TypeScript。下面介绍如何在React中使用TypeScript。

TypeScript

介绍

其实，关于TypeScript的优势，可以说太多了。对于程序员来说，和JavaScript相比较，使用TS就相当于手中又有了一个神器，能够大幅度提高编码效率。当然，初期是要付出一些学习成本的。但这个投入绝对值得。

创建APP

运行如下命令：

bash

npx create-react-app ts-react-demo --template typescript
cd ts-react-demo
yarn start

添加Hello组件

首先添加src/components/Hello.tsx:

TypeScript

export default function Hello(props) {
  return <div>Hello, {props.name}</div>;
}

然后在App.tsx中使用Hello组件：

TypeScript

import './App.css';
import Hello from './components/Hello';

function App() {
  return (
    <div className="App">
      <Hello name="Luosi"/>
    </div>
  );
}

export default App;

可以看到，TS这时会提示Hello组件中的props类型尚未声明：

TypeScript

(parameter) props: any
Parameter 'props' implicitly has an 'any' type.ts(7006)

如果想要移除这个警告信息，需要声明一个类型，并将其应用到props属性上：

TypeScript

type HelloProps = {
    name: string
}

export default function Hello(props: HelloProps) {
  return <div>Hello, {props.name}</div>;
}

经过声明类型后，立刻就能实现：

• 属性的自动提示，一旦键入props. 就会自动提示相关的属性
• 在App.tsx中调用Hello组件的时候，TS就自动监测传入的name属性值是否为string。如果类型不匹配，则会报错。

因此可以看到，使用TypeScript，貌似工作量增大了，但TS会为我们做很多事情。

至于在这里使用type还是interface，可以说是仁者见仁智者见智。这两者的最大区别是：type无法二次编辑，但interface却可以随时扩展(implements)。我遵循的原则是：

• 如果构建自己的React应用程序，使用type
• 如果构建一个库/公共API，使用interface，这样便于在其它类中实现这个接口