TypeScript 部分接入实践

在 Vue 项目中接入

1. 安装以下依赖：@vue/cli-plugin-typescript, typescript
2. 添加 tsconfig.json 文件
3. 添加 shims-tsx.d.ts 和 shims-vue.d.ts 文件

shims-vue.d.ts 文件内容如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Store } from 'vuex'

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

// 声明 router 和 store 选项
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    router?: VueRouter,
    store?: Store
  }
}

4. .vue 文件中 <script> 标签添加 lang="ts" 属性
5. import 自 common 文件夹中的 js 文件后缀名改为 .ts，并且补全函数参数和返回值类型

eslint

ts 相关的 eslint 规则暂时不管，如果引入需要安装 @typescript-eslint/eslint-plugin, @typescript-eslint/parser 和 @vue/eslint-config-typescript 三个包，同时代码也要大量修改

可能遇到的问题

• 无法找到模块“./util.js”的声明文件。“/Users/bihu/Documents/code/bihu/baofenpei-web/src/common/js/util.js”隐式拥有 "any" 类型。ts(7016)

Could not find a declaration file for module './util.js'. '/Users/bihu/Documents/code/bihu/baofenpei-web/src/common/js/util.js' implicitly has an 'any' type.

解决方案：typescript - Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type - Stack Overflow (opens new window)

简单点就是在 import 语句上方添加如下注释：

// @ts-ignore