04-在 React 项目中使用 TS

半颗黄豆
339 阅读2分钟

在 React 项目中使用 TS

  1. 创建新项目
  2. 在现有项目中添加 TS

创建新项目

  • 命令：npx create-react-app react-ts-app --template typescript

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

  • 项目目录的变化：

    1. 在项目根目录中多了一个文件：tsconfig.json

      • TS 的配置文件

    2. 在 src 目录中，文件的后缀有变化，由原来的 .js 变为 .ts 或 .tsx

      • .ts ts 文件的后缀名，不能写 React 组件
      • .tsx 是在 TS 中使用 React 组件时，需要使用该后缀 ts + xml

    3. 在 src 目录中，多了 react-app-env.d.ts 文件（自动生成的，让我们写代码的时候有更好的提示）

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

tsconfig的介绍

  • tsconfig.json是typescript项目的配置文件，用于配置typescript
  • tsconfig.json配置文件可以通过 tsc --init 生成
{
  // 编译选项
  "compilerOptions": {
    // 生成代码的语言版本：将我们写的 TS 代码编译成哪个版本的 JS 代码
    // 命令行： tsc --target es5 11-测试TS配置文件.ts
    "target": "es5",
    // 指定要包含在编译中的 library
    "lib": ["dom", "dom.iterable", "esnext"],
    // 允许 ts 编译器编译 js 文件 🔔 有些项目中，TS与JS混写，是否允许tsc编译js文件
    "allowJs": true,
    // 跳过类型声明文件的类型检查  🔔 第三方的包，部分有类型错误、语法错误，早期特别多
    "skipLibCheck": true,
    // es 模块 互操作，屏蔽 ESModule 和 CommonJS 之间的差异 🔔 允许使用ES6模块化语法，导入commonJS模块
    "esModuleInterop": true,
    // 允许通过 import x from 'y' 即使模块没有显式指定 default 导出 🔔 import * as React from 'react' 
    "allowSyntheticDefaultImports": true,
    // 开启严格模式
    "strict": true,
    // 对文件名称强制区分大小写
    "forceConsistentCasingInFileNames": true,
    // 为 switch 语句启用错误报告
    "noFallthroughCasesInSwitch": true,
    // 生成代码的模块化标准
    "module": "esnext",
    // 模块解析（查找）策略
    "moduleResolution": "node",
    // 允许导入扩展名为.json的模块
    "resolveJsonModule": true,
    // 是否将没有 import/export 的文件视为旧（全局而非模块化）脚本文件
    "isolatedModules": true,
    // 编译时不生成任何文件（只进行类型检查）
    "noEmit": true,
    // 指定将 JSX 编译成什么形式
    "jsx": "react-jsx"
  },
  // 指定允许 ts 编译的文件夹
  "include": ["src"]
}

TypeScript + React + Redux

依赖安装

yarn add redux react-redux

案例 - TODO

  • 在 TS 项目搭建 redux 仓库
  • redux 项目添加 TS 类型注解
  • 处理同步 action

\

avatar
文章
阅读
粉丝