react已有项目中部署typescript

1.

 npm install --save @types/react @types/react-dom

 主要是为了获取react和react-dom的声明文件，因为并不是所有的库都有TypeScript的声明文件，所以通过运行

2、

npm i --save @types/typescript

3 

npm install --save-dev typescript awesome-typescript-loader source-map-loader

这一步，我们安装了typescript、awesome-typescript-loader和source-map-loader。

awesome-typescript-loader可以让Webpack使用TypeScript的标准配置文件tsconfig.json编译TypeScript代码。

source-map-loader使用TypeScript输出的sourcemap文件来告诉webpack何时生成自己的sourcemaps,源码映射，方便调试。

4添加TypeScript配置文件

npm install -g npx

npx tsconfig.json

或者

npm install -D typescript
tsc --init

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",// 重定向输出目录
    "module": "esnext", // 模块引入方式
    "target": "es5",// 指定ECMAScript目标版本
    "lib": [
      "es6",
      "dom",
      "esnext.asynciterable"
    ],// 编译过程中需要引入的库文件的列表
    "sourceMap": true,// 生成相应的 .map文件
    "allowJs": true,
    "jsx": "react",// 在 .tsx文件里支持JSX
    "moduleResolution": "node",// 决定如何处理模块moduleResolution设为node也很重要。如果不这么设置的话，
    //找声明文件的时候typescript不会在node_modules这个文件夹中去找。
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,// 在表达式和声明上有隐含的 any类型时报错。
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "skipLibCheck": true//忽略所有库中的声明文件（ *.d.ts）的类型检查,skipLibCheck非常重要，并不是每个库都能通过typescript的检测。
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}