深入浅出 TypeScript-学习笔记 | 豆包MarsCode AI刷题

73 阅读3分钟

TS是由微软开发的编程语言,本质上是为JS语言增加的一些静态类型和面向类的一些面向编程相关能力。

TypeScript vs JavaScript

TS类型是一个强类型的,支持动态和静态类型的一个检测,可以结合一些工具在编译过程中可以发现一些错误;JS是弱类型的语言。

总的来说TS是JS的一个扩展,同时TS也能编译成JS运行,TS可以在编译环节就可以发现一些问题,支持静态代码检测,支持后端语言中的一些相关特性。

TS基础

1.boolean、number、string

2.枚举enum

3.any、unknown、void

4.never:更多的会在防御式编程中使用

5.数组类型[]

6.元组类型tuple

函数类型

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

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

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

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

TS进阶-泛型-基本使用

基本定义:

1.泛型的语法是<>里面写类型参数,一般用T表示;

2.使用时有两种方法指定类型:

1.定义要使用的类型
2.通过TS类型推断,自动推导类型

3.泛型的作用是临时占位,之后通过传来的类型进行推导;

泛型的使用方法和场景:
1. 函数中的泛型

泛型常用于函数,帮助处理多种数据类型。例如:

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

console.log(identity(42)); // number
console.log(identity('hello')); // string

通过<T>,我们定义了一个通用的类型参数,T代表任意类型,函数返回值的类型与输入参数的类型一致。

2. 类中的泛型

在类中使用泛型可以使类能够处理不同类型的数据:

typescript
class Box<T> {
  private value: T;
  
  constructor(value: T) {
    this.value = value;
  }

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

const numberBox = new Box(10);
console.log(numberBox.getValue()); // number

const stringBox = new Box('hello');
console.log(stringBox.getValue()); // string

Box<T>是一个泛型类,它能容纳任何类型的值,并且getValue返回与传入值相同类型的值。

3. 接口中的泛型

在接口中使用泛型可以使接口具有灵活性:

typescript
interface Pair<T, U> {
  first: T;
  second: U;
}

const pair: Pair<string, number> = { first: 'hello', second: 42 };

这里定义了一个Pair接口,它包含两个泛型参数TU,分别表示两个属性的类型。

4. 泛型约束

泛型约束可以确保泛型类型具备特定的属性或方法,从而提高代码的类型安全性。

typescript
interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(item: T): void {
  console.log(item.length);
}

logLength([1, 2, 3]); // 数组有length属性
logLength('hello'); // 字符串有length属性
// logLength(42); // 错误: number没有length属性

T extends Lengthwise是一个约束,确保传入的类型T包含length属性。

5. 联合类型与泛型

泛型可以与联合类型结合使用,提供更灵活的类型选择:

typescript
function wrap<T>(value: T): T | null {
  return value ? value : null;
}

console.log(wrap('hello')); // 'hello'
console.log(wrap(42)); // 42
console.log(wrap(null)); // null

这个例子中,wrap函数可以接受任何类型的值,并返回该值或null,通过使用T | null联合类型,使得返回类型既能满足原类型也能处理null

6. 使用泛型约束提高安全性

我们可以为泛型类型定义更严格的约束,以确保类型的正确性:

typescript
class DataStore<T extends string | number> {
  private data: T[] = [];

  add(item: T): void {
    this.data.push(item);
  }

  getAll(): T[] {
    return this.data;
  }
}

const store = new DataStore<number>();
store.add(1);
store.add(2);
console.log(store.getAll()); // [1, 2]

// const invalidStore = new DataStore<boolean>(); // 错误: boolean不符合约束

T extends string | number确保DataStore只能存储stringnumber类型的数据,提高了代码的灵活性和安全性。

总结

通过泛型,TypeScript能在提供灵活性的同时,保持类型的严格检查。泛型约束进一步增强了代码的安全性,确保了类型的正确性。通过合理使用泛型,代码不仅能适应多种类型的变化,还能避免潜在的类型错误。