首页手记 TS考点解析与实战教程

TS考点解析与实战教程

标签：

面试 Typescript

概述

本文全面介绍了TypeScript（TS）的基础概念，包括类型系统、函数类型、接口、类和泛型等核心特性。文章还详细解析了TS考点，如类型推断、类型断言、装饰器和命名空间，并提供了实战演练和常见问题解答。通过本文，读者可以深入了解TS的重要知识点和技术应用。

1. TS基础概念介绍

TypeScript（简称 TS）是一种由微软开发的开源编程语言，它在 JavaScript 的基础上增加了静态类型检查和面向对象的特性。这意味着开发者可以在编写代码时明确指定变量的类型、函数的参数和返回值类型，从而减少潜在的运行时错误。TypeScript 的目标是提供更好的工具支持，包括代码补全、重构、错误检测等，让开发者编写出更健壮的代码。

1.1 类型概念

在 TypeScript 中，类型是一种描述变量、函数、接口等数据结构特性的机制。常见的类型包括基础类型和复合类型。

1.1.1 基础类型

基础类型包括数字、字符串、布尔值、空值、任何（any）等。

数字：表示数值类型，可以是整数或浮点数。
字符串：表示文本数据。
布尔值：表示 true 或 false。
空值：表示 null 或 undefined。
任何（any）：表示可以是任何类型的值。

示例代码：

let age: number = 25;
let name: string = "Alice";
let isStudent: boolean = true;
let nothing: null = null;
let nothingElse: undefined = undefined;
let anything: any = "Hello";
anything = 123;

1.1.2 复合类型

复合类型包括数组、元组、枚举和联合类型。这些类型可以帮助开发者更精确地描述数据结构。

数组：表示一种可以存储多个元素的类型。
元组：表示一种可以存储多个不同类型元素的类型。
枚举：表示一组命名常量的集合。
联合类型：表示取值可以是多个类型中的一个。

示例代码：

let nums: number[] = [1, 2, 3];
let tuple: [number, string] = [42, "Forty Two"];
enum Color { Red, Green, Blue }
let color: Color = Color.Red;
let mixed: number | string = 42;
mixed = "Forty Two";

1.2 函数类型

在 TypeScript 中，函数类型用于定义函数的参数类型和返回值类型。函数类型可以以接口（interface）或类型别名（type alias）的形式来定义。

1.2.1 函数类型定义

函数类型定义通常包括参数列表和返回值类型。例如，可以定义一个接受两个数字参数并返回它们之和的函数类型。

示例代码：

type AddFunction = (x: number, y: number) => number;
function add(x: number, y: number): number {
    return x + y;
}
let sum: AddFunction = add;
console.log(sum(1, 2)); // 输出 3

1.2.2 函数重载

函数重载允许一个函数根据传入的参数类型返回不同的类型。这可以提高代码的灵活性和可读性。

示例代码：

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
    return a + b;
}
console.log(add(1, 2)); // 输出 3
console.log(add("Hello, ", "World!")); // 输出 "Hello, World!"

1.3 接口

接口用于定义对象的结构，包括属性和方法。接口可以用于描述对象的形状，使代码更加模块化和易于维护。

1.3.1 接口定义

接口可以用于描述对象的形状，包括属性和方法。例如，可以定义一个 Person 接口，它包含 name 和 age 属性以及一个 greet 方法。

示例代码：

interface Person {
    name: string;
    age: number;
    greet(): void;
}

let alice: Person = {
    name: "Alice",
    age: 25,
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
};
alice.greet(); // 输出 "Hello, my name is Alice and I am 25 years old."

1.3.2 可选属性和只读属性

在接口定义中，还可以指定可选属性和只读属性。可选属性用 ? 表示，只读属性用 readonly 关键字表示。

示例代码：

interface Person {
    name: string;
    age?: number; // 可选属性
    readonly id: number; // 只读属性
}

let alice: Person = {
    name: "Alice",
    id: 12345
};

// alice.age = 25; // 编译错误，age 是可选属性，但这里没有初始化
alice.id = 67890; // 编译错误，id 是只读属性

