React+Hooks+Typescript实践

1. 包安装

将C:\Users\shenb\AppData\Local\Yarn\bin\;目录添加到环境变量中去 这样全局安装的包才能执行

# 安装create-react-app
# yarn global add create-react-app

# 创建typescript项目
# create-react-app 项目名 --template typescript


或者手动创建依赖库，创建支持typescript语法项目
$ npx create-react-app my-app --typescript
将 TypeScript 添加到 Create React App 项目
$ npm install --save "typescript" "@types/node" "@types/react" "@types/react-dom" "@types/jest"
$ # 或者
$ yarn create react-app my-app --typescript
$ yarn add "typescript" "@types/node" "@types/react" "@types/react-dom" "@types/jest"

坑1. index.tsx报错

这是因为VsCode的TypeScript版本比当前项目的版本低导致的。

点击这里进行切换

image.png

坑2. 启动报错 TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

解决过程：

1. 解决方案

   
   
   image.png

2.代码格式化配置：Eslint+prettier

参考： https://www.jianshu.com/p/215bb43014b6

3. 然后安装组件库

yarn add "@alicloud/console-components" moment styled-components
# 注意这里边不用引号引起来还会报错

技术点需要掌握

1. typescript，参考我的博文： https://www.jianshu.com/p/cc7fc7c59e2b
2. styled-components，参考我的博文： https://www.jianshu.com/p/2c1d617a7e11