vue3 js项目转ts

1.在项目根目录下创建tsconfig.json文件

{
  // 更改此选项以匹配您的项目
  "include": [
  "src/**/*",
  "src/**/*.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "tests/**/*.ts",
  "tests/**/*.tsx",
  "./auto-imports.d.ts" ],

  "compilerOptions": {
    // 告诉TypeScript读取JS文件，因为通常它们作为源文件被忽略
    "allowJs": true,
    // 生成 .d.ts 文件
    "declaration": true,
    // 这个编译器运行时应该只输出d.ts文件
    "emitDeclarationOnly": true,
    // 类型声明应该放在这个目录中。删除该选项，.d.ts 文件将与 js 文件同级放置
    "outDir": "dist",
    "module": "es2022",
    "moduleResolution": "Node",
    "types": ["vite/client"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "allowSyntheticDefaultImports": true,
    "lib":[
      "dom",
      "es2015.promise",
      "es5"
    ],
    
  },
}

2.src下面新建shims.ts文件用来解析vue

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const componentOptions: ComponentOptions
  export default componentOptions
}

3.单个js文件自动生成d.ts

npm i tern --save-dev
npm i tern --save-dev --force
dtsmake -s auth.js // auth.js为指定的文件路径，这里是相对路径

4.导入的vue文件需要加上.vue后缀

import Editor from "./Editor" //原先的 

import Editor from "./Editor/index.vue" //修改过后的

5.页面for循环报错类型“unknown”上不存在属性“value”。 可以采用以下形式

 v-for="item in list" :key="item.value" :label="item.label" :value="item.value" //修改前
 v-for="item in list" :key="item['value']" :label="item['label']"  :value="item['value']" //修改后

剩下的再看页面哪里报错添加类型声明就可以了