1.4 类

类是一种面向对象编程（OOP）的关键特性，它允许开发者定义具有属性和方法的对象类型。

1.4.1 类定义

类可以定义属性和方法。例如，可以定义一个 Car 类，它包含 make 和 model 属性以及一个 start 方法。

示例代码：

class Car {
    make: string;
    model: string;

    constructor(make: string, model: string) {
        this.make = make;
        this.model = model;
    }

    start(): void {
        console.log(`${this.make} ${this.model} is starting.`);
    }
}

let myCar = new Car("Toyota", "Corolla");
myCar.start(); // 输出 "Toyota Corolla is starting."

1.4.2 继承和多态

在 TypeScript 中，类可以继承其他类。这可以实现多态，即子类可以替代父类在任何地方使用。

示例代码：

class Vehicle {
    start(): void {
        console.log("Starting the vehicle.");
    }
}

class Car extends Vehicle {
    make: string;
    model: string;

    constructor(make: string, model: string) {
        super();
        this.make = make;
        this.model = model;
    }

    start(): void {
        console.log(`${this.make} ${this.model} is starting.`);
    }
}

let car = new Car("Toyota", "Corolla");
car.start(); // 输出 "Toyota Corolla is starting."

1.5 声明文件

TypeScript 支持声明文件，用于为现有的 JavaScript 库定义类型信息。这可以提供更强大的类型检查和代码补全功能。

1.5.1 声明文件定义

声明文件通常以 .d.ts 为扩展名，其中包含库的类型定义。例如，可以为 jQuery 库创建一个声明文件。

示例代码：

// jquery.d.ts
interface JQuery {
    version: string;
    selector: string;
    html(): string;
}

declare var $: JQuery;

然后，可以在 TypeScript 项目中使用 jquery.d.ts 文件。

示例代码：

import $ from 'jquery';

console.log($.version); // 输出 jQuery 版本号

1.6 装饰器

装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问符、属性或参数。装饰器使用 @expression 语法，其中 expression 必须在运行时解析为一个函数。

1.6.1 装饰器定义

装饰器可以用于增强类或属性的功能。例如，一个简单的装饰器可以用于日志记录。

示例代码：

function log(target: any, name: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
        console.log(`Calling "${name}" with`, args);
        return originalMethod.apply(this, args);
    };

    return descriptor;
}

class Calculator {
    @log
    add(a: number, b: number) {
        return a + b;
    }
}

const calculator = new Calculator();
calculator.add(1, 2); // 输出 "Calling "add" with [ 1, 2 ]"

1.7 命名空间

命名空间（namespace）是一种组织代码的方式，可以避免全局命名空间的污染和命名冲突。命名空间中的代码可以在外部代码中访问。

1.7.1 命名空间定义

命名空间可以包含变量、函数和其他命名空间。例如，可以定义一个 MathUtil 命名空间，它包含一个 add 函数和一个 multiply 函数。

示例代码：

namespace MathUtil {
    export function add(a: number, b: number) {
        return a + b;
    }

    export function multiply(a: number, b: number) {
        return a * b;
    }
}

console.log(MathUtil.add(1, 2)); // 输出 3
console.log(MathUtil.multiply(1, 2)); // 输出 2

1.8 泛型

泛型是一种允许在定义函数、类或接口时使用类型变量的特性。这可以提高代码的复用性和灵活性。

1.8.1 泛型定义

泛型可以用于定义可以处理多种类型的函数或类。例如，可以定义一个 Identity 函数，它接受任何类型的参数并返回相同类型的值。

示例代码：

function identity<T>(arg: T): T {
    return arg;
}

console.log(identity<string>("Hello")); // 输出 "Hello"
console.log(identity<number>(42)); // 输出 42

2. TS考点解析与重要知识点

2.1 TypeScript 类型推断

TypeScript 的类型推断是一种自动推断变量类型的机制。如果显式指定类型，TypeScript 将使用该类型；否则，它将根据上下文推断类型。

示例代码：

let x = 10; // 推断为 number 类型
let y: string = "Hello"; // 显式指定为 string 类型

