我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

react项目一般都是使用create-react-app来初始化的,这款工具通过下载一个模版项目并安装依赖来初始化一个react项目。当然,默认的模版就是基于普通的js的。那么,其实还有另外一个分支,就是typescript。那么,如何初始化一个基于typescriptreact项目模版呢?两者又有什么样的区别呢?

苏南大叔:create-react-app,如何初始化一个typescript模版? - react-typescript-demo
create-react-app,如何初始化一个typescript模版?(图4-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述react项目的两个模版间的区别。本文测试环境:create-react-app@5.0.1react@18.2.0react-dom@18.2.0node@16.14.2

基本前提

首先需要全局安装create-react-app这款工具,这个是本文的前提:【全局安装】。

npm install create-react-app -g

如果后续的安装过程中,存在着太慢的问题,可以切换一下默认的仓库地址。比如:

npm config set registry https://registry.npm.taobao.org/

可以使用下面的命令,查看一下create-react-app的版本号。

create-react-app --version

当然,如果你喜欢使用npx命令的话,那么全局安装create-react-app这段内容就当没说。因为npx是用谁就下谁的,根本不考虑安装的事情。参考文章:

普通的模版

本段目标是获取一个名为demo的项目,执行代码:

create-react-app demo

然后运行这个项目:

cd demo
npm start

参考文章:

typescript模版

然后本文的主要重点内容,就是获得一个基于typescript的模版项目demo2。执行命令如下:

create-react-app demo2 --template typescript
命令就是多了一个--template参数,来指定了一个新的typescript模版。

运行这个项目:

cd demo2
npm start

项目结构对比

实际上,从两者的外部表现上来看,两者的界面几乎是没有啥差别的。

苏南大叔:create-react-app,如何初始化一个typescript模版? - 界面区别
create-react-app,如何初始化一个typescript模版?(图4-2)

代码结构对比如下:

苏南大叔:create-react-app,如何初始化一个typescript模版? - 目录结构对比
create-react-app,如何初始化一个typescript模版?(图4-3)

文件对比

app.tsx对比app.js,内容是几乎一样的。index.tsx对比index.js,文件内容稍稍有点区别:

苏南大叔:create-react-app,如何初始化一个typescript模版? - 内容对比1
create-react-app,如何初始化一个typescript模版?(图4-4)

typescript项目,多了两个配置文件tsconfig.jsonsrc/react-app-env.d.ts

tsconfig.json文件内容如下:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

src/react-app-env.d.ts文件内容如下:

/// <reference types="react-scripts" />

相关文章

结论

结论就是create-react-app通过--template参数,加载不同的模版。至于这些模版是在哪里存放的,目前不是所考虑的范畴。如果以后有了自己的模版的话,就可以去研究一下这个问题了。

typescript的用法,也不是本文的考虑范畴。可以知道的是:几乎和普通的代码是一样的,就是多了一些类型限制。更多苏南大叔写的react相关经验文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react    typescript