友情提醒!!!

如下图所示, vue-cli将在下个本子提供开箱即用的TypeScript的脚手架.
在您阅读小说前, 请检查Vue官方文书档案:
TypeScript援救
.
万一官方已经提供了脚手架, 上面小说就足以不用看了.
vue-cli开箱三个typescript

  • vue的模版吧!!!

json 1

image_1c3kmd2sc19s66tj1o1k0c1tc24q.png-92.1kB

前言

Vue2.5本子的升级换代中, Vue曾经大大的立异了对于类的帮助.
但是当前在Vue中使用TypeScript照例需求开发者做1些陈设和引进第二方的库(例如官方推荐的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目录下新建3个文件vue-shim.d.ts, 用于识别单文件vue内的ts代码

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

添加tsconfig.json文件

在档次的根目录下添加tsconfg.json文本,
该公文讲述了该品种是2个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分支

选取扩大组件

地点已经将TypeScriptjson,合龙到了Vue框架中, 但是到近期甘休,
就算想写TypeScript咱俩还非得依靠1些第1方的类库,
例如前边提到的vue-class-componentvue-property-decorator.
只怕有读者质疑为何要利用这么些第二方类库?
我们能够用HelloWorld.vue零件的代码表明:

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

其中msg那个脾性不言而喻是string的类型, 按照TypeScript的写法,
我们应该将其丰裕类型定义,
所以那1行代码就成为了msg: string: '欢迎使用TypeScript + Vue'.
那样写既不吻合TypeScript的语法, 也不切合Vue的语法.
所以1些灵气的开发者,
引入了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这几个装饰器的根基上增加产量了四个装饰器,
上边以合法提供的言传身教代码表达其用法

  • 使用了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地图