2.2 TypeScript 类型断言

类型断言是一种显式告诉编译器变量的具体类型的方式。类型断言有两种形式：尖括号语法 <Type> 和 as 语法 value as Type。

示例代码：

let anyValue: any = "Hello";
let stringValue: string = <string>anyValue; // 使用尖括号语法
let stringValue2: string = anyValue as string; // 使用 as 语法

2.3 TypeScript 泛型约束

通过泛型约束，可以定义泛型类型的约束条件，从而限制泛型类型的范围。

示例代码：

function printId<T extends { id: number }>(item: T) {
    console.log(item.id);
}

printId({ id: 123 }); // 输出 123
printId({ id: 456, name: "Alice" }); // 输出 456

2.4 TypeScript 类与继承

在 TypeScript 中，可以使用 extends 关键字定义类的继承关系。子类可以覆盖父类的方法，并访问父类的属性和方法。

示例代码：

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    sayHello(): void {
        console.log(`Hello, I'm ${this.name}.`);
    }
}

class Dog extends Animal {
    bark(): void {
        console.log("Woof!");
    }
}

let dog = new Dog("Buddy");
dog.sayHello(); // 输出 "Hello, I'm Buddy."
dog.bark(); // 输出 "Woof!"

2.5 TypeScript 接口与实现

接口可以定义对象的结构，实现接口的对象必须满足接口中定义的属性和方法。

示例代码：

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    return {
        color: config.color || "red",
        area: config.width ? config.width * config.width : 0
    };
}

let mySquare = createSquare({ color: "blue", width: 100 });
console.log(mySquare); // 输出 { color: "blue", area: 10000 }

2.6 TypeScript 装饰器

示例代码：

function readonly<T extends object, K extends keyof T>(target: T, key: K) {
    let value = target[key];

    Object.defineProperty(target, key, {
        get() {
            return value;
        },
        set() {
            throw new Error(`Cannot assign to ${key} because it is a read-only property.`);
        }
    });
}

class User {
    @readonly
    name: string;

    constructor(name: string) {
        this.name = name;
    }
}

let user = new User("Alice");
console.log(user.name); // 输出 "Alice"
user.name = "Bob"; // 抛出错误，因为 name 是只读属性

3. 实战演练：常见题目解析

3.1 题目1：类型推断与类型断言

问题描述

编写一个函数 getLength，它接受一个任意类型的数据，并返回该数据的长度。如果数据是数组或字符串，则返回其长度；否则返回 null。

解决方案

示例代码：

function getLength<T>(value: T): number | null {
    if (Array.isArray(value)) {
        return value.length;
    } else if (typeof value === "string") {
        return value.length;
    } else {
        return null;
    }
}

console.log(getLength([1, 2, 3])); // 输出 3
console.log(getLength("Hello")); // 输出 5
console.log(getLength({})); // 输出 null

3.2 题目2：泛型模板

问题描述

编写一个 Identity 函数，它接受任意类型的参数并返回相同类型的值。

解决方案

示例代码：

function identity<T>(value: T): T {
    return value;
}

console.log(identity<string>("Hello")); // 输出 "Hello"
console.log(identity<number>(42)); // 输出 42

3.3 题目3：装饰器使用

问题描述

编写一个 @readonly 装饰器，它将一个属性标记为只读属性。

解决方案

示例代码：

function readonly<T extends object, K extends keyof T>(target: T, key: K) {
    let value = target[key];

    Object.defineProperty(target, key, {
        get() {
            return value;
        },
        set() {
            throw new Error(`Cannot assign to ${key} because it is a read-only property.`);
        }
    });
}

class User {
    @readonly
    name: string;

    constructor(name: string) {
        this.name = name;
    }
}

let user = new User("Alice");
console.log(user.name); // 输出 "Alice"
user.name = "Bob"; // 抛出错误，因为 name 是只读属性

4. TS考点复习与总结

4.1 类型系统

基础类型：数字、字符串、布尔值、空值、任何（any）。
复合类型：数组、元组、枚举和联合类型。
接口：定义对象的结构。
类：定义具有属性和方法的对象类型。
泛型：定义可以处理多种类型的函数或类。
类型推断：自动推断变量的类型。
类型断言：显式告诉编译器变量的类型。
泛型约束：限制泛型类型的范围。

