TypeScript 作为 JavaScript 超集，提供静态类型检查以提升代码质量。本文涵盖基础概念如 any/unknown/never 区别，中级特性包括联合类型、泛型及 interface 与 type 对比，高级部分涉及工具类型映射与条件类型。同时解析 tsconfig 配置要点及在 React/Vue 中的实践应用，帮助开发者应对大厂面试中的类型安全与工程化考察。
TypeScript（TS）已成为现代前端开发的标配，尤其在 React、Vue、Angular 等框架中，几乎是大厂必考点。2026 年面试趋势：更注重类型安全、高级类型工具、实际项目应用和 tsconfig 配置。以下精选 20+ 高频题（基于最新大厂真题汇总），分为基础、中级、高级，并附详细解答和代码示例。
TypeScript 是 JavaScript 的超集（superset），由 Microsoft 开发，最终编译成纯 JS 运行。 ：
| 类型 | 描述 | 使用场景 | 安全性 |
|---|---|---|---|
| any | 任意类型，关闭类型检查 | 迁移旧 JS 项目、临时绕过 | 低（不推荐） |
| unknown | 未知类型，必须先类型收窄 | API 返回不确定类型 | 高（推荐） |
| never | 永不存在的值（如抛错函数） | 类型推断的底部类型 | - |
示例：
let val: unknown = 'hello';
if (typeof val === 'string') {
// 类型收窄
console.log(val.toUpperCase());
}
原始类型：boolean、number、string、null、undefined、symbol、bigint、void。
对象类型：object、array、tuple（元组）、enum（枚举）。
特殊类型：any、unknown、never。
示例：
let isDone: boolean = false;
let num: number = 6;
let str: string = 'hello';
let list: number[] = [1, 2, 3]; // 或 Array<number>
let tuple: [string, number] = ['hello', 10]; // 元组
string | number → 值可以是其中一种。TypeA & TypeB → 值必须同时满足两种类型（对象合并）。typeof 检查原始类型instanceof 检查实例in 检查属性示例：
function padLeft(value: string, padding: string | number) {
if (typeof padding === 'number') {
return Array(padding + 1).join(' ') + value; // padding 被收窄为 number
}
return padding + value;
}
示例：
type A = { a: string };
type B = { b: number };
type C = A & B; // { a: string; b: number }
泛型允许创建可复用组件，支持类型参数化。 示例：
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>('hello'); // T 推断为 string
场景：数组工具、Promise、React 组件 props、Vue defineProps 等。
| 特性 | interface | type |
|---|---|---|
| 定义对象 | 是（主要用途） | 是 |
| 支持扩展（extends） | 是 | 是（用 & 交叉类型） |
| 支持声明合并 | 是（同名接口自动合并） | 否 |
| 可定义联合/元组 | 否 | 是 |
| 可定义原始类型别名 | 否 | 是 |
推荐：对象/接口用 interface（支持合并，便于扩展）；联合、映射、工具类型用 type。
示例：
interface User {
name: string;
}
interface User {
age?: number;
} // 自动合并
type ID = string | number;
Partial<T>：所有属性可选Required<T>：所有属性必选Readonly<T>：所有属性只读Pick<T, K>：挑选属性Omit<T, K>：排除属性Record<K, T>：键为 K，值为 T 的对象Exclude<T, U> / Extract<T, U>：联合类型排除/提取target：编译目标（如 es2020）module：模块系统（如 esnext/commonjs）strict：开启所有严格检查（强烈推荐）noImplicitAny：隐式 any 报错strictNullChecks：null/undefined 严格检查esModuleInterop：更好导入 commonjs 模块skipLibCheck：跳过库类型检查（加速编译）通过 [K in keyof T] 遍历键创建新类型。
示例：
type Optional<T> = {
[P in keyof T]?: T[P]
}; // 等价于 Partial<T>
T extends U ? X : Y
示例：
type IsString<T> = T extends string ? 'yes' : 'no';
type Test1 = IsString<'hello'>; // 'yes'
示例：
type User = {
name: string;
age: number;
};
type PartialUser = Partial<User>; // { name?: string; age?: number }
.tsx，定义 props 类型（interface 或 type），useState()。<script setup lang="ts">，defineProps()。declare module '库名'; 或安装 @types/库名（DefinitelyTyped）。any 断言，但不推荐。这些题覆盖了 95% 以上的大厂考察点，背熟 + 理解原理，TS 面试稳过！
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online