react项目中引入typescript

16 篇文章 0 订阅
2 篇文章 0 订阅

新建项目使用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了

  • 5
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值