Vue TypeScript Handbook

# 常见问题

# shims-vue.d.ts 有什么用处

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
1
2
3
4

由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在项目项目对应使用目录下，例如 src/vue-shim.d.ts

意思是告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理。

而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。原因还是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件：

import Component from "components/component.vue";
1

参考：

# 使用 Vue prototype 上的方法






 



import { Component, Vue } from "vue-property-decorator";

@Component
export default class Home extends Vue {
  private mounted() {
    this.$loading();
  }
}
1
2
3
4
5
6
7
8

TypeScript 报错：Property '$loading' does not exist ...

解决办法：

添加 TS 类型声明文件 src/global.d.ts

import Vue from "vue";

declare module "vue/types/vue" {
  interface Vue {
    $loading: any;
  }
}
1
2
3
4
5
6
7

# 使用 Vue 构造函数上的静态方法







 



import Vue from "vue";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Home extends Vue {
  private mounted() {
    console.log(Vue.$customConstant);
  }
}
1
2
3
4
5
6
7
8
9

TypeScript 报错：Property '$customConstant' does not exist ...

解决办法：

添加 TS 类型声明文件 src/global.d.ts

import Vue from "vue";

declare module "vue/types/vue" {
  interface VueConstructor {
    $customConstant: any;
  }
}
1
2
3
4
5
6
7

参考：

# 自定义 window 全局变量

src/global.d.ts

interface Window {
  __oa__: any;
}
1
2
3

# 使用 Node 全局变量 process.env.*

  1. 安装 Node 类型文件
npm i -D @types/node
1
  1. 修改 tsconfig.json
{
  // ...
  "types": ["node"]
}
1
2
3
4

# 项目中引用 *.js 文件

src/views/Home.vue


 








import { Component, Vue } from "vue-property-decorator";
import Print from "@/utils/print/index.js";

@Component
export default class Home extends Vue {
  private handlePrint() {
    new Print(this.$refs.print);
  }
}
1
2
3
4
5
6
7
8
9

TypeScript 警告：Could not find a declaration file for module '@/utils/print.js'

解决办法：

  1. 添加 src/utils/print.d.ts 类型文件

简单起见，这里使用了 any 类型。

declare const Print: any;
export default Print;
1
2
  1. 修改 src/utils/print.js，添加类型引用
 





/// <reference path="./print.d.ts" />

export default class Print {
  // ...
}
1
2
3
4
5
  1. 修改引用，去掉 .js 后缀

src/views/Home.vue


 








import { Component, Vue } from "vue-property-decorator";
import Print from "@/utils/print/index";

@Component
export default class Home extends Vue {
  private handlePrint() {
    new Print(this.$refs.print);
  }
}
1
2
3
4
5
6
7
8
9

相关阅读：三斜指令

# 使用第三方库

# 有类型文件

这种类型的库允许直接在 TS 项目中使用。

TIP

查看库的 package.json 中有无 typings 或 types 字段。

例如：

# 无类型文件，有对应的 @types/* 包

TypeSearch (opens new window)

例如：

在项目中安装依赖

npm i -S @types/*
1

# 无类型文件，无对应的 @types/* 包

在项目中手动添加类型文件，以 gt-native-wap-bridge-sdk 为例：

src/global.d.ts

declare module "gt-native-wap-bridge-sdk";
1

参考

# 不要使用 undefined 作为 class property 的初始值

@Component
class MyComp extends Vue {
  // Will not be reactive
  foo = undefined;

  // Will be reactive
  bar = null;

  data() {
    return {
      // Will be reactive
      baz: undefined,
    };
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

参考 (opens new window)

# vue 单文件组件的编译过程

JS: *.vue --> vue-loader --> js (html, css) --> babel-loader --> *.js

TS: *.vue --> vue-loader --> ts (html, css) --> ts-loader --> babel-loader --> *.js

←