现有react项目中集成typescript

酒肆_侯旭辉

已于 2023-04-19 09:50:49 修改

阅读量179

点赞数

文章标签： react.js javascript typescript

于 2023-04-12 16:36:37 首次发布

本文链接：https://blog.youkuaiyun.com/NUAN__YANG/article/details/130105327

版权

文章详细介绍了如何在已有的React项目中添加TypeScript支持，包括安装相关模块，配置tsconfig.json，设置webpack以支持TypeScript和JSX，以及使用babel-loader处理语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤一：

insatll相关模块

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

步骤二：

根目录下创建tsconfig.json文件

{
  "compilerOptions": {
    "target": "ES5", /* 指定 ECMAScript 目标版本：'ES3'、'ES5'（默认）、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020' 或 'ESNEXT'。 */
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ], /* 指定要包含在编译中的库文件。 */
    // "allowJs": true, /* 允许编译 javascript 文件。打开会导致check到nvm中的一些js文件 */
    "skipLibCheck": true, /* 跳过声明文件的类型检查。 */
    "esModuleInterop": true, /* 通过为所有导入创建命名空间对象，在 CommonJS 和 ES 模块之间启用发射互操作性。 暗示“allowSyntheticDefaultImports”。 */
    "allowSyntheticDefaultImports": true, /* 允许从没有默认导出的模块中默认导入。 这不会影响代码发出，只是类型检查。 */
    "strict": true, /* 启用所有严格的类型检查选项。 在开发中，建议将stricet这类选项都开启。 */
    "forceConsistentCasingInFileNames": true, /* 禁止对同一文件的大小写不一致的引用。 */
    "noFallthroughCasesInSwitch": true, /* 在 switch 语句中报告失败情况的错误。 */
    "module": "esnext", /* 指定模块代码生成：“none”、“commonjs”、“amd”、“system”、“umd”、“es2015”、“es2020”或“ESNext”。 */
    "moduleResolution": "node", /* 指定模块解析策略：'node' (Node.js) 或 'classic' (TypeScript pre-1.6)。 */
    "resolveJsonModule": true, //允许导入扩展名为“.json”的模块
    "isolatedModules": true, //将每个文件作为单独的模块（与“ts.transpileModule”类似）。
    // "noEmit": true, /* 不发出输出（不生成编译后的文件）。 */
    "jsx": "react", /* 指定 JSX 代码生成：'preserve'、'react-native' 或 'react'。 */
  },
  "include": [
    "src/**/*"
  ], //包含的文件
}

步骤三：

在src下新建react-app-env.d.ts，复制一下内容
作用参考： https://segmentfault.com/a/1190000038874526

///

步骤四：

修改webpack
若无@babel/preset-typescript模块需下载

resolve: {
    extensions: ['*', '.js', '.jsx', 'scss', '.tsx', '.ts'], //后缀名自动补全
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/, // 排除 node_modules 文件夹
        use: {
          loader: 'babel-loader', // babel-loader  babel-loader处理JSX语法的。
          options: {
            babelrc: true,
            presets: ['@babel/preset-react', '@babel/preset-env', '@babel/preset-typescript'],
            cacheDirectory: true,
       },
    ],
  },

步骤五：

上代码测试

import React from 'react'
type Props = {
  name: string
}
export default function Home() {
  return (
    <div>
      测试一下
      <Sub name="ttt" />
    </div>
  )
}
const Sub = ({ name }: Props) => {
  return (
    <div>{name}</div>
  )
}