一. TypeScript介绍

TypeScript(TS)是一种开源编程语言，它是JavaScript的一个超集，相比于JavaScript而言，它添加了静态和动态类型。在使用TS的过程中，开发者可以使用类型注解来显式地声明变量、函数参数和返回值的类型。另外使用TS也可以在编译过程中非常方便的发现错误并及时纠正。

二、TypeScript基础

基础类型

boolean、number、string

let age:number = 22;
let isActive:boolean = false;
let username:string = "Rianna";

枚举enum

enum animal{
    sheep,  //0
    chicken,  //1
    dog,  //2
    cat  //3
}
enum colour{
    red = 2, //2
    black,  //3
    white  //4
}

any,unknown,void

let value: any = 1;
let username: unknown = "Unknown";
function showMessage(): void{
    console.log("hello world")
}

never

function throwError(message: string): never{
    throw new Error(message);
}

数组类型 []

let emptyNumberArray: number[] = [];

元组类型 tuple

let genderType: [string, boolean]; tupleType = ["female", true];

函数类型

定义：TS定义函数类型时要定义输入参数类型和输出类型

输入参数：参数支持可选参数和默认参数

输出参数：输出可以自动推断，没有返回值时，默认为void类型

函数重载：名称相同但参数不同，可以通过重载支持多种类型

// 可选参数和默认参数
type GreetType = (name: string, age?: number) => void;

const greet: GreetType = (name, age = 30) => {
    console.log(`Hello, ${name}! You are ${age} years old.`);
};
// 剩余参数，使用...
type SumType = (...numbers: number[]) => number;

const sum: SumType = (...numbers) => {
    return numbers.reduce((total, num) => total + num, 0);
};

// 重载
function processInput(input: string): void;
function processInput(input: number): void;

function processInput(input: string | number): void {
    // 具体的处理逻辑
}

接口 - interface

定义：接口是为了定义对象类型。

特点：提供了一种类型抽象的方式，使代码更具有可读性、可维护性。并且可以在编译时捕获潜在的类型错误。

例子：

interface Book {
    title: string;
    author?: string; // 可选属性
    readonly published: Date; // 只读属性
    introduction(): void;
}
interface Newbook extends Book {
    end(): void;
}

类

类（class）是一种面向对象的概念，用于创建对象的蓝图或模板。TS中的类在面对对象编程中扮演者重要的角色，使得代码更加模块化、可读性更强。

特点：

访问修饰符：TS提供了public、private、protected访问修饰符，用于控制类的成员在何处可见和可访问。
继承：使用extends关键字，一个类可以继承另一个类的属性和方法。
实例化：使用new关键字可以创建类的实例。

三、TypeScript进阶

高级类型

联合类型 |
交叉类型 &
类型断言
- 使用<>语法，将要断言的值放在尖括号里，紧跟着所断言的类型。
- as语法，使用value as Type语法，将要断言的值放在value后，使用as关键字和所断言的类型
类型别名（type）：给类型起别名

泛型

基本定义：

泛型的语法是<>里面写类型参数，一般用T表示
使用时有两种方法指定类型
- 定义要使用的类型
- 通过TS类型推断，自动推导类型
泛型的作用是临时占位，之后通过传来的类型进行推导

class Container<T> {
    value: T;

    constructor(value: T) {
        this.value = value;
    }
}

let container1 = new Container("Hello"); // 类型推断为 string
let container2 = new Container(42);      // 类型推断为 number

基础操作符：

typeof：获取类型
keyof：获取所有键
in：遍历枚举类型
T[K]：索引访问
extends：泛型约束

例子：

function length<T extends { length: number }>(obj: T): number {
    return obj.length;
}
let arrayLength = length([1, 2, 3]);   // 类型满足约束
let stringLength = length("Hello");    // 类型满足约束

常用工具类型

Partia<T>:将类型属性变为可选
Required<T>:将类型属性变为必选
Readonly<T>:将类型属性变为只读
Pick、Record...

四、TypeScript实战

声明文件

declare：三方库需要类型声明文件
.d.ts：声明文件定义
@types：三方库TS类型包
tsconfig.json：定义TS配置

泛型约束后端接口类型

在TS中，使用泛型约束可以限制泛型参数的类型范围，确保它满足特定条件。当使用泛型来描述后端接口的返回数据类型时，可以使用泛型约束来确保返回的数据类型符合预期。

interface ApiResponse<T> {
    status: number;
    message: string;
    data: T; // 泛型参数 T 表示数据的类型
}

type UserInfo = {
    id: number;
    name: string;
    email: string;
};

function getUserInfo(): ApiResponse<UserInfo> {
    return {
        status: 200,
        message: "Success",
        data: {
            id: 001,
            name: "Rianna",
            email: "rianna@email.com"
        }
    };
}

const response = getUserInfo();
if (response.status === 200) {
    const userInfo: UserInfo = response.data;
    console.log(`User ID: ${userInfo.id}, Name: ${userInfo.name}`);
} else {
    console.log(`Error: ${response.message}`);
}

讲解：在上述示例中，ApiResponse<T> 是一个泛型接口，它用于表示后端接口的返回数据。T 是一个类型参数，用于约束 data 属性的数据类型。通过使用 ApiResponse<UserInfo>，我们确保了后端接口返回的数据包含了 id 和 name 属性，符合 UserInfo 类型的定义。

TypeScript学习笔记|青训营