没有合适的资源？快使用搜索试试~ 我知道了~

文库首页前端Node.jsTypeScript进阶：接口与类型.docx

TypeScript进阶：接口与类型.docx

1.该资源内容由用户上传，如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款（资源遇到问题，请及时私信上传者）

版权申诉

Web开发

0 下载量 179 浏览量 2024-08-28 07:46:29 上传评论收藏 32KB DOCX 举报

温馨提示

试读

25页

TypeScript进阶：接口与类型.docx

资源推荐

资源详情

资源评论

TypeScript 进阶：接口与类型

1 TypeScript 基础回顾

1.1 基本类型

在 TypeScript 中，基本类型包括但不限于 number、string、boolean、null、

undefined、any、void、never 和 unknown。这些类型为数据提供了更严格的定

义，有助于在开发阶段捕获类型错误。

1.1.1 示例：使用基本类型

定义一个函数，接受一个数字参数并返回一个字符串

function greet(person: string, age?: number): string {

return `Hello, ${person}. You are ${age} years old.`;

}

调用函数

let user = "Alice";

let userAge = 30;

console.log(greet(user, userAge)); //

输出

: Hello, Alice. You are 30 years old.

使用

any

类型

let notSure: any = 4;

notSure = "maybe a string instead";

notSure = false; //

可以赋值为任意类型

使用

unknown

类型

let something: unknown = 4;

something = "maybe a string instead";

something = false; //

可以赋值为任意类型，但使用时需要类型断言

let num: number = something as number; //

类型断言

1.2 函数与类型

TypeScript 允许你为函数参数和返回值指定类型，这有助于确保函数的正确

使用和调用。

1.2.1 示例：函数类型

定义一个函数类型

type GreetFunction = (name: string, age?: number) => string;

创建一个符合该类型的函数

const greet: GreetFunction = (name, age) => {

return `Hello, ${name}. You are ${age} years old.`;

};

使用函数

console.log(greet("Bob", 25)); //

输出

: Hello, Bob. You are 25 years old.

console.log(greet("Charlie")); //

输出

: Hello, Charlie. You are undefined years old.

1.3 类与接口基础

TypeScript 中的类和接口是面向对象编程的关键概念。类用于定义对象的结

构和行为，而接口则用于定义对象的形状，即对象应该具有哪些属性和方法。

1.3.1 示例：类与接口

定义一个接口

interface Person {

age?: number;

greet: () => string;

}

定义一个类

