Vite 项目升级到 TypeScript

安装 TypeScript

npm install -D typescript

修改 main.js

1. 将 main.js 重命名为 main.ts
2. 将 index.html 中引入的 main.js 改为 main.ts

修改 .vue 文件

1. 将 <script> 标签修改为 <script lang="ts">

2. 导入 defineComponent

   import { defineComponent } from 'vue';
   export default defineComponent({ });

shims-vue.d.ts

在 ./src 文件夹中添加 shims-vue.d.ts ，添加 .vue 文件的类型声明

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

tsconfig.json

在项目根目录中添加 tsconfig.json ，用于配置 TypeScript

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      ".webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}