react项目中引入typescript
新建项目使用typescript
如果你是要新建一个使用typescript的react项目,并且你用脚手架Create React App去创建,那没就非常的容易,你只需要在创建的时候将命令改为
npm 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