接口（Interface）

在 TypeScript 中，接口是用于定义对象结构和形状的核心工具，它明确规定了对象应具备的属性和方法。

基础接口定义

typescript

interface PersonOne {

   name: string;

   age: number;

   email?: string;      // 可选属性

   readonly id: number; // 只读属性}

接口在实际组件中的应用

vue

<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 是类型声明而非具体值，导入时需使用 type 关键字

@ 符号提供了便捷的路径别名解析

可选属性（如 email）可根据实际情况决定是否提供

扩展说明：接口的功能不仅限于对象定义，还支持函数类型、类类型的描述，并具备继承特性。多个接口可以相互继承，单个接口也能继承多个父接口，这些高级特性将在后续实际应用中详细展开。

泛型（Generics）

泛型机制使得组件能够支持多种数据类型，提升了代码的复用性和灵活性。它允许在定义函数、接口或类时不预先指定具体类型，而是在使用时动态确定。

泛型数组应用

typescript

// 使用泛型接口定义数组let personAll: Array<PersonOne> = [

 {name: 'IT知识一享', age: 18, id: 66668888},

 {name: 'IT知识一享2', age: 28, id: 66669999},

 {name: 'IT知识一享3', age: 38, id: 66660000},]

// 语法糖形式（推荐）let personAll: PersonOne[] = [

 {name: 'IT知识一享', age: 18, id: 66668888},

 {name: 'IT知识一享2', age: 28, id: 66669999},

 {name: 'IT知识一享3', age: 38, id: 66660000},]

技术说明：

Array<T> 是 TypeScript 内置的泛型接口

尖括号 < > 用于指定数组元素的类型约束

数组类型语法糖 Type[] 提供了更简洁的表达方式

自定义类型（Type Aliases）

类型别名允许为现有类型创建新的名称，支持基本类型、联合类型、元组类型等多种类型定义。

类型别名实践

typescript

// 为PersonOne数组定义类型别名export type Persons = Array<PersonOne>// 或使用语法糖形式export type Persons = PersonOne[]

在实际项目中的使用

typescript

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 最核心的三个概念，但还有更多高级特性值得探索：

1.接口扩展：接口继承、多重继承、接口合并

2.类型操作：联合类型、交叉类型、类型推导

3.泛型进阶：泛型约束、默认类型参数、条件类型

这些高级特性将在后续深入学习中详细展开，为构建更复杂、更类型安全的 TypeScript 应用奠定坚实基础。

通过掌握接口、泛型和自定义类型这三个核心概念，开发者已经能够构建出类型安全、易于维护的 TypeScript 应用程序，为后续深入学习更复杂的类型系统特性做好了充分准备。

来源：小程序app开发|ui设计|软件外包|IT技术服务公司-木风未来科技-成都木风未来科技有限公司