TS

94 阅读3分钟

ts中的函数重载

函数重载允许我们定义多个具有相同的名称但不同参数类型或数量的函数定义。当调用这个函数的时候,会根据传入参数的类型和数量来自动匹配正确的函数定义。

function reverse(x: string): string;
function reverse(x: number): number;
function reverse(x: string | number): string | number {
    if (typeof x === 'string') {
        return x.split('').reverse().join('');
    } else if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    }
}

// 测试函数重载
console.log(reverse('hello')); // 输出:'olleh'
console.log(reverse(12345)); // 输出:54321

ts中泛型

通过泛型,我们在定义函数,类或者接口时不指定具体的类型,而是在使用时动态指定类型。

// 使用泛型的函数示例
function identity<T>(arg: T): T {
    return arg;
}
//`<T>` 表示这是一个泛型函数,其中 `T` 是一个类型参数,一个占位符,表示该函数可以接受任意类型的参数
//`arg: T` 则表示函数接受一个参数 `arg`,该参数的类型为 `T`,即和函数调用时传入的实际参数类型相对应
//`: T` 则表示函数的返回类型也为 `T`,即函数会返回和参数类型相同的值

// 使用泛型的类示例
class GenericClass<T> {
    value: T;

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

    getValue(): T {
        return this.value;
    }
}

// 使用泛型的接口示例
interface Pair<T, U> {
    first: T,
    second: U
}

// 使用泛型的函数示例
let output1 = identity<string>('hello');
console.log(output1); // 输出:'hello'

let output2 = identity<number>(123);
console.log(output2); // 输出:123

// 使用泛型的类示例
let myGenericClass = new GenericClass<number>(100);
console.log(myGenericClass.getValue()); // 输出:100

// 使用泛型的接口示例
let pair: Pair<string, number> = { first: 'one', second: 1 };
console.log(pair.first); // 输出:'one'
console.log(pair.second); // 输出:1

ts中的接口(Interfaces)

接口(Interfaces)用于描述对象的结构,定义对象应该包含的属性和方法。强制代码必须符合特定的结构,确保类型的一致性。

// 定义一个接口描述一个用户对象的结构
interface User {
    id: number;
    name: string;
    age: number;
}

// 使用接口定义一个函数参数
function printUserInfo(user: User) {
    console.log(`ID: ${user.id}, Name: ${user.name}, Age: ${user.age}`);
}

// 使用接口定义一个对象
let currentUser: User = {
    id: 1,
    name: 'Alice',
    age: 30
};

printUserInfo(currentUser);

ts中的类型别名(type)和联合类型

类型别名(type)允许我们为现有的类型定义一个新的名称,不仅仅限制于对象,也可以适用于联合类型,元组以及任何其他类型。

type Name = string;
type ID = number;
type User = {
    id: ID;
    name: Name;
};

let userInfo: User = { id: 1, name: 'Alice' };

联合类型允许一个变量可以存储多种类型值中的一种。通过使用 | 符号,将多个类型组合成一个联合类型

type Status = 'success' | 'error';

function getStatusMessage(status: Status): string {
    return status === 'success' ? 'Operation successful' : 'Operation failed';
}

console.log(getStatusMessage('success')); // 输出:'Operation successful'
console.log(getStatusMessage('error')); // 输出:'Operation failed'

ts中的接口(interface)和类型别名(type)的区别

接口:

  • 接口支持拓展多个接口,可以多次声明同一个接口,并将他们合并为一个。
  • 主要用于定义对象的形状
  • 可以通过extends关键字继承其他接口 类型别名:
  • 不能通过声明合并来拓展。可以使用交叉类型(&)来实现类型的功能。
interface Dog {
    name: string;
    bark(): void;
}

interface Cat {
    name: string;
    meow(): void;
}

type Pet = Dog & Cat;

const myPet: Pet = {
    name: 'Tom',
    bark() {
        console.log('Woof! Woof!');
    },
    meow() {
        console.log('Meow! Meow!');
    }
};

myPet.bark(); // 输出:'Woof! Woof!'
myPet.meow(); // 输出:'Meow! Meow!'