Vue中使用TypeScript

3,454 阅读2分钟

一、新项目创建

1.1 使用vue-cli创建项目


项目代码变化


1.2 启动项目yarn serve


二、TS在vue中的使用

2.1 类型注释


  • 新建自定义类型:src/models/people.ts

interface People {
    id: number;
    name: string;
    age: number
}
export default People

  • 在使用中使用

<ul>
      <li v-for="people in people" :key="people.id">
        {{people.name}}
        <span class="tag">年龄:{{people.age}}</span>
      </li>
</ul>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import People from "@/models/people";
//装饰器
@Component
export default class HelloWorld extends Vue {
  //声明属性为data
  people: People[] = [{ id: 1, name: "子秋", age: 18 }];
}
</script>

2.2 操作数据addPeople


  • 添加新人

<div>
      <input type="text" placeholder="输入名称" @keyup.enter="addPeople" />
</div>

  • 添加新人方法(断言as)


 //方法可以直接作为事件回调函数
  addPeople(event: KeyboardEvent) {
    //断言event是HTMLInputElement
    const input = event.target as HTMLInputElement;
    //不可直接使用event.target.value 
    this.people.push({
      id: this.people.length + 1,
      name: input.value,
      age: 18
    });
    input.value = "";//清空input
  }


2.3 计算属性get


<!-- 总数的统计 -->
<li>人数统计:{{total}}</li>
//存取器:计算属性
  get total() {
    return this.people.length;
  }

2.4 数据获取

  • 新增数据文件 vue.config.js,重启项目yarn serve

module.exports = {
    devServer: {
        before(app) {
            app.get('/api/list', (req, res) => {
                res.json([
                    { id: 1, name: '碧落', age: 19 },
                    { id: 2, name: '孟婆', age: 27 },
                    { id: 3, name: '秋韵', age: 17 },
                ])
            })
        }
    }
}

  • 安装axios,新建src/api/people.ts,关键<People[]>

import axios from 'axios'
import People from '@/models/people'
//不需要约束函数返回值,是由于会进行推断
export function getPeople() {
    //函数返回值People类型
    return axios.get<People[]>('/api/list')
}

  • 生命周期调用

import { getPeople } from "@/api/people.ts"; 
 //生命周期钩子
  mounted() {
    //数据获取
    getPeople().then(res => {
      this.people = res.data;
    });
  }


2.5 构造器$Emit


import { Emit } from "vue-property-decorator"
//HelloWorld.vue
//方法可以直接作为事件回调函数
  @Emit()
  addPeople(event: KeyboardEvent) {
    //断言event是HTMLInputElement
    const input = event.target as HTMLInputElement;
    //不可直接使用event.target.value
    const people = {
      id: this.people.length + 1,
      name: input.value,
      age: 18
    };
    this.people.push(people);
    input.value = ""; //清空input
    return people;
  }

//父级
<div id="app">
   <HelloWorld msg="欢迎来到古风秋林" @add-people="onAddPeople" />
</div>

export default class App extends Vue {
  onAddPeople(p: People) {
    alert("新增了" + p.name);
  }
}