当前位置：首页 > news >正文

TypeScript 类型系统 ------公司项目实战 + 面试通关指南

news 2025/11/5 9:20:21

本文目标：看完能写公司代码 + 回答常见面试问题

适合： - Vue3 / React / Node 项目开发\

中级前端晋升 / 面试准备\
刚转 TypeScript 的同学

一、基础类型与推断（写项目 80% 场景）

let name = 'Tom'
let age = 20
let isLogin = false

二、对象类型 ------业务模型必须写

interface User {id: stringname: stringage?: numberisAdmin: boolean
}

三、接口 & 类型别名（type)

在这里插入图片描述

interface ApiUser {id: stringname: string
}type UserRole = 'admin' | 'user' | 'tester'
//在定义一个类型，叫 UserRole
//这个类型的值 只能 是 'admin' 、'user' 或 'tester' 三个字符串之一，取其它值都会报错。
使用：let role: UserRole = 'admin'

四、函数类型

function getUser(id: string): ApiUser {return { id, name: 'Tom' }
}
type Fetcher = (url: string) => Promise<any>

id: string → 这个函数的参数 id 必须是 string
ApiUser → 这个函数返回值必须符合 ApiUser 类型

五、泛型 ------后端接口必备

interface ApiResponse<T> {code: numberdata: Tmessage?: string
}

六、联合类型 & 字面量类型

type ButtonType = 'primary' | 'danger' | 'default'

七、工具类型 ------业务最常用

类型作用

Partial<T> 全部变可选
Required<T> 全部变必需
Pick<T,K> 挑字段
Omit<T,K> 去字段
Readonly<T> 只读
Record<K,T> 字典类型

八、keyof

keyof 是 TS 操作符，作用是获取某个类型的所有「属性名」，返回这些属性名组成的联合类型，核心用于「限制访问对象的属性只能是其自身存在的键」，避免错写属性名。

核心用法（2 句话懂）
语法：keyof 类型 → 得到该类型所有属性名的联合；
场景：配合泛型约束，限制函数 / 变量只能使用对象已有的属性名。

// 1. 定义对象类型
interface User { id: number; name: string; age: number }// 2. keyof User → 得到属性名联合：'id' | 'name' | 'age'
type UserKeys = keyof User; // 3. 配合泛型约束：只能访问 User 存在的属性
function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {return obj[key]; // 不会错写属性名，TS 自动提示可选键
}// 用法（正确）
const user = { id: 1, name: "张三", age: 20 };
getProp(user, "name"); // 正确，有提示
getProp(user, "age");  // 正确// 用法（错误）
// getProp(user, "gender"); // 报错：gender 不是 User 的属性