TS基础篇

1.TS数据类型

1.1 基础类型：

类型	写法	代码示例
`string`	字符串	`const name: string = '张三'`
`number`	数字	`const age: number = 20`
`boolean`	布尔值	`const isShow: boolean = true`
`null`	空值	`const empty: null = null`
`undefined`	未定义	`const unde: undefined = undefined`
`symbol`	唯一标识	较少使用
`bigint`	大整数	较少使用

补充：any 、unknown、never

TypeScript 复制代码

// 基础类型
const name = '张三'      // TS 自动推断为 string
const age = 20           // 自动推断为 number
let flag = false         // 自动推断为 boolean

// 需要显式写的场景
let count: number        // 先声明后赋值
count = 0

let title: string = ''   // 初始空字符串，明确类型

//any、unknown、never
// any：任意类型（尽量少用，失去TS意义）
let a: any = 1
a = 'hello'   // 不报错

// unknown：安全的 any，使用前必须类型断言
let b: unknown = 'hello'
// console.log(b.toUpperCase())  // ❌ 报错
console.log((b as string).toUpperCase())  // ✅

// never：永远不会发生的值（用于穷尽检查）
function fn(x: string | number) {
  if (typeof x === 'string') { ... }
  else if (typeof x === 'number') { ... }
  else {
    const _check: never = x   // 如果上面漏了类型，这里会报错
  }
}

1.2数组类型

TypeScript 复制代码

// 方式1：类型[]
const list1: string[] = ['a', 'b', 'c']

// 方式2：Array<泛型>（推荐这种，尤其复杂类型）
const list2: Array<number> = [1, 2, 3]

// 实际开发：对象数组（最常见）
interface User {
  name: string
  age: number
}
const userList: User[] = [
  { name: '张三', age: 20 },
  { name: '李四', age: 22 }
]

// 二维数组
const tableData: User[][] = [[user1, user2], [user3, user4]]

1.3联合类型

TypeScript 复制代码

// 方式1：接口（最常用）
interface User {
  name: string
  age: number
  email?: string        // ? 表示可选
  readonly id: string   // 只读
}

const user: User = {
  name: '张三',
  age: 20,
  id: '001'
}

// 方式2：type 类型别名
type Person = {
  name: string
  age: number
}

// 接口 vs type：实际开发优先用 interface，需要联合类型时用 type
type Status = 'success' | 'error' | 'loading'   // 联合类型，只能用 type

1.4函数类型

TypeScript 复制代码

// 方式1：接口定义函数
interface Fn {
  (a: number, b: number): number
}

const add: Fn = (a, b) => a + b

// 方式2：直接写（最常用）
function add(a: number, b: number): number {
  return a + b
}

// 箭头函数
const add = (a: number, b: number): number => a + b

// 无返回值
function log(msg: string): void {
  console.log(msg)
}

// 可选参数
function greet(name: string, age?: number): string {
  return age ? `${name}今年${age}岁` : name
}

// 默认参数
function fn(a: number = 10): void { }

// 剩余参数
function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0)
}

1.5联合类型 & 交叉类型

TypeScript 复制代码

// 联合类型：或（|）
type Status = 'success' | 'error' | 'loading'
type NumOrStr = number | string

let status: Status = 'success'
let value: NumOrStr = 100   // 或 '100'

// 实际开发：Element Plus 按钮类型
type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info'

// 交叉类型：与（&），合并多个类型
type A = { name: string }
type B = { age: number }
type C = A & B   // { name: string; age: number }

const person: C = { name: '张三', age: 20 }

1.6泛型（常用）

场景	写法	记忆要点
函数需要处理多种类型	`function fn<T>(x: T): T`	将类型作为参数传递
接口字段类型不确定	`interface Api<T> { data: T }`	封装动态数据结构
类需要通用数据处理	`class Cache<T>`	实现组件工具通用化
限制泛型范围	`T extends 约束条件`	添加类型约束
操作对象属性	`K extends keyof T`	使用键名集合

