React-配合TS-创建新项目 ===

最新推荐文章于 2024-07-29 11:01:25 发布

屹洲城主

最新推荐文章于 2024-07-29 11:01:25 发布

阅读量1k

点赞数

分类专栏： TypeScript react 文章标签： typescript react.js

本文链接：https://blog.csdn.net/weixin_58726419/article/details/121571492

版权

本文详细介绍了如何使用TypeScript配合React创建项目，包括项目目录的变化、tsconfig的配置，以及类型声明文件的使用，如内置类型声明、第三方库类型声明和自定义类型声明，旨在为JavaScript库提供类型信息，提升开发体验。

摘要由CSDN通过智能技术生成

创建项目

打开终端，执行命令

npx create-react-app 项目名称 --template typescript

说明：在命令行中，添加 --template typescript 表示创建支持 TS 的项目

项目目录的变化

多了一个文件：tsconfig.json。在项目根目录下可以看到它，它就是TS 的配置文件
后缀名有变化。在 src 目录中，文件的后缀有变化，由原来的 .js 变为 .ts 或 .tsx
- .ts ts 文件的后缀名
- .tsx 是在 TS 中使用 React 组件时，需要使用该后缀，只要文件中使用了jsx模板，后缀名必须叫tsx
在 src 目录中，多了 react-app-env.d.ts 文件

.d.ts 类型声明文件，用来指定类型

tsconfig的介绍

tsconfig.json是typescript项目的配置文件，用于配置typescript
tsconfig.json配置文件可以通过 tsc --init 生成

说明：所有的配置项都可以通过鼠标移入的方式，来查看配置项的解释说明。
tsconfig 文档链接

{
  // 编译选项
  "compilerOptions": {
    // 生成代码的语言版本：将我们写的 TS 代码编译成哪个版本的 JS 代码
    // 命令行： tsc --target es5 11-测试TS配置文件.ts
    "target": "es5",
    // 指定要包含在编译中的 library
    "lib": ["dom", "dom.iterable", "esnext"],
    // 允许 ts 编译器编译 js 文件
    "allowJs": true,
    // 跳过类型声明文件的类型检查
    "skipLibCheck": true,
    // es 模块 互操作，屏蔽 ESModule 和 CommonJS 之间的差异
    "esModuleInterop": true,
    // 允许通过 import x from 'y' 即使模块没有显式指定 default 导出
    "allowSyntheticDefaultImports": true,
    // 开启严格模式
    "strict": true,
    // 对文件名称强制区分大小写  Demo.ts  
    "forceConsistentCasingInFileNames": true,
    // 为 switch 语句启用错误报告
    "noFallthroughCasesInSwitch": true,
    // 生成代码的模块化标准
    "module": "esnext",
    // 模块解析（查找）策略
    "moduleResolution": "node",
    // 允许导入扩展名为.json的模块
    "resolveJsonModule": true,
    // 是否将没有 import/export 的文件视为旧（全局而非模块化）脚本文件
    "isolatedModules"