🍀使用 DeepSeek 学习了 Typescript

boolean 、number、string

基本使用

js 复制代码

function add (n1: number, n2: number) {
    return n1 + n2
}
console.log(add(12, 12)) // 24
console.log(add('12', 12)) // 报错

js 复制代码

// 手动映射类型
const isTrue: boolean = true

// 自动映射类型
let isFalse = false
isFalse = "false" // 报错

js 复制代码

const str: string = "字符串"

array 和 tuple

array 数组

js 复制代码

let list1: number[] = [1, 2, 3, 4, 5]
let list2: Array<number> = [1, 2, 3, 4, 5] // 泛型
let list3: String[] = ['1', '2', '3', '4', '5']
let list4: any[] = [1, "str", true] // 存放任意类型

数组除了可以存放基本数据类型外，还能存放自定义类型。

js 复制代码

interface Address {
    city: string;
    zipCode: string;
}

interface User {
    id: number;
    name: string;
    address: Address;
}

let users: User[] = [
    { id: 1, name: 'Alice', address: { city: 'New Uork', zipCode: '10001' } },
    { id: 2, name: 'Bob', address: { city: 'Los Angeles', zipCode: '90001' } }
]

tuple 元组

元组是一种特殊的数组，它允许你定义一个固定长度 和固定类型的数组。元组中的每个位置可以有不同的类型。

js 复制代码

let tuple: [string, number, boolean] = ["Alice", 25, true]

tuple[0] = 1 // 报错
tuple[3] = 3 // 报错

TypeScript 4.0 引入了可选元素，可以用 ? 表示某个位置是可选的

js 复制代码

let optionalTuple: [string, number?] = ['Alice']
optionalTuple = ['Bob', 30] // 合法

元组可以使用剩余元素（rest elements）来表示可变长度的部分。

js 复制代码

let restTuple: [string, ...number[]] = ['Alice', 1, 2, 3] // 合法
let restTuple: [string, ...number[]] = ['Alice', 1, 2, '3'] // 不合法

数组和元组对比

特性	元组（Tuple）	数组（Array）
长度	固定长度	动态长度
元素类型	每个位置可以有不同的类型	所有元素必须是相同类型
使用场景	表示固定结构的数据（如键值对）	表示同类型数据的集合
灵活性	灵活性较低，长度和类型固定	灵活性较高，长度和内容可变
示例	`let tuple: [string, number]`	`let array: number[]`

使用场景

元组的使用场景

表示固定结构的数据，例如：
- 键值对：[string, number]
- 返回多个值的函数：function getUser(): [string, number] { return ['Alice', 25] }
- 表示 CSV 数据：let csvRow: [string, number, boolean] = ['Alice', 25, true]

数组的使用场景

表示同类型数据的集合，例如：
- 数字列表：let numbers: number[] = [1, 2, 3]
- 字符串列表：let names: string[] = ['Alice', 'Bob', 'Charlie']

union 和 Literal

union 联合

联合类型允许一个变量具有多种可能的类型。使用 | 符号将多个类型组合在一起。

js 复制代码

let union1: string | number | string[];
union1 = "字符串";
union1 = 1;
union1 = ["1", "2"];
union1 = [1, 2, 3]; // 报错
union1 = true; // 报错

function add(n1: number | String, n2: number | String) {
   if(typeof n1 === "string" && typeof n1 === "string") {
        return n1.toString() + n2.toString();
   }else {
       return n1 + n2;
   }
}
console.log(add(1, 2)); // 3
console.log(add("hello", "TypeScript")); // helloTypeScript

// 指定值
let union2: 0 | 1 | 2 | 3; // 确认了类型及值
union2 = 0; 
union2 = 4; // 报错
union2 = "3"; // 报错

Literal 字面量

字面量类型允许你将变量的值限制为特定的字面量值（如具体的字符串、数字或布尔值）。

js 复制代码

// 指定值 
let union2: 0 | 1 | 2 | 3; // 确认了类型及值 
union2 = 0; 
union2 = 4; // 报错 
union2 = "3"; // 报错