4.2 函数类型

函数类型定义：定义函数的参数类型和返回值类型。
函数重载：定义不同参数类型返回不同类型的函数。

4.3 接口与实现

接口：定义对象的结构。
实现：实现接口的对象必须满足接口中定义的属性和方法。

4.4 装饰器

装饰器：附加到类声明、方法、访问符、属性或参数的特殊类型声明。
装饰器定义：装饰器使用 @expression 语法，其中 expression 必须在运行时解析为一个函数。

4.5 命名空间

命名空间：组织代码的方式，避免全局命名空间的污染和命名冲突。
命名空间定义：命名空间可以包含变量、函数和其他命名空间。

4.6 泛型

泛型：允许在定义函数、类或接口时使用类型变量。
泛型定义：泛型可以提高代码的复用性和灵活性。

4.7 实战示例

4.7.1 类型推断

示例代码：

let x = 10; // 推断为 number 类型
let y: string = "Hello"; // 显式指定为 string 类型

4.7.2 类型断言

示例代码：

let anyValue: any = "Hello";
let stringValue: string = <string>anyValue; // 使用尖括号语法
let stringValue2: string = anyValue as string; // 使用 as 语法

4.7.3 泛型约束

示例代码：

function printId<T extends { id: number }>(item: T) {
    console.log(item.id);
}

printId({ id: 123 }); // 输出 123
printId({ id: 456, name: "Alice" }); // 输出 456

4.7.4 类与继承

示例代码：

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    sayHello(): void {
        console.log(`Hello, I'm ${this.name}.`);
    }
}

class Dog extends Animal {
    bark(): void {
        console.log("Woof!");
    }
}

let dog = new Dog("Buddy");
dog.sayHello(); // 输出 "Hello, I'm Buddy."
dog.bark(); // 输出 "Woof!"

4.7.5 接口与实现

示例代码：

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    return {
        color: config.color || "red",
        area: config.width ? config.width * config.width : 0
    };
}

let mySquare = createSquare({ color: "blue", width: 100 });
console.log(mySquare); // 输出 { color: "blue", area: 10000 }

5. 常见问题解答

5.1 问题1：什么是类型推断？

类型推断是 TypeScript 的一种特性，它可以帮助编译器自动推断变量的类型。如果在定义变量时没有显式指定类型，编译器将根据变量的初始化值或后续赋值来推断类型。例如：

let age = 25; // 推断为 number 类型
let name = "Alice"; // 推断为 string 类型

5.2 问题2：如何使用类型断言？

类型断言是一种显式告诉编译器变量的具体类型的方式。类型断言有两种形式：尖括号语法 <Type> 和 as 语法 value as Type。例如：

let anyValue: any = "Hello";
let stringValue: string = <string>anyValue; // 使用尖括号语法
let stringValue2: string = anyValue as string; // 使用 as 语法

5.3 问题3：如何定义泛型约束？

泛型约束用于限制泛型类型的范围。通过泛型约束，可以使泛型类型满足某些条件。例如：

function printId<T extends { id: number }>(item: T) {
    console.log(item.id);
}

printId({ id: 123 }); // 输出 123
printId({ id: 456, name: "Alice" }); // 输出 456

5.4 问题4：类与继承如何使用？

在 TypeScript 中，可以使用 extends 关键字定义类的继承关系。子类可以覆盖父类的方法，并访问父类的属性和方法。例如：

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    sayHello(): void {
        console.log(`Hello, I'm ${this.name}.`);
    }
}

class Dog extends Animal {
    bark(): void {
        console.log("Woof!");
    }
}

let dog = new Dog("Buddy");
dog.sayHello(); // 输出 "Hello, I'm Buddy."
dog.bark(); // 输出 "Woof!"

5.5 问题5：如何实现接口？

接口定义了对象的结构，实现接口的对象必须满足接口中定义的属性和方法。例如：

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    return {
        color: config.color || "red",
        area: config.width ? config.width * config.width : 0
    };
}

