vue中使用Typescript入门

入门教程：使用vue + typescript实现一个简单的todolist

1.项目初始化

使用vue cli3脚手架新建一个项目

vue create project-name

如果提示vue不是内部或外部命令说明没全局安装，执行命令行yarn global add @vue/cli全局安装完就可以使用了；

项目初始化完成后执行vue add typescript会把当前项目转换成一个typescript的项目，并加上相应的配置文件，转换后的目录结构如下；

2.入口文件 – main.ts

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3. App.vue

<template>
  <div>
    <input type="text" v-model="inputValue">
    <button @click="handleAdd">add itembutton>
    <ul>
      <TodoItem
        v-for="(item, index) in list"
        :key="index"
        :content="item"
        @click.native="handleDelete(Number(index))"
      >
        {{ item }}
      TodoItem>
    ul>
  div>
template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import TodoItem from './todoItem.vue';
@Component({
  components: {
    TodoItem
  }
})
export default class App extends Vue {
  inputValue: String = '';
  list: Array<String> = ['吃饭', '睡觉', '打豆豆'];

  handleAdd(): void {
    const inputValue = this.inputValue;
    this.list.push(inputValue);
    this.inputValue = '';
  }

  handleDelete(index: number): void {
    this.list.splice(index, 1);
  }
}
script>

4. todoItem.vue

<template>
  <li>
    {{ content }}
  li>
template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class TodoItem extends Vue {
  @Prop(String) content!: String;
}
script>

@Component 这种写法是ES7的decorator装饰器语法，不了解的可以参考 阮一峰
ECMAScript 6入门

vue-property-decorator 的详细文档说明点这里