JavaScript 项目迁移到 TypeScript 步骤以及遇到的问题

最新推荐文章于 2024-09-26 07:11:50 发布

浮沉半生

最新推荐文章于 2024-09-26 07:11:50 发布

阅读量7.4k

点赞数 1

分类专栏：前端开发 TypeScript 文章标签：前端开发 TypeScript

本文链接：https://blog.csdn.net/zgd826237710/article/details/88568700

版权

本文详细介绍了JavaScript项目迁移到TypeScript的完整步骤，包括插件安装、tsconfig.json配置、TsLint设置、Webpack配置，并列举了在迁移过程中可能遇到的装饰器使用、生命周期提示错误、tsconfig.json报错、Webpack别名识别等问题及其解决方案。

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

文章目录

本文讲述了如何将 JavaScript 项目迁移到 TypeScript 上，以及如何在项目中添加 TypeScript 配置，编写 TypeScript 代码。

一、插件安装

安装项目所需插件，一般对应的模块都会有对应的 @types 插件可以使用。不知道的是否需要安装对应的 @types 插件的话，可以到 TypeSearch 进行查找。

# 安装项目中使用的插件
$ npm install typescript ts-jest ts-loader @types/enzyme @types/jest @types/node @types/react @types/react-dom --save-dev

# 安装 tslint 相关插件
$ npm install tslint tslint-config-prettier tslint-react --save

# 安装 webpack 中对 typescript 支持的插件
$ npm install fork-ts-checker-webpack-plugin tsconfig-paths-webpack-plugin --save-dev

二、添加 tsconfig.json 配置文件

在项目根目录下添加 tsconfig.json 配置文件。tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。

tsconfig.json

{
   
  "compilerOptions": {
   
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "experimentalDecorators": true
  },
  "exclude": [
    "config",
    "public",
    "node_modules",
    "build",
    "dist",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "jest.config.js"
  ],
  "types": [
    "typePatches"
  ]

最低0.47元/天解锁文章