TypeScript 复制代码

// 基础泛型：函数
function identity<T>(arg: T): T {
  return arg
}
identity<string>('hello')   // T 被推断为 string
identity(100)               // T 被推断为 number

// 实际开发：封装请求（最常用）
interface ApiResponse<T> {
  code: number
  data: T
  msg: string
}

// 登录接口
interface LoginData {
  token: string
  userInfo: { name: string; id: number }
}

async function request<T>(url: string): Promise<T> {
  const res = await fetch(url)
  return res.json()
}

// 使用：自动推断 data 是 LoginData
const res = await request<ApiResponse<LoginData>>('/api/login')

// 泛型约束
function getLength<T extends { length: number }>(arg: T): number {
  return arg.length
}
getLength('hello')    // ✅
getLength([1,2,3])    // ✅
// getLength(123)     // ❌ number 没有 length

2.TS类介绍

2.1常见关键字

（1）访问修饰符（控制属性和方法的可见性）

关键字	作用	访问范围
`public`	公开（类成员默认修饰符）	类内部、子类、类外部均可访问
`private`	私有	仅限当前类内部访问
`protected`	受保护	类内部及其子类可访问，外部不可访问
`readonly`	只读	仅允许声明时或构造函数中初始化，后续不可修改

TypeScript 复制代码

class Person {
  public name: string;       // 公开，哪里都能访问
  private age: number;       // 私有，只能在类内部用
  protected id: string;      // 受保护，子类可以继承访问
  readonly gender: string;   // 只读，赋值后不能改

  constructor(name: string, age: number, id: string, gender: string) {
    this.name = name;
    this.age = age;
    this.id = id;
    this.gender = gender;
  }

  public sayHello(): void {
    console.log(`我叫${this.name}，${this.age}岁`);  // ✅ private 在内部可以访问
  }

  private secret(): void {
    console.log("这是私有方法");
  }
}

class Student extends Person {
  getInfo(): void {
    console.log(this.name);     // ✅ public，可以
    console.log(this.id);       // ✅ protected，子类可以
    // console.log(this.age);   // ❌ private，子类不能访问
    // this.secret();           // ❌ private，不能调用
  }
}

const p = new Person("张三", 20, "001", "男");
console.log(p.name);      // ✅ public
// console.log(p.age);    // ❌ private，报错
// console.log(p.id);     // ❌ protected，报错
// p.gender = "女";       // ❌ readonly，报错

（2）静态关键字抽象类和抽象方法

`2.2static` 关键字

静态成员属于类而非实例，可直接通过类名调用。

TypeScript 复制代码

class MathUtil {
  static PI: number = 3.14159;

  static add(a: number, b: number): number {
    return a + b;
  }
}

// 直接通过类名调用，不需要 new
console.log(MathUtil.PI);        // 3.14159
console.log(MathUtil.add(1, 2)); // 3

// ❌ 不能通过实例访问
// const m = new MathUtil();
// m.PI  // 报错

`2.3 abstract` 关键字

抽象类不能实例化，抽象方法需子类实现，用于定义规范。

TypeScript 复制代码

// 抽象类 = 模板，不能 new
abstract class Animal {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }

  // 普通方法
  move(): void {
    console.log(`${this.name}在移动`);
  }

  // 抽象方法 = 只有声明，没有实现，子类必须重写
  abstract makeSound(): void;
}

// ❌ 不能直接实例化抽象类
// const a = new Animal("动物"); // 报错！

// 子类必须实现抽象方法
class Dog extends Animal {
  makeSound(): void {
    console.log("汪汪汪！");
  }
}

const dog = new Dog("大黄");
dog.move();       // 大黄在移动
dog.makeSound();  // 汪汪汪！

抽象类可以包含抽象方法和非抽象方法。
子类必须实现所有抽象方法，否则子类也需声明为抽象类。

