타입스크립트 지원

Vue CLI는 내장된 TypeScript 도구 지원을 제공합니다.

디렉토리

• NPM 패키지의 공식 선언 파일로 게시됨

• 권장 구성

• 개발 도구 체인

  • 프로젝트 생성

  • 편집기 지원

• 기본 사용법

• 클래스 기반 Vue 구성 요소

• 향상된 유형 플러그인 일치

• 반환 값 표시

NPM 패키지의 공식 선언 문서로 게시됨

정적 유형 시스템은 잠재적인 많은 런타임 오류를 효과적으로 방지하는 데 도움이 되며 애플리케이션이 성숙해짐에 따라 더욱 중요해질 것입니다. . 이것이 바로 Vue가 Vue 코어용 TypeScript에 대한 공식 유형 선언을 제공할 뿐만 아니라 Vue Router 및 Vuex에 해당하는 선언 파일도 제공하는 이유입니다.

이제 이를 NPM에 게시했으므로 최신 버전의 TypeScript는 NPM 패키지의 유형 선언을 자체적으로 구문 분석하는 방법도 알고 있습니다. 이는 NPM을 통해 성공적으로 설치하는 한 Vue에서 TypeScript를 사용하기 위해 더 이상 추가 도구 지원이 필요하지 않음을 의미합니다.

권장 구성

// tsconfig.json
{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

참고로 strict: true (或者至少 noImplicitThis: true，这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查，否则它会始终被看作 any 유형을 도입해야 합니다.

자세한 내용은 TypeScript 컴파일러 옵션 문서(영어)를 참조하세요.

개발 도구 체인

프로젝트 생성

Vue CLI 3은 TypeScript를 사용하여 새 프로젝트를 생성할 수 있습니다. 작성자:

# 1. 如果没有安装 Vue CLI 就先安装
npm install --global @vue/cli

# 2. 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项
vue create my-project-name

Editor support

TypeScript를 사용하여 Vue 애플리케이션을 개발하려면 TypeScript에 탁월한 "기본 제공" 기능을 제공하는 Visual Studio Code를 사용하는 것이 좋습니다. "지원하다. Single File Component(SFC)를 사용하는 경우 SFC 지원과 더 많은 유용한 기능을 제공하는 Vetur 플러그인을 설치할 수 있습니다.

WebStorm은 TypeScript 및 Vue에 대한 "즉시 사용 가능한" 지원도 제공합니다.

기본 사용법

TypeScript가 Vue 구성 요소 옵션의 유형을 올바르게 추론하도록 하려면 Vue.comComponent 또는 Vue.extend 구성 요소 정의: Vue.component 或 Vue.extend 定义组件：


import Vue from 'vue'
const Component = Vue.extend({
  // 类型推断已启用
})
const Component = {
  // 这里不会有类型推断，
  // 因为TypeScript不能确认这是Vue组件的选项
}

基于类的 Vue 组件

如果您在声明组件时更喜欢基于类的 API，则可以使用官方维护的 vue-class-component 装饰器：


import Vue from 'vue'
import Component from 'vue-class-component'

// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
  // 所有的组件选项都可以放在这里
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // 初始数据可以直接声明为实例的属性
  message: string = 'Hello!'
  // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert(this.message)
  }
}

增强类型以配合插件使用

插件可以增加 Vue 的全局/实例属性和组件选项。在这些情况下，在 TypeScript 中制作插件需要类型声明。庆幸的是，TypeScript 有一个特性来补充现有的类型，叫做模块补充 (module augmentation)。


例如，声明一个 string 类型的实例属性 $myProperty：

// 1. 确保在声明补充的类型之前导入 'vue'
import Vue from 'vue'
// 2. 定制一个文件，设置你想要补充的类型
//    在 types/vue.d.ts 里 Vue 有构造函数类型
declare module 'vue/types/vue' {
// 3. 声明为 Vue 补充的东西
  interface Vue {
    $myProperty: string
  }
}

在你的项目中包含了上述作为声明文件的代码之后 (像 my-property.d.ts)，你就可以在 Vue 实例上使用 $myProperty 了。

var vm = new Vue()
console.log(vm.$myProperty) // 将会顺利编译通过

你也可以声明额外的属性和组件选项：

import Vue from 'vue'

declare module 'vue/types/vue' {
  // 可以使用 `VueConstructor` 接口
  // 来声明全局属性
  interface VueConstructor {
    $myGlobal: string
  }
}

// ComponentOptions 声明于 types/options.d.ts 之中
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    myOption?: string
  }
}

上述的声明允许下面的代码顺利编译通过：

// 全局属性
console.log(Vue.$myGlobal)

// 额外的组件选项
var vm = new Vue({
  myOption: 'Hello'
})

标注返回值

因为 Vue 的声明文件天生就具有循环性，TypeScript 可能在推断某个方法的类型的时候存在困难。因此，你可能需要在 render 或 computed


import Vue, { VNode } from 'vue'

const Component = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    // 需要标注有 `this` 参与运算的返回值类型
    greet (): string {
      return this.msg + ' world'
    }
  },
  computed: {
    // 需要标注
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement` 是可推导的，但是 `render` 需要返回值类型
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})