ts在项目中的使用与定义接口

首选在src下创建一个文件夹types，然后创建一个index.ts

/**创建index.ts这样的命名作用是，当引入index.ts使用的使用，可以直接使用@/types，
 * 不需要加index.ts，@代表的是根路径的意思*/

// 需要使用的必须暴露出去
export interface PersonData {
  name: string
  age: number
  //?表示该属性可有也可无
  sex?: string
}

export interface StudentData {
  subject: string
  score: number
}

// 这两种是等价的
export type PersonDataList = PersonData[]
// export type PersonList = Array<PersonData>

在vue文件中的使用，使用定义的接口引入必须在导入包中加入type，必须按着规范名字使用，不然会提示报错，如下

<script setup lang="ts">
import { type PersonData, type PersonDataList, type StudentData } from '@/types'
import { reactive } from 'vue'

let person: PersonData = {
  name: '王五',
  age: 18
}

let personList: PersonDataList = [
  {
    name: '马六',
    age: 25
  },
  {
    name: '小黄',
    age: 20
  }
]

// 这使用的是泛型，和上面方法是存储数据是一样的
/*let personList: Array<PersonData> = [
  {
    name: '马六',
    age: 25
  },
  {
    name: '小黄',
    age: 20
  }
]*/

//如果要使用响应式数据，如下传泛型
let personLists = reactive<PersonDataList>([
  {
    name: '马六',
    age: 25,
    //怎么设置一个接口属性可有可无呢，在接口属性名后面加上？
    sex: '男'
  },
  {
    name: '小黄',
    age: 20
  }
])

const student: StudentData = {
  subject: '语文',
  score: 44
}
</script>

<template>
  <div>
    <h1>{{ person.name }}</h1>
    <h2>{{ student.subject }}</h2>
    <h3>{{ personList[0].name }}</h3>
  </div>
</template>
<style scoped></style>