作为一门静态类型的编程语言，TypeScript可以做类型批注，可以做类型推断。它能在编译时检查变量的类型。以供编译时纠错。本文根据本人在做一个CRA项目中使用的TSX文件来浅析TS在Create-React-App中的应用。
让CRA支持TypeScript
使用webstorm或VScode打开项目所在的文件夹，打开终端运行以下命令：
yarn global add create-react-app
create-react-app . --template typescript
变量类型以及变量声明
以下代码均存在于tsx文件中。
type Category = "-" | "+"
const defaultFormData = {
tagIds: [] as number[],
note: "",
category: '-' as Category,
amount: 0
}
我们逐行分析。在TS中，声明类型有若干种方法，其中用的比较多的是使用type(类型别名)以及interface(接口)来定义。两者的区别简而言之就是type(类型别名)是TS的一种高级类型，它可以包括对各种类型的交叉，如<num & array>；联合，如上面代码中的type Category = "-" | "+" ；它也可以用于定义原始的数据类型。而interface(接口)是描述一个对象的属性和方法，它用于定义对象类型。
类型推断
还是以上代码， tagIds: [] as number[] 就是类型推断。这句代码的意思就是将tagIds的类型定义为一个每项为数字的数组。
TS函数
const onChange = (obj: Partial<typeof selected>) => {
setSelected({
...selected,
...obj
})
}
在TS函数中，需要声明参数的类型。还可以用扩展操作符...rest来声明剩余参数的类型。
TS泛型
如上代码，<>中定义的便是泛型。泛型即是在强类型的程序设计语言中，编写代码时使用一些以后才指定的类型。它给予开发者以灵活，可重用代码的能力。一般其用于声明函数、接口和类的类型。
另一个例子：
const [category, setCategory] = useState<'-' | '+'>("-")
等价于
type Category = "-" | "+"
const [category, setCategory] = useState<Category>("-")
类型之React函数
type Props = {
value: number[];
onChange: (selected: number[]) => void;
}
const TagsSection: React.FC<Props> = (props) => {
...
}
在React函数组件中，定义函数组件的类型为React.FC，定义其泛型为Props。则其参数props也具有Props类型的各种属性。这就是继承。
