React 18 系统精讲（一）配置React与TypeScript开发环境

也要大步向前呀

已于 2024-03-04 16:32:15 修改

阅读量445

点赞数

分类专栏： react18.1+TS开发携程旅游网站文章标签： react.js

于 2023-03-29 17:40:40 首次发布

本文链接：https://blog.csdn.net/2301_76510083/article/details/129841370

版权

react18.1+TS开发携程旅游网站专栏收录该内容

27 篇文章 2 订阅

订阅专栏

此课程基于（nodejs版本＞14 && npm版本>5 && 查看git版本cmd命令窗口执行git --version ）

安装前先使用node -v和npm -v检查版本 node和npm版本

（node安装路径https://mp.csdn.net/mp_blog/creation/editor/129706581）

1. 终端输入命令cd desktop 进入桌面(进入D盘（ D: ）然后 cd 文件名进入对应文件)

cd  desktop

2.然后输入命令，在桌面上使用react脚手架创建一个基于typescript的react项目，项目名称是myapp-ts

npx create-react-app myapp-ts --template typescript

(如果此项目不是基于typescript开发而使用js开发，可以直接使用 npx create-react-app myapp-ts 来创建react项目 )

3.出现以下页面表示安装成功，然后先运行 cd myapp-ts 在运行 npm start就可以在浏览器打开项目了

4.打开项目后可进入根目录查看tsconfig.json文件

{   // TS编译器配置,编译器启动时,首先会读取tsconfig.json
  "compilerOptions": {
    "noImplicitAny": false, //ts中不需要显示的声明变量类型any
    "target": "es5",   //定义编译后的目标javascript版本,一般编译为es5，以便被主流浏览器解读
    "lib": [  //定义typescript编译器支持哪些功能
      "dom",//在ts代码中使用dom的时候，比如说执行“document.getElementById("root")”这句话的时候,编译器就会知道该如何进行检查
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,//允许混合编译JavaScript文件 
    "skipLibCheck": true,
    "esModuleInterop": true, //允许使用ES6的方式import默认文件,使处理项目引入会更方便
    //开启选项之后import React from 'react' 写法可以引用react;没有开启这个选项时，import * as React from 'react'写法才能引用react
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node", //支持ts文件中解读json文件
    "resolveJsonModule": true,  //支持ts文件中解读json文件
    "isolatedModules": true,  //编译器会将每个文件作为单独的模块来使用
    "noEmit": true, //当编译发生错误的时候，编译器不生成JavaScript代码
    "jsx": "react-jsx" //支持编译react-jsx语法代码
  },
  "include": [
    "src"
  ]
}