交提醒!!!

正如图所示, vue-cli以在生单版本提供开箱即用之TypeScript的脚手架.
在公阅读文章前, 请检查Vue官方文档:
TypeScript支持.
若果官方已经提供了下面手架, 下面文章就可免用看了.
去vue-cli开箱一个typescript

  • vue的沙盘吧!!!

json 1

image_1c3kmd2sc19s66tj1o1k0c1tc24q.png-92.1kB

前言

Vue2.5本子的升迁中, Vue都大大的改良了对接近的支持.
但是时以Vue中使用TypeScript仍需要开发者做有部署与引入第三正的库(例如官方推荐的vue-class-component).
本文就是冲vue-cli初始化项目后, 配置TypeScript所待之系步骤.

中心提供了示范代码,
读者可以布局的历程进行较对:
master子为整代码;
baseConfig支行提供了TypeScript的配置;
extension-example啊引入了vue-class-component的代码;

初始化项目

1.使用vue-cli初始化webpack模板, 并安装该模板所需要的指文件

$ vue init webpack vue-typescript-start

2.使用npmcnpm安装typescript系依赖

npm i --save-dev typescript ts-loader

配置TypeScript

修改Webpack配置项

改目录下build/wepback.base.conf.js文件

  • 修改入口文件也main.ts, 并顺便在src/下将main.js修改成main.ts

entry: {
  app: './src/main.ts'
}
  • resolve.extensions着上加上.ts后缀(未来引入.ts便好不再写后缀了)

  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }
  • modules>rules中添加ts-loader

  {
    test: /\.tsx?$/,
    loader: 'ts-loader',
    exclude: /node_modules/,
    options: {
      appendTsSuffixTo: [/\.vue$/],
    }
  }

添加vue-shim.d.ts文件

每当src目录下新建一个文书vue-shim.d.ts, 用于识别单文件vue内的ts代码

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

添加tsconfig.json文件

当列之清目录下补充加tsconfg.json文件,
该公文讲述了拖欠型是一个TypeScript项目,
ts-loader以见面根据该配置信息进行TypeScript的编译,
下面是自身之部署文件作为参照,
全部之布局参见合法配置文档

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true, 
    "allowJs": true,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": true,
    "strictFunctionTypes": false,
    "lib": [
      "dom",
      "es5",
      "es6",
      "es7",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

外改动

  • 重命名src/router/中的index.jsindex.ts,src/下的mian.js修改为mian.ts,
    并将.vue文件的引入添加后缀(在)

import App from './App.vue'
  • 修改src下的App.vue文本中之<script>语言为ts

<script lang="ts">
  • 修改src/compontents/HelloWorld.vue代码,
    让她换得重复舒心和更应主题一点咔嚓!

<template>
  <div class="hello">
    <h1>{{msg}} </h1>

  </div>
</template>

<script lang="ts">
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '欢迎使用TypeScript + Vue'
    }
  }
}
</script>

启动TypeScript + Vue的应用

执行npm run dev, 访问localhost:8080端口, Vue脚手架启动成功,
现在我们早就成功之于依据vue-cli缔造的门类中, 引入了TypeScript!

json 2

image_1c3kfu46117rtf4bu086k6akqm.png-20.5kB

暨这里的代码为:
baseConfig分支

动用扩展组件

地方已用TypeScript合并及了Vue框架中, 但是到目前为止,
如果想写TypeScript我们还必须依一些老三方的类库,
例如前面提到的vue-class-componentvue-property-decorator.
也许有读者疑惑为什么要利用这些第三正类库?
我们得以为此HelloWorld.vue零件的代码说明:

<script lang="ts">
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '欢迎使用TypeScript + Vue'
    }
  }
}
</script>

其中msg这个特性显而易见是string的类型, 按照TypeScript的写法,
我们当以其增长类型定义,
所以这一行代码就变成了msg: string: '欢迎使用TypeScript + Vue'.
这样写既不相符TypeScript的语法, 也非入Vue的语法.
所以一些明白之开发者,
引入了ES7饱受的装饰器,
解决了这问题.

设置依赖

安装vue-class-componentvue-property-decorator

npm i vue-class-component vue-property-decorator --save

基于vue-class-componet改写.vue

vue-class-component提供了@Component装饰器来抒写.vue文件.
下面为示范代码说明其用法

  • 改写App.vue

<script lang="ts">
import Vue from 'vue';
import Component from "vue-class-component";

@Component
export default class App extends Vue{
  name:string =  'app';
}
</script>

上述就是引入了vue-class-component@Component装饰器后.vue文本之描写法.
你可望的凡, 我们失去丢了data(){ return { ... } }等函数.
引入@Component装饰器后, 可以给咱们描绘.vue零件更加的扁平化.
你也许通过改写App.vue束手无策感受及该亮点, 那么通过下的事例,
我相信您晤面出同一种全新的写照.vue文件之体验.

  • 改写HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <h3>今年是: {{yearNumber}} 年</h3>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

@Component
export default class HelloWorld extends Vue {
  //初始化data
  msg: string = "欢迎使用TypeScript + Vue";
  user: string = "亲爱的Vuer";
  yearNumber: number;

  //mounted钩子
  mounted(): void {
    this.greet(this.user);
  }

  //created钩子
  created(): void {
    this.yearNumber = 2018;
  }

  //methods定义方法
  greet(user: string): void {
    alert(user + ", 你好!");
  }
}
</script>

经过地方的例子,
相信你既全体会至了动用vue-class-component提供的@Component抒写Vue代码的简洁.
如果想再度多之摸底这个库房,
可查合法提供的example

暨此地的代码为:
extension-example分支

vue-property-decorator的用法

vue-property-decorator大凡一个拄让vue-class-component的库,
它在@Component其一装饰器的根基及增产了6只装饰器,
下面坐官提供的言传身教代码说明该用法

  • 使用了vue-property-decorator.vue文件

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

const s = Symbol('baz')

@Component
export class MyComponent extends Vue {

  @Emit()
  addToCount(n: number){ this.count += n }

  @Emit('reset')
  resetCount(){ this.count = 0 }

  @Inject() foo: string
  @Inject('bar') bar: string
  @Inject(s) baz: string

  @Model('change') checked: boolean

  @Prop()
  propA: number

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Provide() foo = 'foo'
  @Provide('bar') baz = 'bar'

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged(val: Person, oldVal: Person) { }
}
  • 面的如出一辙截代码等同于下的例行写法

const s = Symbol('baz')

export const MyComponent = Vue.extend({
  name: 'MyComponent',
  inject: {
    foo: 'foo',
    bar: 'bar',
    [s]: s
  },
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
  },
  data () {
    return {
      foo: 'foo',
      baz: 'bar'
    }
  },
  provide () {
    return {
      foo: this.foo,
      bar: this.baz
    }
  },
  methods: {
    addToCount(n){
      this.count += n
      this.$emit("add-to-count", n)
    },
    resetCount(){
      this.count = 0
      this.$emit("reset")
    },
    onChildChanged(val, oldVal) { },
    onPersonChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    },
    'person': {
      handler: 'onPersonChanged',
      immediate: true,
      deep: true
    }
  }
})

演示代码

  1. Github仓库

TypeScript相关文档

  1. TypeScript入门教程
  2. TypeScript官网

参考文章

  1. Decorators in ES7:
    ES7挨装饰器
  2. ES7 Decorator
    装饰者模式
  3. vue + typescript
    新品类起手式
  4. vue + typescript
    进阶篇

相关文章

网站地图xml地图