一、新建项目使用TS
如果你是要新建一个使用TS的React项目,并且你是用脚手架Create React App去创建,那么就非常的容易,你只需要在创建的时候将命令改为:
create-react-app "你的项目的名称" --template typescript
create-react-app "你的项目的名称" --script-version=react-script-ts
二、已有项目引入TS
如果你是要在已有的React项目中引入TS或者你想创建一个新的React项目但是不想使用Create React App,那么你必须手动安装TS
1.项目下安装TS
npm install typescript --save-dev
2.初始化tsconfig配置文件,这会在项目下生成一个tsconfig.json的文件
tsc --init
如果执行以上命令提示:TypeScript tsc 不是内部或外部命令,也不是可运行的程序或批处理文件,解决办法 :
1)npm config get prefix 查找npm安装目录
npm config get prefix
2)将返回的结果配置到环境变量里的系统变量:
3)配置用户变量 和 系统变量 里的path:
点击【编辑】在末尾添加上 %NODE_PATH%, 确定保存。
3.配置tsconfig.json,更多的配置可以查看TS官网文档
{
"compilerOptions": {
"target": "es5", /**指定ECMAScript目标版本**/
"module": "commonjs", /**指定生成哪个模块系统代码**/
"allowJs": true, /**允许编译js文件**/
"jsx": "react", /**告诉TypeScript:JSX代码是React代码**/
"outDir": "build", /**编译输出目录**/
"noEmit": false,
"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
@types/react
是 TypeScript 的一个类型定义包,它为 React 库提供了 TypeScript 类型声明。当你使用 TypeScript 编写一个基于 React 的项目时,这个包可以帮助你获得更好的类型检查和自动补全功能。
@types/react-dom
是为 React 的 DOM 渲染库 react-dom
提供的 TypeScript 类型定义包。
5.如果你完全没有依靠Create React App来创建项目,那没你还需要安装配置ts-loader或者babel-loader来对 .ts、.tsx 文件进行处理,具体的配置可以查看webpack官网。
如果你使用的是ts-loader,配置可能如下所示:
module.exports = {
// ... 其他配置 ...
module: {
rules: [
// ... 其他规则 ...
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: 'ts-loader',
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
// ... 其他配置 ...
};
如果你选择使用Babel,你需要配置babel-loader,并添加@babel/preset-typescript作为preset:
module.exports = {
// ... 其他配置 ...
module: {
rules: [
// ... 其他规则 ...
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
],
},
},
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
// ... 其他配置 ...
};
6.之后就可以愉快的使用TS来开发React了