class Employee implements Person {

age: number;

constructor(name: string, age: number) {

this.name = name;

this.age = age;

}

greet() {

return `Hello, my name is ${this.name} and I am ${this.age} years old.`;

}

创建一个

Employee

实例

let employee = new Employee("David", 35);

检查

employee

是否符合

Person

接口

if (employee instanceof Person) {

console.log(employee.greet()); //

输出

: Hello, my name is David and I am 35 years old.

}

1.3.2 代码解析

在上述代码中，我们首先定义了一个 Person 接口，它描述了一个具有

name 属性、可选的 age 属性和一个 greet 方法的对象。然后，我们定义了一个

Employee 类，它实现了 Person 接口。这意味着 Employee 类必须具有 name 属

性、可选的 age 属性，并且必须定义一个 greet 方法。

在创建 Employee 实例时，我们使用构造函数初始化 name 和 age 属性。最

后，我们通过 instanceof 检查 employee 对象是否符合 Person 接口的定义，并调

用其 greet 方法来验证。

通过这种方式，TypeScript 确保了代码的类型安全性和结构一致性，使得在

大型项目中更容易维护和扩展代码。

2 TypeScript 进阶：接口与类型

2.1 接口的深入理解

2.1.1 接口的定义与使用

在 TypeScript 中，接口（Interface）是一种描述对象形状的类型。它允许你

定义一个对象应该具有的属性、方法和事件的结构。接口可以确保对象的结构

符合预期，从而提高代码的可读性和可维护性。

2.1.1.1 示例：定义一个接口

定义一个接口

interface Person {

age: number;

sayHello: () => string;

}

使用接口

class Student implements Person {

age: number;

constructor(name: string, age: number) {

this.name = name;

this.age = age;

}

sayHello(): string {

return `Hello, my name is ${this.name} and I am ${this.age} years old.`;

}

const student = new Student('Tom', 20);

console.log(student.sayHello()); //

输出

: Hello, my name is Tom and I am 20 years old.

2.1.2 可选属性与只读属性

接口中的属性可以被标记为可选或只读。可选属性使用?标记，只读属性使

用 readonly 关键字。

2.1.2.1 示例：可选属性与只读属性

interface Book {

title: string;

author?: string; //

可选属性

readonly pages: number; //

只读属性

}

const book: Book = {

title: 'TypeScript in Action',

pages: 300

};

以下代码将导致编译错误，因为

pages

是只读属性

// book.pages = 350;

以下代码是合法的，因为

author

是可选属性

const anotherBook: Book = {

title: 'JavaScript: The Good Parts',

pages: 176

};

2.1.3 函数类型与接口

接口不仅可以描述对象的形状，还可以描述函数的类型。这在定义回调函

数或事件处理器时非常有用。

2.1.3.1 示例：函数类型的接口

interface SearchFunc {

(source: string, subString: string): boolean;

}

const mySearch: SearchFunc = function(source, subString) {

return source.indexOf(subString) !== -1;

};

console.log(mySearch('Hello TypeScript', 'TypeScript')); //

输出

: true

2.1.4 接口的继承与扩展

接口可以继承其他接口，从而重用类型定义。这有助于构建复杂的数据结

构，同时保持代码的清晰和模块化。

2.1.4.1 示例：接口的继承与扩展

interface Animal {

sound: () => string;

}

interface Dog extends Animal {

breed: string;

}

class Labrador implements Dog {

breed: string;

constructor(name: string, breed: string) {

this.name = name;

this.breed = breed;

}

sound(): string {

return 'Woof!';

}

const myDog = new Labrador('Buddy', 'Labrador Retriever');

console.log(myDog.name); //

输出

: Buddy

console.log(myDog.sound()); //

输出

: Woof!

剩余24页未读，继续阅读

评论收藏

内容反馈

1.该资源内容由用户上传，如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款（资源遇到问题，请及时私信上传者）

版权申诉

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

kkchenjj

粉丝: 3w+

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

TypeScript进阶：接口与类型.docx

第十七届全国大学生智能车竞赛技术报告

cursor cdn 下载

中兴F30/31刷全功能后台和去云控教程

32个uniapp项目源码 涵盖商城团购等

Axure-chrome-extension

notepad++ 8.6.7

反编译脚本解包 wxapkg

amtemu.v0.9.2-painter.7z

stealth.min.js

vue-devtools-6.6.4-chrome

100套大数据可视化大屏模板

Ant Design Vue 4.2.6 本地离线文档

VueSerial的usb.json

node.js(v16.16.0) 安装包

微信小程序反编译脚本（配合Node.js使用）

chatGPT商业版源码和教程.zip

nodejs安装及环境配置.md

Firefox浏览器page-assist-1.4.4离线插件

Ue5+Vue3像素流，保姆级教程

vscode下载vscode下载vscode下载

Git-2.50.0(2025年6月Windows版本)

nvm-setup.exe（版本v1.1.12）

H3C-iNode-PC-7.3-E0630 inode最新全平台客户端 支持Windows和Mac和linux等

CSDN积分的获取方式

1.1.11 版本 nvm-setup.exe 压缩包，记得解压

Defender Control v2.1（win11 禁用defender服务工具）.zip

2023奥维地图谷歌图源添加方法

博客园学习网站

关于2022年CS保研夏令营通知公告的汇总。欢迎大家积极分享夏令营信息，

最新资源

32个uniapp项目源码涵盖商城团购等

H3C-iNode-PC-7.3-E0630 inode最新全平台客户端支持Windows和Mac和linux等