最新版vue3+TypeScript开发入门到实战教程之TypeScript接口泛型

1、概述

TypeScript 接口泛型的作用是为了规范代码，约束对象类型，例如定义一个对象fish，其成员变量有name，price等

let fish = { name: '鲫鱼', price: 10, num: 100 };

fish内的成员变量，若没有规范，可以任意书写，有时会错误的将price写成pirce而不自知。 但若给fish加上接口泛型，变量的定义要按接口规范来书写，不会出现错误。

2、给fish增加接口泛型

• 创界types目录，存放TypeScript文件
• 常见FishInter接口，定义接口类型
• 引入FishInt规范，定义fish数据 文件目录如下图： index.ts定义接口泛型

export interface FishInter{
  id: string,
  name: string,
  price: number,
  num:number
}

Fish组件引入接口

<template>
  <h2>{{fish}}</h2>
</template>
<script setup lang="ts">
import {type FishInter } from '@/types';
let fish: FishInter = {
  id: '01',
  name: '鲫鱼',
  price: 10,
  num: 15
};
console.log(fish);

这里注意引入接口泛型的书写方法，与引用常用结构对象不同，需要加type。此时书写fish内的成员如若出现错误，有错误提示，是不允许的。

数组类型的数据泛型如何书写

定义数组，数组内有很多fish，如：

let fishs = [
  {
    id: '01',
    name: '鲫鱼',
    price: 10,
    num: 15
  },
  {
    id: '02',
    name: '草鱼',
    price: 12,
    num: 18
  }
];

若个fishs添加接口规范，应如何去定义，如下代码

let fishs:Array<FishInter> = [
  {
    id: '01',
    name: '鲫鱼',
    price: 10,
    num: 15
  },
  {
    id: '02',
    name: '草鱼',
    price: 12,
    num: 18
  }
];

当这样写，太过麻烦，有没有舒服点的方法，答案是有的

let fishs:FishInter[] = [
  {
    id: '01',
    name: '鲫鱼',
    price: 10,
    num: 15
  },
  {
    id: '02',
    name: '草鱼',
    price: 12,
    num: 18
  }
];

还可以把Array、FishInter[] 定义在index.ts中，在用时更加舒服。 type中index.ts

export interface FishInter{
  id: string,
  name: string,
  price: number,
  num:number
}
export type FishList=Array<FishInter>

Fish组件中引用

<template>
  <h2>泛型</h2>
</template>
<script setup lang="ts">
import {type FishList } from '@/types';
let fishs:FishList = [
  {
    id: '01',
    name: '鲫鱼',
    price: 10,
    num: 15
  },
  {
    id: '02',
    name: '草鱼',
    price: 12,
    num: 18
  }
];
console.log(fishs)
</script>

TypeScript 接口泛型,虽失去代码的自由度，但代码书写规范，易读。