七、常⽤类型与语法
10. 复习类相关知识
// 类
class Person {
// 属性声明
name: string
age: number
// 构造器
constructor(name: string, age: number) {
this.name = name
this.age = age
}
// ⽅法
speak() {
console.log(`我叫：${this.name}，今年${this.age}岁`)
}
}
// Person实例
const p1 = new Person('周杰伦', 38)
// 继承
class Student extends Person {
grade: string
// 构造器
constructor(name: string, age: number, grade: string) {
super(name, age)
this.grade = grade
}
// 备注本例中若Student类不需要额外的属性，Student的构造器可以省略
// 重写从⽗类继承的⽅法
override speak() {
console.log(`我是学⽣，我叫：${this.name}，今年${this.age}岁，在读${this.grade}
年级`,)
}
// ⼦类⾃⼰的⽅法
study() {
console.log(`${this.name}正在努⼒学习中......`)
}
}
11. 属性修饰符
| 修饰符 | 含义 | 具体规则 |
|---|---|---|
public |
公开的 | 可以被：类内部、⼦类、类外部访问 。 |
protected |
受保护的 | 可以被：类内部、⼦类访问。 |
private |
私有的 | 可以被：类内部访问。 |
readonly |
只读属性 | 属性⽆法修改。 |
public修饰符
// Person 类
class Person {
// name写了public修饰符，age没写修饰符，最终都是public修饰符
public name: string
age: number
constructor(name: string, age: number) {
this.name = name
this.age = age
}
speak() {
// 类的【内部】可以访问public修饰的name和age
console.log(`我叫：${this.name}，今年${this.age}岁`)
}
}
const p1 = new Person('张三', 18)
// 类的【外部】可以访问public修饰的属性
console.log(p1.name)
// Student 继承 Person
class Student extends Person {
constructor(name: string, age: number) {
super(name, age)
}
study() {
// 【⼦类中】可以访问⽗类中public修饰的：name属性、age属性
console.log(`${this.age}岁的${this.name}正在努⼒学习`)
}
}
属性的简写形式
// 完整写法
class Person {
public name: string;
public age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
// 简写形式
class Person {
constructor(
public name: string,
public age: number
) { }
}
protected修饰符
// Person类
class Person {
// name和age是受保护属性，不能在类外部访问，但可以在【类】与【⼦类】中访问
constructor(
protected name: string,
protected age: number
) {}
// getDetails是受保护⽅法，不能在类外部访问，但可以在【类】与【⼦类】中访问
protected getDetails(): string {
// 类中能访问受保护的name和age属性
return `我叫：${this.name}，年龄是：${this.age}`
}
// introduce是公开⽅法，类、⼦类、类外部都能使⽤
introduce() {
// 类中能访问受保护的getDetails⽅法
console.log(this.getDetails());
}
}
const p1 = new Person('杨超越',18)
// 可以在类外部访问introduce
p1.introduce()
// 以下代码均报错
// p1.getDetails()
// p1.name
// p1.age
// Student 继承 Person
class Student extends Person {
constructor(name:string,age:number){
super(name,age)
}
study(){
// ⼦类中可以访问introduce
this.introduce()
// ⼦类中可以访问name
console.log(`${this.name}正在努⼒学习`)
}
}
const s1 = new Student('tom',17)
s1.introduce()
private修饰符
class Person {
constructor(
public name: string,
public age: number,
// IDCard属性为私有的(private)属性，只能在【类内部】使⽤
private IDCard: string
) { }
private getPrivateInfo(){
// 类内部可以访问私有的(private)属性 —— IDCard
return `身份证号码为：${this.IDCard}`
}
getInfo() {
// 类内部可以访问受保护的(protected)属性 —— name和age
return `我叫: ${this.name}, 今年刚满${this.age}岁`;
}
getFullInfo(){
// 类内部可以访问公开的getInfo⽅法，也可以访问私有的getPrivateInfo⽅法
return this.getInfo() + '，' + this.getPrivateInfo()
}
}
const p1 = new Person('张三',18,'110114198702034432')
console.log(p1.getFullInfo())
console.log(p1.getInfo())
// 以下代码均报错
// p1.name
// p1.age
// p1.IDCard
// p1.getPrivateInfo()
readonly修饰符
class Car {
constructor(
public readonly vin: string, //⻋辆识别码，为只读属性
public readonly year: number,//出⼚年份，为只读属性
public color: string,
public sound: string
) { }
// 打印⻋辆信息
displayInfo() {
console.log(`
识别码：${this.vin},
出⼚年份：${this.year},
颜⾊：${this.color},
⾳响：${this.sound}
`);
}
}
const car = new Car('1HGCM82633A123456', 2018, '⿊⾊', 'Bose⾳响');
car.displayInfo()
// 以下代码均错误：不能修改 readonly 属性
// car.vin = '897WYE87HA8SGDD8SDGHF';
// car.year = 2020;
12. 抽象类
- **概述：**抽象类是⼀种⽆法被实例化的类，专⻔⽤来定义类的结构和⾏为，类中可以写抽象 ⽅法，也可以写具体实现。抽象类主要⽤来为其派⽣类提供⼀个基础结构，要求其派⽣类 必须实现其中的抽象⽅法。
- **简记：**抽象类不能实例化，其意义是可以被继承，抽象类⾥可以有普通⽅法、也可以有抽 象⽅法。
通过以下场景，理解抽象类：
我们定义⼀个抽象类
Package，表示所有包裹的基本结构，任何包裹都有重量属性weight，包裹都需要计算运费。但不同类型的包裹（如：标准速度、特快专递）都有不同的运费计算⽅式，因此⽤于计算运费的calculate⽅法是⼀个抽象⽅法，必须由具体的⼦类来实现。
// Package 抽象类
bstract class Package {
constructor(public weight: number) { }
// 抽象⽅法：⽤来计算运费，不同类型包裹有不同的计算⽅式
abstract calculate(): number
// 通⽤⽅法：打印包裹详情
printPackage() {
console.log(`包裹重量为: ${this.weight}kg，运费为: ${this.calculate()}元`);
}
}
StandardPackage 类继承了 Package ，实现了 calculate ⽅法：
// StandardPackage 类 标准包裹
class StandardPackage extends Package {
constructor(
weight: number,
public unitPrice: number // 每公⽄的固定费率
) { super(weight) }
// 实现抽象⽅法：计算运费
calculate(): number {
return this.weight * this.unitPrice;
}
}
// 创建标准包裹实例
const s1 = new StandardPackage(10,5)
s1.printPackage()
ExpressPackage 类继承了 Package ，实现了 calculate ⽅法：
// ExpressPackage 类（特快包裹）
class ExpressPackage extends Package {
constructor(
weight: number,
private unitPrice: number, // 每公⽄的固定费率（快速包裹更⾼）
private additional: number // 超出10kg以后的附加费
) { super(weight) }
// 实现抽象⽅法：计算运费
calculate(): number {
if(this.weight > 10){
// 超出10kg的部分，每公⽄多收additional对应的价格
return 10 * this.unitPrice + (this.weight - 10) * this.additional
}else {
return this.weight * this.unitPrice;
}
}
}
// 创建特快包裹实例
const e1 = new ExpressPackage(13,8,2)
e1.printPackage()
总结：何时使⽤抽象类？
- 定义 通用接口：为⼀组相关的类定义通⽤的⾏为（⽅法或属性）时。
- 提供 基础实现：在抽象类中提供某些⽅法或为其提供基础实现，这样派⽣类就可以继承这些实现。
- 确保 关键实现：强制派⽣类实现⼀些关键⾏为。
- 共享代码和逻辑：当多个类需要共享部分代码时，抽象类可以避免代码重复。
13. interface
interface 是⼀种定义结构的⽅式，主要作⽤是为：类、对象、函数等规定⼀种契约，这样可以确保代码的⼀致性和类型安全，但要注意 interface 只能定义格式，不能包含任何实现 ！
1. 定义类结构
// PersonInterface接⼝，⽤与限制Person类的格式
interface PersonInterface {
name: string
age: number
speak(n: number): void
}
// 定义⼀个类 Person，实现 PersonInterface 接⼝
class Person implements PersonInterface {
constructor(
public name: string,
public age: number
) { }
// 实现接⼝中的 speak ⽅法
speak(n: number): void {
for (let i = 0; i < n; i++) {
// 打印出包含名字和年龄的问候语句
console.log(`你好，我叫${this.name}，我的年龄是${this.age}`);
}
}
}
// 创建⼀个 Person 类的实例 p1，传⼊名字 'tom' 和年龄 18
const p1 = new Person('tom', 18);
p1.speak(3)
2. 定义对象结构
interface UserInterface {
name: string
readonly gender: string // 只读属性
age?: number // 可选属性
run: (n: number) => void
}
const user: UserInterface = {
name: "张三",
gender: '男',
age: 18,
run(n) {
console.log(`奔跑了${n}⽶`)
}
};
3. 定义函数结构
interface CountInterface {
(a: number, b: number): number;
}
const count: CountInterface = (x, y) => {
return x + y
}
4. 接⼝之间的继承
⼀个 interface 继承另⼀个 interface ，从⽽实现代码的复⽤
interface PersonInterface {
name: string // 姓名
age: number // 年龄
}
interface StudentInterface extends PersonInterface {
grade: string // 年级
}
const stu: StudentInterface = {
name: "张三",
age: 25,
grade: '⾼三',
}
5. 接⼝⾃动合并（可重复定义）
// PersonInterface接⼝
interface PersonInterface {
// 属性声明
name: string
age: number
}
// 给PersonInterface接⼝添加新属性
interface PersonInterface {
// ⽅法声明
speak(): void
}
// Person类实现PersonInterface
class Person implements PersonInterface {
name: string
age: number
// 构造器
constructor(name: string, age: number) {
this.name = name
this.age = age
}
// ⽅法
speak() {
console.log('你好！我是⽼师:', this.name)
}
}
总结：何时使⽤接⼝？
- 定义对象的格式： 描述数据模型、API 响应格式、配置对象........等等，是开发中⽤的最多的场景。
- 类的契约：规定⼀个类需要实现哪些属性和⽅法。
- 扩展已有接⼝：⼀般⽤于扩展第三⽅库的类型， 这种特性在⼤型项⽬中可能会⽤到。
14. ⼀些相似概念的区别
1. interface 与 type 的区别
- 相同点：
interface和type都可以⽤于定义对象结构，在定义对象结构时两者可以 互换。 - 不同点：
interface：更专注于定义对象和类的结构，⽀持继承、合并。type：可以定义类型别名、联合类型、交叉类型，但不⽀持继承和⾃动合并。
interface 和 type 都可以定义对象结构
// 使⽤ interface 定义 Person 对象
interface PersonInterface {
name: string;
age: number;
speak(): void;
}
// 使⽤ type 定义 Person 对象
type PersonType = {
name: string;
age: number;
speak(): void;
};
// 使⽤PersonInterface
/* let person: PersonInterface = {
name:'张三',
age:18,
speak(){
console.log(`我叫：${this.name}，年龄：${this.age}`)
}
} */
// 使⽤PersonType
let person: PersonType = {
name:'张三',
age:18,
speak(){
console.log(`我叫：${this.name}，年龄：${this.age}`)
}
}
interface 可以继承、合并
interface PersonInterface {
name: string // 姓名
age: number // 年龄
}
interface PersonInterface {
speak: () => void
}
interface StudentInterface extends PersonInterface {
grade: string // 年级
}
const student: StudentInterface = {
name: '李四',
age: 18,
grade: '⾼⼆',
speak() {
console.log(this.name,this.age,this.grade)
}
}
type 的交叉类型
// 使⽤ type 定义 Person 类型，并通过交叉类型实现属性的合并
type PersonType = {
name: string; // 姓名
age: number; // 年龄
} & {
speak: () => void;
};
// 使⽤ type 定义 Student 类型，并通过交叉类型继承 PersonType
type StudentType = PersonType & {
grade: string; // 年级
};
const student: StudentType = {
name: '李四',
age: 18,
grade: '⾼⼆',
speak() {
console.log(this.name, this.age, this.grade);
}
};
2. interface 与 抽象类的区别
- 相同点：都能定义⼀个类的格式（定义类应遵循的契约）
- 不相同： 接⼝：只能描述结构，不能有任何实现代码，⼀个类可以实现多个接⼝。 抽象类：既可以包含抽象⽅法，也可以包含具体⽅法， ⼀个类只能继承⼀个抽象类。
个类可以实现多个接⼝
// FlyInterface 接⼝
interface FlyInterface {
fly(): void;
}
// 定义 SwimInterface 接⼝
interface SwimInterface {
swim(): void;
}
// Duck 类实现了 FlyInterface 和 SwimInterface 两个接⼝
class Duck implements FlyInterface, SwimInterface {
fly(): void {
console.log('鸭⼦可以⻜');
}
swim(): void {
console.log('鸭⼦可以游泳');
}
}
// 创建⼀个 Duck 实例
const duck = new Duck();
duck.fly(); // 输出: 鸭⼦可以⻜
duck.swim(); // 输出: 鸭⼦可以游泳
八、泛型
泛型允许我们在定义函数、类或接⼝时，使⽤类型参数来表示未指定的类型，这些参数在具体使⽤时，才被指定具体的类型，泛型能让同⼀段代码适⽤于多种类型，同时仍然保持类型的安全性。
举例：如下代码中 <T> 就是泛型，（不⼀定⾮叫 T ），设置泛型后即可在函数中使⽤ T 来表示该类型：
泛型类：
function logData<T>(data: T): T {
console.log(data)
return data
}
logData<number>(100)
logData<string>('hello')
泛型可以有多个：
function logData<T, U>(data1: T, data2: U): T | U {
console.log(data1,data2)
return Date.now() % 2 ? data1 : data2
}
logData<number, string>(100, 'hello')
logData<string, boolean>('ok', false)
泛型接口：
nterface PersonInterface<T> {
name: string,
age: number,
extraInfo: T
}
let p1: PersonInterface<string>
let p2: PersonInterface<number>
p1 = { name: '张三', age: 18, extraInfo: '⼀个好⼈' }
p2 = { name: '李四', age: 18, extraInfo: 250 }
泛型约束：
interface LengthInterface {
length: number
}
// 约束规则是：传⼊的类型T必须具有 length 属性
function logPerson<T extends LengthInterface>(data: T): void {
console.log(data.length)
}
logPerson<string>('hello')
// 报错：因为number不具备length属性
// logPerson<number>(100)
泛型类：
class Person<T> {
constructor(
public name: string,
public age: number,
public extraInfo: T
) { }
speak() {
console.log(`我叫${this.name}今年${this.age}岁了`)
console.log(this.extraInfo)
}
}
// 测试代码1
const p1 = new Person<number>("tom", 30, 250);
// 测试代码2
type JobInfo = {
title: string;
company: string;
}
const p2 = new Person<JobInfo>("tom", 30, { title: '研发总监', company: '发发发
科技公司' });
九、类型声明⽂件
类型声明⽂件是 TypeScript 中的⼀种特殊⽂件，通常以 .d.ts 作为扩展名。它的主要作⽤是为现有的 JavaScript 代码提供类型信息，使得 TypeScript 能够在使⽤这些 JavaScript 库或模块时进⾏类型检查和提示。
demo.js
export function add(a, b) {
return a + b;
}
export function mul(a, b) {
return a * b;
}
demo.d.ts
declare function add(a: number, b: number): number;
declare function mul(a: number, b: number): number;
export { add, mul };
index.ts
// example.ts
import { add, mul } from "./demo.js";
const x = add(2, 3); // x 类型为 number
const y = mul(4, 5); // y 类型为 number
console.log(x,y
