简单介绍TS中的接口、泛型、自定义类型

接口

在typescript中，接口是用于定义对象的形状/结构，也就是对象有哪些属性，对象有哪些方法；

ts 复制代码

interface PersonOne {
    name: string;
    age: number;
    email?:string;//加？表示这个属性是可选的
    readonly id: number; //id为只读属性
}

这样我们就使用typescript定义了一个对象的属性；定义好了之后我们需要将它暴露出去才可以被vue使用

js 复制代码

<template>
  <div class="person">
    {{ person }}
  </div>
</template>

<script lang="ts" setup>
import { type PersonOne } from '@/types';
let person:PersonOne = {
  name:'IT知识一享',
  age: 18,
  id: 66668888
}
</script>

PersonOne是一种类型，并不是一个值，所以导入的时候必须以类型导入的方式进行导入；
使用@符，可以快速的让我们找到文件，这个ts文件在types目录中，文件名是index.ts，所以后面不需要写；
email是可选，所以有没有都可以；

接口不仅可以定义对象，还可以定义函数类型、类类型，并且接口也有继承属性，各个接口可以互相继承，一个接口可以继承多个接口；但是这里并不做太多讲述，后面用到了，再进行讲述；

泛型

泛型用于创建可重用的组件，一个组件可以支持多种类型的数据。泛型允许我们在定义函数、接口或者类的时候，不预先指定具体的类型，而在使用的时候再指定类型；

还是上面的例子，比如现在我有一个数组，数组有很多人，这些人都统一使用上面定义的接口

js 复制代码

let personAll:Array<PersonOne> = [
  {name:'IT知识一享',age: 18,id: 66668888},
  {name:'IT知识一享2',age: 28,id: 66669999},
  {name:'IT知识一享3',age: 38,id: 66660000},
]

Array 是 TypeScript 内置的泛型接口;
<>这个里面是指定数组里面每一项的类型是怎么样的；

也可以按照下方的语法糖去撰写

js 复制代码

let personAll:PersonOne[] = [
  {name:'IT知识一享',age: 18,id: 66668888},
  {name:'IT知识一享2',age: 28,id: 66669999},
  {name:'IT知识一享3',age: 38,id: 66660000},
]

自定义类型

自定义类型，就是类型别名，它可以允许你为类型创建一个新的名字。它可以是基本类型、联合类型、元组类型等等

比如上面的接口类型，我们可以使用自定义类型重新起一个新的名字

js 复制代码

export type persons = Array<PersonOne>
或者
export type persons = PersonOne[]

之后我们就可以使用一个这新名字的为数组的每一项定义接口类型

js 复制代码

import { type PersonOne,type persons } from '@/types';

let personAll:persons = [
  {name:'IT知识一享',age: 18,id: 66668888},
  {name:'IT知识一享2',age: 28,id: 66669999},
  {name:'IT知识一享3',age: 38,id: 66660000},
]

注

这里只是简单的讲解一下算是typescript中最核心的东西，但是只是粗略的说一下；还是很多包括接口的继承、接口的合并；类型别名的联合、交叉；泛型的约束、默认类型等等