js 复制代码

// Literal 字面量类型
let literal: 1 | "2" | true | [1, 2, 3, 4]
// 结合 联合类型 和 字面量类型
function add(n1: number | String, n2: number | String, resultType: "as-number" | "as-string") {
   if(resultType === "as-string") {
        return n1.toString() + n2.toString();
   }
   if(typeof n1 === "string" && typeof n1 === "string") {
        return n1.toString() + n2.toString();
   }else {
       return n1 + n2;
   }
}
console.log(add(1, 2, "as-number")); // 3
console.log(add(1, 2, "as-string")); // 12
console.log(add("hello", "TypeScript", "as-string")); // helloTypeScript

联合和数组对比

特性	联合类型（Union Types）	字面量类型（Literal Types）
定义方式	使用 \| 组合多个类型	使用具体的字面量值（如 `"left"`）
值的范围	可以是多种类型（如 `string	number`）
灵活性	更灵活，允许多种类型	更严格，限制为特定的值
使用场景	变量可能具有多种类型时	变量只能是有限的几个特定值时

使用场景

union 联合使用场景

当一个变量可能具有多种类型时。
处理函数参数或返回值时，允许传入或返回多种类型。

Literal 字面量使用场景

当变量的值只能是有限的几个特定值时。
用于增强代码的可读性和类型安全性

enum

枚举是一种用于表示有限集合的命名常量的数据类型，它将一组相关的可能值逐一列举并命名，增强代码的可读性和安全性。

基本使用

js 复制代码

enum Color1 {
    red,
    green,
    blue,
}
let color = Color1.blue
console.log(color); // 2 （下标）

enum Color2 {
    red = 5,
    green,
    blue,
}
let color = Color2.blue
console.log(color); // 7 （下标）

enum Color1 {
    red = "5",
    green = 7,
    blue = "blue",
}
let color = Color3.blue
console.log(color); // blue 
console.log(Color3.green); // 7

使用场景

限定取值范围‌ 用于函数参数或变量，强制使用预定义值，避免无效输入

js 复制代码

enum Direction {
   Up: 1,
   Top: 2,
   Left: 3,
   Right: 4
}
function handleDirection(direction: Direction) {
  if (direction === Direction.Up) { /* ... */ }
}

提升代码可读性‌ 用命名常量替代魔法数字或字符串

js 复制代码

type Direction = 1 | 2 | 3 | 4

// 使用 enum 替换
enum Direction {
   Up: 1,
   Top: 2,
   Left: 3,
   Right: 4
}

泛型

泛型允许你在定义函数、类或接口时不指定具体类型，而是在使用时再指定。这样可以使代码更通用，同时保持类型安全。

可以传入任意类型，并且可以当作如何类型来使用

js 复制代码

interface User {
  name: string;
  age: number
}
function fn<T>(arg: Array<T>) {}
const u = fn<User>([{ name: 'xxx', age: 18 }])

泛型的扩展

js 复制代码

interface F2 {
  length: number
}

function fn<T extends F2>(arg: T) {
  console.log(arg.length) // 类型不报错
}

定义在函数中

js 复制代码

function fn<T>(arg: T): T {
  return arg
}

const x = fn<number>(100)


function fn1<T, U>(a: T, b: U) {
  console.log(a, b)
}
fn1<string, number>('x', 123)

定义在 class

js 复制代码

class SomeClass<T> {
  name: T
  constructor（name: T） {
    this.name = name
  }
  getName(): T {
    return this.name
  }
}
const s1 = new SomeClass<string>('xx')
const s2 = new SomeClass<number>(100)

定义在 type

js 复制代码

function fn<T>(arg: T): T { return arg }
const myFn: <U>(arg: U) => U = fn

定义在 interface

js 复制代码

const list: Array<string> = ['x']

function fn<T>(arg: T): T {
  return arg
}

inface F1<T> {
  (arg: T): T
}

const fn1: F1<string> = fn