ts+react 结合的问题

一、TypeScript的好处

   1.做一些类型检查。对我们的代码进行严格的静态类型检查
   2.语言扩展。TypeScript会包括来自ES6和未来提案中的特性。
   3.智能提示。对一些属性有限制，规避大部分错误
   

二、创建react+ts的项目

1.创建项目

     create-react-app 项目名称 --typescript

2.使用的路由

     yarn add react-router-dom @types/react-router-dom

3.使用redux

     yarn add redux

4.使用 react-redux

     yarn add react-redux @types/react-redux

5.使用mockjs

yarn add mockjs @types/mockjs
     

注意：yarn npm 不能混用

三、ts+react和之前项目的区别

1.文件名的不同

      jsx===>tsx(tsx有组件和js语法)
      js===>ts(ts:都是js语法)

2.创建组件~~~~

类组件

       interface Iprops{}

       interface IState{}

       class TsExample extends React.Component<IProps, IState> {}

      第一个是 props 的类型，第二个是 state 的类型。

函数式组件

函数式组件类型可以使用React.FC，使用这个类型有个好处就是，提醒你必须返回一个ReactNode

const FuncExample:React.FC<IProps> = (props: IProps) => {
  return <div></div>
}