react项目中引入typescript

新建项目使用typescript

如果你是要新建一个使用typescript的react项目，并且你用脚手架Create React App去创建，那没就非常的容易，你只需要在创建的时候将命令改为

npx create-react-app "你的项目的名称" --template typescript

已有项目引入typescript

如果你是要在已有的react项目引入typescript或者你想创建一个新的react项目但是不想使用Create React App，那么你必须手动的安装typescript

1.项目下安装typescript

npm install typescript --save-dev

2.初始化tsconfig配置文件，这会在项目下生成一个tsconfig.json的文件

npx tsc --init

3.配置tsconfig.json，更多的配置可以查看typescript官网文档

{
  "compilerOptions": {
     "target": "es5", /**指定ECMAScript目标版本**/                   
     "module": "commonjs", /**指定生成哪个模块系统代码**/ 
     "allowJs": true,  /**允许编译js文件**/                     
     "jsx": "preserve",  /**支持JSX**/                  
     "outDir": "build",  /**编译输出目录**/    
     "strict": true, /**启用所有严格类型检查选项**/ 
     "noImplicitAny": false, /**在表达式和声明上有隐含的any类型时报错**/          
     "skipLibCheck": true,  /**忽略所有的声明文件的类型检查**/                   
     "forceConsistentCasingInFileNames": true   /**禁止对同一个文件的不一致的引用**/   
  },
  "include": ["src"] /**指定编译目录**/ 
}

需要注意的是官网使用的是"rootDir": “src”，但是由于我的项目的配置文件都是弹出来的，所以有些文件并没有在src的目录下，配置这个打包就报错了，所以我这里使用的是"include": [“src”]，在此基础上，还可以通过exclude来排除某些文件或目录。

4.安装react的声明文件

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

5.如果你完全没有依靠Create React App来创建项目，那没你还需要安装配置ts-loader或者babel-loader来对 .ts、.tsx 文件进行处理，具体的配置可以查看webpack官网。

6.之后就可以愉快的使用typescript来使用react了