let mySquare = createSquare({ color: "blue", width: 100 });
console.log(mySquare); // 输出 { color: "blue", area: 10000 }

5.6 问题6：如何创建装饰器？

装饰器是一种特殊类型的声明，它可以在运行时附加到类声明、方法、访问符、属性或参数。装饰器使用 @expression 语法，其中 expression 必须在运行时解析为一个函数。例如：

function readonly<T extends object, K extends keyof T>(target: T, key: K) {
    let value = target[key];

    Object.defineProperty(target, key, {
        get() {
            return value;
        },
        set() {
            throw new Error(`Cannot assign to ${key} because it is a read-only property.`);
        }
    });
}

class User {
    @readonly
    name: string;

    constructor(name: string) {
        this.name = name;
    }
}

let user = new User("Alice");
console.log(user.name); // 输出 "Alice"
user.name = "Bob"; // 抛出错误，因为 name 是只读属性

6. 进阶学习建议与资源推荐

6.1 进阶学习建议

深入理解 TypeScript 的类型系统：掌握类型推断、类型断言、泛型约束等高级类型特性。
学习高级装饰器：了解如何创建和使用复杂的装饰器，例如类装饰器、方法装饰器和参数装饰器。
了解命名空间和模块化编程：学习如何使用命名空间和模块化编程构建大型项目。
掌握类和继承：深入理解类的继承关系和多态性。
实践接口和实现：通过真实场景练习接口和实现的定义和使用。
学习声明文件：为现有的 JavaScript 库编写声明文件，以便在 TypeScript 项目中使用。

6.2 资源推荐

官方文档：TypeScript 官方文档提供了详尽的教程和参考材料，是学习 TypeScript 的最佳资源。
慕课网：慕课网提供了丰富的在线课程资源，涵盖 TypeScript 初级到高级的各种课程。
TypeScript 官方 GitHub 仓库：TypeScript 的官方 GitHub 仓库提供了源代码、文档和社区讨论，是深入学习 TypeScript 的好地方。
TypeScript 社区：加入 TypeScript 社区，与其他开发者交流，获取最新的学习资源和实践经验。
TypeScript 官方博客：TypeScript 官方博客不断发布最新的开发动态和技术文章，是了解最新进展的好去处。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

胡说叔叔

手记
篇

粉丝

130

获赞与收藏

581

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30980 346

TypeScript 入门教程

38个小节 93707 667

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

TS考点解析与实战教程

1.1 类型概念

1.1.1 基础类型

1.1.2 复合类型

1.2 函数类型

1.2.1 函数类型定义

1.2.2 函数重载

1.3 接口

1.3.1 接口定义

1.3.2 可选属性和只读属性

1.4 类

1.4.1 类定义

1.4.2 继承和多态

1.5 声明文件

1.5.1 声明文件定义

1.6 装饰器

1.6.1 装饰器定义

1.7 命名空间

1.7.1 命名空间定义

1.8 泛型

1.8.1 泛型定义

2.1 TypeScript 类型推断

2.2 TypeScript 类型断言

2.3 TypeScript 泛型约束

2.4 TypeScript 类与继承

2.5 TypeScript 接口与实现

2.6 TypeScript 装饰器

3.1 题目1：类型推断与类型断言

问题描述

解决方案

3.2 题目2：泛型模板

问题描述

解决方案

3.3 题目3：装饰器使用

问题描述

解决方案

4.1 类型系统

4.2 函数类型

4.3 接口与实现

4.4 装饰器

4.5 命名空间

4.6 泛型

4.7 实战示例

4.7.1 类型推断

4.7.2 类型断言

4.7.3 泛型约束

4.7.4 类与继承

4.7.5 接口与实现

5.1 问题1：什么是类型推断？

5.2 问题2：如何使用类型断言？

5.3 问题3：如何定义泛型约束？

5.4 问题4：类与继承如何使用？

5.5 问题5：如何实现接口？

5.6 问题6：如何创建装饰器？

6.1 进阶学习建议

6.2 资源推荐

阅读免费教程