Typescript已经是React项目中不可或缺的开发工具。
主要新增了数据结构与类型声明,用于解决项目维护困难的问题。
下面看看在react中如何引入Typescript
一、新建react + ts项目
npm create-react-app xxx --template typescript
二、已有react项目 + ts
1. 安装Typescript
全局安装
npm i typescript -g
当前项目安装
npm i typescript -D
2. 添加Typescript依赖
安装完成之后,需将ts依赖加入package.json,否则项目中无法引用。
npm i @types/react @types/react-dom
3. 生成tsconfig.json文件
tsc --init
4. 修改tsconfig.json文件
生成的tsconfig.json
文件一般配置不全,需要修改成可用配置,参考如下配置:
{
"compilerOptions": {
"target": "es5",/**指定ECMAScript目标版本**/
"jsx": "react",/**支持JSX**/
"module": "esnext",/**指定生成哪个模块系统代码**/
"allowJs": true,/**允许编译js文件**/
"outDir": "build",/**编译输出目录**/
"strict": true,/**启用所有严格类型检查选项**/
"noImplicitAny": false,/**在表达式和声明上有隐含的any类型时报错**/
"skipLibCheck": true,/**忽略所有的声明文件的类型检查**/
"forceConsistentCasingInFileNames": true,/**禁止对同一个文件的不一致的引用**/
"lib": [
"dom",
"es5",
"es2015.core",
"es2015.promise",
"es2015.collection",
"es2016.array.include",
"es2017.string",
"es2017.object",
"es2018.promise",
"es2015.reflect",
"es2017.typedarrays",
"dom.iterable",
"esnext"
],
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": [/**指定编译目录**/
"src"
]
}
以步骤完成后,就可以正常使用新建ts文件进行代码编写。
本文参考:https://blog.csdn.net/weixin_43924228/article/details/112836396
暂无评论