关键字	作用	适用场景
`static`	类级别成员，独立于实例	工具类方法、全局配置
`abstract`	定义未实现的规范，强制子类完成逻辑	模板方法设计、多态行为约束

关键字	作用	示例
`implements`	类实现接口，必须包含接口定义的所有成员	`class Car implements Vehicle`
`extends`	类继承另一个类，获得父类的属性和方法	`class ElectricCar extends Car`
`super`	调用父类的构造函数或方法	`super(parameters)`
`get`/`set`	定义属性的存取器	`get price() { return this._price }`

速记

public → 公开的，谁都能用（默认）

private → 私有的，只有自己能用

protected → 受保护的，自己和儿子能用

readonly → 只读的，赋值后不能改

static → 静态的，不用 new 直接用类名调

abstract → 抽象的，只能被继承，不能 new

implements → 类实现接口，必须全部兑现

extends → 继承父类，获得父类的一切

super → 调用爸爸的东西

get/set → 属性的读写钩子

3.TS常用的工具类型

工具类型	应用场景
`Partial<T>`	表单编辑时允许部分字段可选
`Required<T>`	接口参数要求所有字段必填
`Pick<T, K>`	仅需提取对象的特定字段
`Omit<T, K>`	移除对象的敏感字段后传输
`Exclude<T, U>`	排除某些类型选项
`ReturnType<T>`	自动推导函数返回值类型

TypeScript 复制代码

interface User {
  id: string;
  name: string;
  age: number;
}

type A = Partial<User>;
type B = Required<User>;
type C = Pick<User, 'name' | 'age'>;
type D = Omit<User, 'id'>;
type E = Exclude<'a' | 'b' | 'c', 'a'>;



//
function createFan() {
  return {
    id: 'F' + Date.now(),
    name: '风机' + Math.random(),
    status: 'running' as const,
    data: { power: 0, speed: 0 }
  };
}

// 自动推断返回值类型，不用手写
type Fan = ReturnType<typeof createFan>;
// = {
//   id: string;
//   name: string;
//   status: 'running';
//   data: { power: number; speed: number; };
// }

// 用在其他地方
const fanList: Fan[] = [];

TS常见关键字

关键字	作用	示例
`as`	类型断言	`value as string`
`as const`	常量断言	`['a'] as const`
`interface`	定义对象结构	`interface User { name: string }`
`type`	定义类型别名	`type ID = string`
`class`	定义类	`class Point {}`
`extends`	继承/扩展	`interface A extends B`
`implements`	类实现接口	`class A implements B`
`enum`	枚举	`enum Status { ON, OFF }`
`readonly`	只读属性	`readonly id: string`
`abstract`	抽象类/方法	`abstract class Animal`
`public/private/protected`	访问修饰符	`private name: string`
`static`	静态属性/方法	`static count = 0`
`generic` (`<T>`)	泛型	`function fn<T>(x: T)`
`keyof`	取类型的键	`keyof User`
`typeof`	取变量类型	`typeof window`
`in`	遍历联合类型	`[K in keyof T]`
`infer`	类型推断	`ReturnType<T>` 内部使用
`is`	自定义类型守卫	`function isString(x): x is string`
`satisfies`	约束但不拓宽类型	`config satisfies Config`
`declare`	声明类型	`declare module 'xxx'`
`namespace`	命名空间	`namespace Utils {}`
`module`	模块	`module A {}`

1.TS数据类型

1.1 基础类型：

补充：any 、unknown、never

1.2数组类型

1.3联合类型

1.4函数类型

1.5联合类型 & 交叉类型

1.6泛型（常用）

2.TS类介绍

2.1常见关键字

（1）访问修饰符（控制属性和方法的可见性）

（2）静态关键字抽象类和抽象方法

2.2static 关键字

2.3 abstract 关键字

速记

3.TS常用的工具类型

TS常见关键字

`2.2static` 关键字

`2.3 abstract` 关键字