Vue 3 TypeScript教程01 - 介绍及环境配置

创建项目

bash

vue create ts-demo

然后进行如下设置：

可以看到基本结构和JS项目没有太大区别

使用Options API

（注意：下面代码没有使用Vue 3推荐的Composition API，而是使用了Vue 2中的Options API）：

TypeScript

<template>
  <div class="app">
    <p>{{ name }}, {{ age }}</p>
    <button @click="changeName('逻思编程')">Change name</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  components: {},
  data() {
    return {
      name: 'Luosi',
      age: 18
    }
  },
  methods: {
    changeName(name: string) {
      this.name = name
    }
  }
});
</script>

使用Composition API

类型定义：Student

添加文件 types/Student.ts:

TypeScript

interface Student {
  id: string,
  name: string,
  address: string,
  score: number
}

export default Student

类型定义：OrderBy

添加文件：types/OrderBy.ts

TypeScript

type OrderBy = 'id' | 'name' | 'score'

export default OrderBy

components/StudentList.vue

JavaScript

<template>
    <div class="student-list">
        <h2>学生列表</h2>
        
        <li v-for="student in orderedStudents" :key="student.id">
            <div class="student">
                <p>学号/姓名：{{ student.id }}: {{ student.name }}</p>
                <p>住址：{{ student.address }} </p>
                <p>分数：{{ student.score }}</p>
            </div>
        </li>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
import Student from '@/types/Student'
import OrderBy from '@/types/OrderBy'
export default defineComponent({
    props: {
        students: {
            type: Array as PropType<Student[]>,
            required: true
        },
        order: {
            type: String as PropType<OrderBy>,
            required: true
        }
    },
    setup(props) {
        const orderedStudents = computed(() => {
            return [...props.students].sort((a: Student, b: Student) => {
                return a[props.order] > b[props.order] ? 1 : -1
            })
        })
        return { orderedStudents }
    },
})
</script>

<style>
</style>

App.vue

JavaScript

<template>
  <div class="app">
    <div class="order">
        <button @click="changeOrder('id')">按学号排序</button>
        <button @click="changeOrder('name')">按姓名排序</button>
        <button @click="changeOrder('score')">按分数排序</button>
    </div>
    
    <StudentList :students="students" :order="order" />
  </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'
import Student from '@/types/Student'
import OrderBy from '@/types/OrderBy'
import StudentList from '@/components/StudentList.vue'

export default defineComponent({
  name: 'App',
  components: { StudentList },
  setup() {
    const students = ref<Student[]>([
      { id: '9901', name: 'Paul', address: '23 London Street', score: 97 },
      { id: '9902', name: 'Lucy', address: '11 London Street', score: 66 },
      { id: '9903', name: 'Emily', address: '33 London Street', score: 87 },
      { id: '9904', name: 'Mark', address: '52 London Street', score: 90 }
    ])
    const order = ref<OrderBy>('id')
    const changeOrder = (term: OrderBy) => {
      order.value = term
    }
    return { students, order, changeOrder }
  }
});
</script>

<style>
</style>