TypeScript 快速上⼿（2）

最新推荐文章于 2024-09-25 14:00:00 发布

前端贾公子

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量1.4k

点赞数 31

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_63358859/article/details/141287240

版权

14.1.interface 与 type 的区别

14.2.interface 与抽象类的区别

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 修饰符

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}岁`);
  }
}

class Student extends Person {
  constructor(name: string, age: number) {
    super(name, age);
  }
  study() {
    // 【子类中】可以访问父类中public修饰的：name属性、age属性
    console.log(`${this.age}岁的${this.name}正在努力学习`);
  }
}
const p1 = new Person("张三", 18);
// 类的【外部】可以访问public修饰的属性
console.log(p1.name);

属性的简写形式

class Person {
  public name: string;
  public age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

lass Person {
constructor(
public name: string,
public age: number
) { }
}

protected 修饰符

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
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 ，表示所有包裹的基本结构，任何包裹都有重量属性 weigh

t ，包裹都需要计算运费。但不同类型的包裹（如：标准速度、特快专递）都有不同的运费计算

方式，因此用于计算运费的 calculate 方法是一个抽象方法，必须由具体的子类来实现。

abstract class Package {
  constructor(public weight: number) {}
  // 抽象方法：用来计算运费，不同类型包裹有不同的计算方式
  abstract calculate(): number;
  // 通用方法：打印包裹详情
  printPackage() {
    console.log(`包裹重量为: ${this.weight}kg，运费为: ${this.calculate()}元`);
  }
}

// 标准包裹
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();

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();

总结：何时使用抽象类？

1. 定义：为一组相关的类定义通用的行为（方法或属性）时。
2. 提供：在抽象类中提供某些方法或为其提供基础实现，这样派生类就可以继承这些实现。
3. 确保：强制派生类实现一些关键行为。
4. 代码和逻辑：当多个类需要共享部分代码时，抽象类可以避免代码重复。

13 .interface（接口）

interface 是一种定义结构的方式，主要作用是为：类、对象、函数等规定一种契约，这样

可以确保代码的一致性和类型安全，但要注意 interface 只能定义格式，不能包含任何实

现！

定义类结构;


// 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);

定义对象结构

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}米`);
  },
};

定义函数结构


interface CountInterface {
  (a: number, b: number): number;
}
const count: CountInterface = (x, y) => {
  return x + y;
};

接口之间的继承

一个 interface 继承另一个 interface ，从而实现代码的复用

interface PersonInterface {
  name: string; // 姓名
  age: number; // 年龄
}
interface StudentInterface extends PersonInterface {
  grade: string; // 年级
}
const stu: StudentInterface = {
  name: "张三",
  age: 25,
  grade: "高三",
};

接口自动合并（可重复定义）

// 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);
  }
}

总结：何时使用接口？

1. 定义对象的格式：描述数据模型、API 响应格式、配置对象........等等，是开发中用的最多
的场景。
2. 类的契约：规定一个类需要实现哪些属性和方法。
3. 扩展已有接口：一般用于扩展第三方库的类型，这种特性在大型项目中可能会用到。

14 .一些相似概念的区别

14.1.interface 与 type 的区别

相同点： interface 和 type 都可以用于定义对象结构，在定义对象结构时两者可以互换。

不同点：

interface ：更专注于定义对象和类的结构，支持继承、合并。
type ：可以定义类型别名、联合类型、交叉类型，但不支持继承和自动合并。

interface 和 type 都可以定义对象结构 TypeScript

// 使用 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 可以继承、合并 TypeScript

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 的交叉类型 TypeScript

// 使用 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);
  },
};

14.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 来表示该类型：

泛型函数

// 泛型函数 参数是泛型 返回是泛型
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);

泛型接⼝

interface 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)

前端贾公子

关注

31
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

TypeScript 快速上⼿ （2）

10. 复习类相关知识

11 .属性修饰符

public 修饰符

属性的简写形式

protected 修饰符

private 修饰符

readonly 修饰符

12 .抽象类

13 .interface（接口）

定义类结构;

定义对象结构

定义函数结构

接口之间的继承

接口自动合并（可重复定义）

14 .一些相似概念的区别

14.1.interface 与 type 的区别

14.2.interface 与 抽象类的区别

泛型

泛型函数

泛型接⼝

泛型约束;

泛型类;

类型声明文件

TypeScript 快速上⼿（2）

14.2.interface 与抽象类的区别