TypeScript 在VueVueReact中使用

TypeScript可以在Vue2、Vue3和React中使用。以下是在这些框架中使用TypeScript的基本步骤：

Vue 2:

1. 初始化项目:

   
   
   
   vue init webpack my-project

2. 安装TypeScript支持:

   
   
   
   npm install -D typescript ts-loader tslint tslint-loader tslint-config-standard

3. 配置vue.config.js以使用ts-loader:

   
   
   
   module.exports = {
     chainWebpack: config => {
       config.module
         .rule('ts')
         .test(/\.ts$/)
         .use('ts-loader')
         .loader('ts-loader')
         .end()
     }
   }

4. 创建tsconfig.json:

   
   
   
   npx tsc --init

5. 编写TypeScript代码，例如在src目录下创建.ts文件。

Vue 3:

1. 使用Vue CLI创建项目:

   
   
   
   npm install -g @vue/cli
   vue create my-project

2. 选择Manually select features时，选择TypeScript。
3. 编写TypeScript代码，例如在src目录下创建.ts文件。

React:

1. 安装TypeScript和必要的库:

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

2. 创建tsconfig.json:

   
   
   
   npx tsc --init

3. 修改package.json中的脚本以使用tsc:

   
   
   
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "prepare": "tsc --emitDeclarations --outDir types/ --declaration",
     "dev": "npm run prepare && react-scripts start"
   }

4. 编写TypeScript代码，例如创建.tsx文件。

请注意，以上步骤提供了基本的配置，具体项目可能需要更详细的配置。