前端高频面试题：TypeScript 基础与进阶

前端高频面试题：TypeScript 基础与进阶 | 极客日志

// 1. 定义泛型函数：获取数组第一个元素
function getFirstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}
// 2. 使用时传入具体类型（或 TS 自动推断）
const strArr: string[] = ["a", "b"];
const firstStr = getFirstElement(strArr); // TS 推断 T 为 string，返回值类型为 string | undefined
const numArr: number[] = [1, 2];
const firstNum = getFirstElement(numArr); // 显式指定 T 为 number

类型断言定义：当 TS 无法自动推断变量类型时，开发者明确告知 TS'该变量的实际类型'，强制 TS 按指定类型处理（仅编译阶段生效，不影响运行时）。

两种常用方式：

尖括号语法（不支持 JSX 场景，易与 JSX 标签冲突）：

const input = document.getElementById("username") as HTMLInputElement;

as 语法（推荐，支持所有场景，如 JSX）：

// 例子：获取 DOM 元素（TS 无法确定元素类型，需断言为 HTMLInputElement）
const input = document.getElementById("username") as HTMLInputElement;
input.value = "test"; // 断言后可安全调用 input 元素的 value 属性

使用注意事项：
1. 不能断言'完全无关的类型'（如 let num: number = 123 as string 会报错），仅能断言'兼容的类型'（如 unknown 断言为 string，HTMLElement 断言为 HTMLInputElement）。
2. 避免滥用：优先让 TS 自动推断类型，仅在类型不确定时使用（滥用会抵消 TS 的类型安全优势）。

类型	核心含义	关键特性	实习常用场景
`any`	任意类型（关闭类型检查）	可赋值给任意类型，任意类型可赋值给它；可调用任意方法（无类型校验）	临时兼容旧 JS 代码（不推荐主动使用）
`unknown`	未知类型（安全的 any）	仅能赋值给 `any`/`unknown`；需断言后才能调用方法	接收未知来源的值（如 API 返回数据、用户输入）
`void`	无返回值	仅函数返回值可用；仅 `undefined` 可赋值给它（开启 strictNullChecks 时）	定义无返回值的函数（如 `console.log` 类函数）
`never`	永不存在的类型	不能赋值给任何类型，任何类型也不能赋值给它；无任何属性/方法	定义抛出错误的函数、无限循环函数的返回值

// any：无类型检查，易出错
let anyVal: any = "hello";
anyVal(); // 编译不报错，运行时会报错（字符串不能调用）

// unknown：需断言后使用，更安全
let unknownVal: unknown = "hello";
(unknownVal as string).length; // 断言为 string 后可调用 length

// void：无返回值函数
function logMsg(): void {
  console.log("msg"); // 无 return 或 return undefined
}

// never：永无返回的函数
function infiniteLoop(): never {
  while (true) {} // 无限循环，永远不会返回
}

interface User {
  readonly id: string; // 只读属性
  name: string;
}
const user: User = { id: "123", name: "张三" };
user.name = "李四"; // 正确（非只读属性可修改）
user.id = "456"; // 错误（只读属性不能重新赋值）

interface User {
  name: string; // 必选属性
  age?: number; // 可选属性（可省略）
}
const user1: User = { name: "张三" }; // 正确（age 省略）
const user2: User = { name: "李四", age: 22 }; // 正确（age 存在）

interface User {
  name: string;
  age: number;
}
interface Permission {
  role: string;
  hasEdit: boolean;
}
type UserWithPermission = User & Permission; // 交叉类型：包含 User 和 Permission 的所有属性
const admin: UserWithPermission = {
  name: "张三",
  age: 22,
  role: "admin",
  hasEdit: true,
}; // 正确（需包含所有属性）

type ID = string | number; // 联合类型：ID 是 string 或 number
// 函数参数支持 ID 类型
function getUserById(id: ID): void {
  if (typeof id === "string") {
    console.log("字符串 ID：", id);
  } else {
    console.log("数字 ID：", id);
  }
}
getUserById("123"); // 正确
getUserById(456); // 正确

interface User { id: string; name: string; }
// 自定义守卫：判断是否为 User 类型
function isUser(data: unknown): data is User {
  return (
    typeof data === "object" &&
    data !== null &&
    "id" in data &&
    "name" in data &&
    typeof (data as User).id === "string"
  );
}
const apiData: unknown = { id: "123", name: "张三" };
if (isUser(apiData)) {
  console.log(apiData.name); // TS 推断 apiData 为 User
}

interface Dog { bark: () => void; }
interface Cat { meow: () => void; }
function makeSound(animal: Dog | Cat): void {
  if ("bark" in animal) {
    animal.bark(); // TS 推断 animal 为 Dog
  } else {
    animal.meow(); // TS 推断 animal 为 Cat
  }
}

type ArrOrObj = number[] | { value: number };
function getValue(data: ArrOrObj): number {
  if (data instanceof Array) {
    return data[0]; // TS 推断 data 为 number[]
  } else {
    return data.value; // TS 推断 data 为 { value: number }
  }
}

type StrOrNum = string | number;
function getLength(value: StrOrNum): number {
  if (typeof value === "string") {
    return value.length; // TS 推断 value 为 string（可调用 length）
  } else {
    return value.toString().length; // TS 推断 value 为 number
  }
}

# 1. 执行创建命令，选择 Vue + TypeScript
npm create vite@latest my-vue-ts-project -- --template vue-ts
# 2. 安装依赖并启动
cd my-vue-ts-project
npm install
npm run dev

<template>
  <div>{{ username }} ({{ age }})</div>
  <button @click="updateAge">增加年龄</button>
</template>
<script setup lang="ts">
// 1. 定义 Props 类型（用 defineProps + 泛型）
const props = defineProps<{ 
  username: string; // 必选 Props
  age?: number;     // 可选 Props
}>();

// 2. 定义响应式变量（TS 自动推断类型）
import { ref } from "vue";
const count = ref(0); // TS 推断 count 为 Ref<number>

// 3. 定义函数（指定参数/返回值类型）
function updateAge(): void {
  if (props.age) { // 若 age 存在，+1（TS 自动推断 props.age 为 number）
    console.log(props.age + 1);
  }
}
</script>

// 例子：定义按钮类型（每个值需显式指定字符串）
enum ButtonType {
  PRIMARY = "primary",
  SECONDARY = "secondary",
  DANGER = "danger",
}
// 使用：仅支持通过名称取 value（无反向映射）
function renderButton(type: ButtonType): void {
  console.log(`渲染 ${type} 类型按钮`);
}
renderButton(ButtonType.PRIMARY); // 正确（只能传枚举中的值）
renderButton("normal"); // 错误（非法值，TS 报错）

// 例子：定义订单状态（未指定值时，从 0 开始递增）
enum OrderStatus {
  PENDING,   // 0（默认）
  PAID,      // 1（自动递增）
  SHIPPED,   // 2
  DELIVERED, // 3
}
// 使用：可通过名称取 value，也可通过 value 取名称
const status: OrderStatus = OrderStatus.PAID;
console.log(status);       // 1
console.log(OrderStatus[1]); // "PAID"（数字枚举支持反向映射）

// 1. 安装官方声明文件（优先，大多数库有 @types 包）
// npm install @types/lodash --save-dev

// 2. 若无官方声明文件，手动创建 lodash.d.ts
declare module "lodash" {
  export function debounce(func: (...args: any[]) => void, wait: number): (...args: any[]) => void;
  // 声明需要用到的方法类型
}

// 3. 使用时 TS 可识别类型
import { debounce } from "lodash";
const debouncedFn = debounce(() => console.log("debounce"), 1000);

// utils.js（JS 文件）
export function formatDate(date, format) {
  // 日期格式化逻辑
  return formattedDate;
}

// utils.d.ts（声明文件，与 utils.js 同级）
declare module "./utils" {
  export function formatDate(date: Date | string, format: string): string;
}
// 使用时 TS 可识别类型
import { formatDate } from "./utils";
formatDate(new Date(), "YYYY-MM-DD"); // 正确
formatDate(123, "YYYY-MM-DD");        // 错误（TS 报错，date 需为 Date 或 string）

// 1. 定义 API 返回数据的类型（如用户列表）
interface User {
  id: string;
  name: string;
  age: number;
}

// 2. 定义异步函数：获取用户列表（返回 Promise<User[]>）
function fetchUsers(): Promise<User[]> {
  // fetch 返回 Promise，需通过 .json() 解析为 User[]
  return fetch("https://api.example.com/users")
    .then((response) => {
      if (!response.ok) {
        throw new Error("请求失败"); // 错误处理
      }
      // 解析 JSON 数据，断言为 User[]（告知 TS 数据类型）
      return response.json() as Promise<User[]>;
    })
    .catch((error) => {
      console.error("获取用户失败：", error);
      throw error; // 重新抛出错误，让调用方处理
    });
}

// 3. 用 async/await 调用（TS 自动推断类型）
async function getUsersData(): Promise<void> {
  try {
    const users = await fetchUsers(); // TS 推断 users 为 User[]
    console.log(users[0].name); // 正确（可安全访问 User 的属性）
  } catch (error) {
    console.error("处理错误：", error);
  }
}

// 调用函数
getUsersData();

// 索引签名：key 是 string 类型，value 是 number 类型
interface ScoreMap {
  [key: string]: number;
}
// 正确使用：属性名是 string，值是 number
const userScores: ScoreMap = {
  "张三": 90,
  "李四": 85,
  "王五": 95,
};
// 遍历对象（TS 推断 value 为 number）
for (const username in userScores) {
  const score = userScores[username]; // score 类型为 number
  console.log(`${username}: ${score}`);
}
// 错误：值不是 number（TS 报错）
// userScores["赵六"] = "80"; // 错误（需为 number）

interface UserConfig {
  name: string; // 固定属性
  [key: string]: string | number; // 动态属性（值支持 string 或 number）
}
const config: UserConfig = {
  name: "张三",
  age: 22,      // 动态属性（值为 number，符合约束）
  address: "北京", // 动态属性（值为 string，符合约束）
};

// 1. 定义父类：Animal（抽象类，不能实例化，仅用于继承）
abstract class Animal {
  // protected 属性：仅父类和子类可访问
  protected name: string;
  // 父类构造函数
  constructor(name: string) {
    this.name = name;
  }
  // 抽象方法：父类不实现，子类必须重写（多态的核心）
  abstract makeSound(): void;
  // 普通方法：子类可继承或重写
  eat(): void {
    console.log(`${this.name} 在吃东西`);
  }
}

// 2. 定义子类：Dog（继承 Animal）
class Dog extends Animal {
  // 子类构造函数：必须调用 super()
  constructor(name: string) {
    super(name); // 调用父类构造函数，传入 name
  }
  // 重写父类的抽象方法（多态实现）
  override makeSound(): void {
    console.log(`${this.name} 汪汪叫`);
  }
  // 子类新增方法
  fetch(): void {
    console.log(`${this.name} 在捡球`);
  }
}

// 3. 定义子类：Cat（继承 Animal）
class Cat extends Animal {
  constructor(name: string) {
    super(name);
  }
  // 重写父类的抽象方法（多态实现：与 Dog 不同的逻辑）
  override makeSound(): void {
    console.log(`${this.name} 喵喵叫`);
  }
}

// 4. 使用：多态的体现（同一方法，不同子类有不同行为）
function letAnimalSound(animal: Animal): void {
  animal.makeSound(); // 调用子类重写的方法（Dog 汪汪叫，Cat 喵喵叫）
  animal.eat();       // 调用父类继承的方法
}
const dog = new Dog("旺财");
const cat = new Cat("咪宝");
letAnimalSound(dog); // 输出："旺财 汪汪叫"、"旺财 在吃东西"
letAnimalSound(cat); // 输出："咪宝 喵喵叫"、"咪宝 在吃东西"
dog.fetch();         // 调用子类新增方法："旺财 在捡球"

特性	`readonly`	`const`
作用对象	类的属性、接口的属性	变量（let/var 替换为 const）
作用阶段	编译阶段（TS 类型校验）	编译阶段（JS 语法层面）
修改限制	仅限制'属性重新赋值'（对象属性内部可改）	限制'变量重新赋值'（若变量是对象，内部属性可改）
使用场景	定义不可重新赋值的类/接口属性	定义不可重新赋值的变量

// 基础类型变量：不能重新赋值
const age: number = 22;
age = 23; // 错误（const 变量不能重新赋值）

// 对象变量：变量不能重新赋值，但对象内部属性可修改
const user: { id: string; name: string } = { id: "123", name: "张三" };
user.name = "李四"; // 正确（对象内部属性可修改）
user = { id: "456", name: "王五" }; // 错误（const 变量不能重新赋值）

class User {
  readonly id: string; // 类的只读属性
  name: string;
  constructor(id: string, name: string) {
    this.id = id; // 仅能在构造函数中赋值
    this.name = name;
  }
}
const user = new User("123", "张三");
user.name = "李四"; // 正确（非只读属性可修改）
user.id = "456";    // 错误（readonly 属性不能重新赋值）

// 条件类型：T 是数组则返回 T[number]（数组元素类型），否则返回 T
type ElementOf<T> = T extends Array<infer U> ? U : T;

// 使用 1：输入是数组类型，返回元素类型
type StrArr = string[];
type StrType = ElementOf<StrArr>; // StrType 为 string（数组元素类型）

// 使用 2：输入是非数组类型，返回原类型
type Num = number;
type NumType = ElementOf<Num>; // NumType 为 number（原类型）

// 使用 3：实际场景（处理 API 返回数据，可能是数组或单个对象）
interface User {
  id: string;
  name: string;
}
// API 返回数据类型：可能是 User[] 或 User
type ApiResponse = User[] | User;
// 获取最终数据类型（数组则取元素类型，否则取原类型）
type FinalUserType = ElementOf<ApiResponse>; // FinalUserType 为 User

// 条件类型：T 是 null/undefined 则返回 never，否则返回 T
type NonNullable<T> = T extends null | undefined ? never : T;

// 使用：排除类型中的 null/undefined
type MaybeUser = User | null | undefined;
type SafeUser = NonNullable<MaybeUser>; // SafeUser 为 User（排除了 null/undefined）

// 语法：function 函数名 (参数：类型): 返回值类型 { ... }
function add(a: number, b: number): number {
  return a + b;
}
add(1, 2); // 正确（参数类型匹配）
add("1", 2); // 错误（参数 a 应为 number）

// 1. 定义函数类型别名（参数类型 + 返回值类型）
type AddFunc = (a: number, b: number) => number;
// 2. 函数表达式：指定类型为 AddFunc
const add: AddFunc = (a, b) => {
  return a + b; // TS 自动推断 a/b 为 number，返回值为 number
};

// 可选参数：age 是可选的（可传或不传）
function greet(name: string, age?: number): string {
  if (age) {
    return `Hello, ${name}, you are ${age} years old`;
  }
  return `Hello, ${name}`;
}
greet("张三"); // 正确（age 省略）
greet("李四", 22); // 正确（age 传入）

// 默认参数：age 默认值为 18（自动变为可选参数）
function greetWithDefault(name: string, age: number = 18): string {
  return `Hello, ${name}, you are ${age} years old`;
}
greetWithDefault("张三"); // 正确（age 用默认值 18）
greetWithDefault("李四", 22); // 正确（age 覆盖默认值）

// 剩余参数：nums 是 number 数组，接收所有后续参数
function sum(...nums: number[]): number {
  return nums.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3); // 正确（返回 6）
sum(1, "2"); // 错误（剩余参数需为 number 类型）

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

// 导出类型和值
export interface User { name: string }
export type ID = string | number;
export const getUserName = (user: User) => user.name;

// 导入类型和值
import { User, ID, getUserName } from "./types"; // 同时导入类型和值
import type { User as ImportedUser } from "./types"; // 仅导入类型（推荐，明确区分）

// 错误场景：User | string 联合类型，直接访问 name 属性报错
type UserOrStr = User | string;
const value: UserOrStr = { name: "张三", age: 22 };
console.log(value.name); // 错误（类型 UserOrStr 上不存在属性 name，因可能是 string）

// 解决：用类型守卫缩小范围
if (typeof value !== "string") {
  console.log(value.name); // 正确（TS 推断 value 为 User）
}

// 错误场景：any 类型变量赋值后，TS 无法推断后续类型
let data: any = { name: "张三", age: 22 };
data = "hello"; // 意外赋值为 string
console.log(data.age); // 错误（string 类型无 age 属性）

// 解决：显式指定 data 类型为 User
interface User {
  name: string;
  age: number;
}
let data: User = { name: "张三", age: 22 };
data = "hello"; // 错误（TS 提前报错，避免后续问题）

// 错误场景：TS 推断 getElementById 返回 HTMLElement，无 value 属性
const input = document.getElementById("username");
console.log(input.value); // 错误（类型 HTMLElement 上不存在属性 value）

// 解决：断言为 HTMLInputElement（实际类型）
const input = document.getElementById("username") as HTMLInputElement;
console.log(input.value); // 正确

// 错误场景：User 接口无 age 属性，访问 user.age 报错
interface User {
  name: string;
}
const user: User = { name: "张三", age: 22 }; // 错误（User 无 age 属性）
console.log(user.age); // 错误（类型 User 上不存在属性 age）

// 解决：补充 age 属性到 User 接口
interface User {
  name: string;
  age: number; // 新增 age 属性
}
const user: User = { name: "张三", age: 22 }; // 正确
console.log(user.age); // 正确

// 从 User 中排除 address 属性
type UserWithoutAddress = Omit<User, "address">;
// UserWithoutAddress 等价于：{ name: string; age: number }

interface User {
  name: string;
  age: number;
  address: string;
}
// 从 User 中挑选 name 和 age 属性
type UserNameAndAge = Pick<User, "name" | "age">;
// UserNameAndAge 等价于：{ name: string; age: number }

interface Config {
  apiUrl: string;
  timeout: number;
}
type ReadonlyConfig = Readonly<Config>;
// ReadonlyConfig 等价于：{ readonly apiUrl: string; readonly timeout: number }
const config: ReadonlyConfig = { apiUrl: "https://api.com", timeout: 5000 };
config.apiUrl = "https://new-api.com"; // 错误（只读属性不能修改）

interface PartialUser {
  name?: string;
  age?: number;
}
type RequiredUser = Required<PartialUser>;
// RequiredUser 等价于：{ name: string; age: number }

interface User {
  name: string;
  age: number;
  address: string;
}
// Partial：所有属性变为可选
type PartialUser = Partial<User>;
// PartialUser 等价于：{ name?: string; age?: number; address?: string }
// 使用：部分更新用户信息（仅传需要修改的 name）
function updateUser(user: PartialUser): void {
  // 逻辑：仅更新传入的属性
}
updateUser({ name: "李四" }); // 正确（仅传 name）

const input = document.getElementById("username");
if (input) {
  // 非 null 后，断言为 HTMLInputElement
  const typedInput = input as HTMLInputElement;
  typedInput.value = "test";
}

const citySelect = document.getElementById("city") as HTMLSelectElement;
console.log("选中城市：", citySelect.value); // 正确（专属属性 value）

const submitBtn = document.getElementById("submit") as HTMLButtonElement;
submitBtn.addEventListener("click", () => {
  console.log("按钮被点击");
});
submitBtn.click(); // 正确（专属方法 click）

// 断言为 HTMLInputElement（因 getElementById 返回 HTMLElement）
const usernameInput = document.getElementById("username") as HTMLInputElement;
usernameInput.value = "[email protected]"; // 正确（专属属性 value）
usernameInput.focus(); // 正确（专属方法 focus）

const div = document.getElementById("container") as HTMLElement;
div.className = "active"; // 正确（HTMLElement 有 className 属性）

class User {
  name: string; // 非可选属性
  age?: number; // 可选属性（无需初始化）
  constructor(name: string) {
    this.name = name; // 正确（构造函数中初始化）
  }
}

// 错误（name 未在构造函数中初始化，且无 ! 标记）
class BadUser {
  name: string;
  constructor() {}
}

type AddFunc = (a: number, b: number) => number;
const add: AddFunc = (a: number, b: number) => a + b; // 正确（参数类型完全匹配）

// 错误（参数 b 为 any，与 AddFunc 的 number 不匹配）
const badAdd: AddFunc = (a: number, b: any) => a + b;

// 错误（开启 strictNullChecks 后，string 类型不能接收 null）
let name: string = null; // 错误（Type 'null' is not assignable to type 'string'）

// 正确（显式允许 null）
let name: string | null = null;
if (name) {
  console.log(name.length); // 正确（非 null 后才能访问 length）
}

// 错误（开启 noImplicitAny 后，参数 a 隐式为 any，报错）
function add(a, b) {
  return a + b;
}

// 正确（显式指定参数类型）
function add(a: number, b: number): number {
  return a + b;
}

// 1. 定义约束类型：有 length 属性的类型
interface HasLength {
  length: number;
}
// 2. 泛型约束：T 必须是 HasLength 的子类型（即 T 必须有 length 属性）
function getLength<T extends HasLength>(value: T): number {
  return value.length; // 正确（因 T 有 length 属性，不会报错）
}
// 3. 使用：传入有 length 属性的类型（正确）
getLength("hello"); // 5（string 有 length）
getLength([1, 2, 3]); // 3（数组有 length）
getLength({ length: 10 }); // 10（对象有 length 属性）

// 错误：传入无 length 属性的类型（number 无 length）
// getLength(123); // 错误（Type 'number' does not satisfy the constraint 'HasLength'）

// 泛型约束：K 必须是 T 的属性键（keyof T 是 T 的所有属性键组成的联合类型）
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]; // 正确（K 是 T 的属性键，不会访问不存在的属性）
}

// 使用：
const user = { name: "张三", age: 22 };
getProperty(user, "name"); // "张三"（正确，name 是 user 的属性）
getProperty(user, "age"); // 22（正确，age 是 user 的属性）

// 错误：key 不是 user 的属性
// getProperty(user, "address"); // 错误（Argument of type '"address"' is not assignable to parameter of type '"name" | "age"'）

function identity<T>(value: T): T {
  return value;
}
const str = identity("hello"); // 推断 T 为 string，str 类型为 string
const num = identity(123);     // 推断 T 为 number，num 类型为 number

type LogFunc = (message: string) => void;
const log: LogFunc = (msg) => {
  // TS 推断 msg 为 string 类型（因 LogFunc 约束参数为 string）
  console.log(msg);
};

// 数组：推断为 string[] 类型
const fruits = ["apple", "banana", "orange"];
// 对象：推断为 { name: string; age: number } 类型
const user = { name: "张三", age: 22 };

// TS 推断返回值为 number 类型
function add(a: number, b: number) {
  return a + b; // 返回值是 number，故函数返回值类型为 number
}

let username = "张三"; // TS 推断 username 为 string 类型
let age = 22;          // 推断为 number 类型
let isStudent = true;  // 推断为 boolean 类型

// 1. 定义函数重载签名（两种调用方式）
function formatDate(date: Date): string; // 签名 1：仅传 date
function formatDate(date: Date, format: string): string; // 签名 2：传 date + format

// 2. 实现函数（参数类型兼容所有签名，用联合类型）
function formatDate(date: Date, format?: string): string {
  if (format) {
    // 自定义格式逻辑（简化示例）
    return `自定义格式：${date.toISOString()} ${format}`;
  } else {
    // 默认格式逻辑（YYYY-MM-DD）
    return date.toISOString().split("T")[0];
  }
}

// 3. 使用：TS 自动匹配对应的签名
const defaultFormatted = formatDate(new Date()); // 匹配签名 1，返回 string
const customFormatted = formatDate(new Date(), "YYYY/MM/DD"); // 匹配签名 2，返回 string

特性	命名空间（Namespace）	模块（Module）
文件关联	可在单个文件中定义，支持跨文件合并	每个文件就是一个独立模块
依赖管理	无内置依赖管理，需手动通过 `<reference>` 引入	支持 `import`/`export` 管理依赖
作用域	全局作用域内的一个容器（可能污染全局）	独立作用域（文件内声明默认不暴露）
现代项目适用性	适用于早期非模块化项目（如全局脚本）	适用于现代模块化项目（推荐使用）

// 定义命名空间（可嵌套）
namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
  export function multiply(a: number, b: number): number {
    return a * b;
  }
  // 未 export 的成员仅在命名空间内可见
  function subtract(a: number, b: number): number {
    return a - b;
  }
}

// 使用命名空间成员（通过 命名空间。成员 访问）
MathUtils.add(1, 2); // 3
MathUtils.multiply(2, 3); // 6

// 1. 定义抽象类（组件基类）
abstract class BaseComponent {
  // 公共属性（子类继承）
  protected name: string;
  // 构造函数（子类需调用 super()）
  constructor(name: string) {
    this.name = name;
  }
  // 普通方法（子类继承后可直接使用）
  public logName(): void {
    console.log(`组件名称：${this.name}`);
  }
  // 抽象方法（子类必须重写）
  public abstract render(): string; // 声明渲染方法，无实现
  // 抽象方法（带参数和返回值）
  public abstract update(data: unknown): boolean;
}

// 2. 定义子类（继承抽象类，必须实现所有抽象方法）
class ButtonComponent extends BaseComponent {
  constructor(name: string) {
    super(name); // 调用父类构造函数
  }
  // 实现抽象方法 render
  public override render(): string {
    return `<button>${this.name}</button>`;
  }
  // 实现抽象方法 update
  public override update(data: { text: string }): boolean {
    this.name = data.text;
    return true;
  }
}

// 3. 使用：实例化子类（抽象类不能实例化）
const button = new ButtonComponent("提交按钮");
button.logName(); // 输出："组件名称：提交按钮"
console.log(button.render()); // 输出："<button>提交按钮</button>"
button.update({ text: "确认按钮" }); // 正确（实现了抽象方法）

// A.ts（依赖 B.ts）
import { funcB } from "./B";
export function funcA() {
  return funcB();
}

// B.ts（需使用 A.ts 的 funcA，但改为动态导入）
export async function funcB() {
  // 动态导入：在函数内部才加载 A.ts，避免初始化阶段循环依赖
  const { funcA } = await import("./A");
  return funcA() + " from B";
}

// types.ts（提取公共类型）
export interface User {
  id: string;
  name: string;
}

// A.ts（依赖 types.ts，不直接依赖 B.ts）
import { User } from "./types";
export function formatUser(user: User): string {
  return `${user.id}: ${user.name}`;
}

// B.ts（依赖 types.ts，不直接依赖 A.ts）
import { User } from "./types";
export function createUser(name: string): User {
  return { id: Date.now().toString(), name };
}

// 普通类型：string 可匹配任何字符串
let str: string = "primary";
str = "success"; // 正确

// 字符串字面量类型：仅匹配 "primary"
let primaryStr: "primary" = "primary";
primaryStr = "success"; // 错误（Type '"success"' is not assignable to type '"primary"'）

// 结合联合类型：限制取值范围（常用场景）
type ButtonType = "primary" | "secondary" | "danger";
const btnType: ButtonType = "primary"; // 正确
const invalidBtnType: ButtonType = "warning"; // 错误（不在允许范围内）

// 数字字面量类型：限制为特定数字
type StatusCode = 200 | 400 | 500;
const code: StatusCode = 200; // 正确
const errorCode: StatusCode = 404; // 错误（不在允许范围内）

// 条件类型：若 T 是函数，则推断其返回值类型 R，否则返回 T
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : T;

// 使用：提取函数的返回值类型
function getUser() {
  return { id: "123", name: "张三" };
}
type UserReturnType = ReturnType<typeof getUser>; // UserReturnType 等价于 { id: string; name: string }（函数返回值类型）

// 条件类型：若 T 是数组，则推断其元素类型 U，否则返回 T
type ElementType<T> = T extends (infer U)[] ? U : T;

// 使用：
type StrArr = string[];
type StrElement = ElementType<StrArr>; // string（数组元素类型）
type Num = number;
type NumElement = ElementType<Num>; // number（非数组，返回原类型）

// 条件类型：若 T 是 Promise，则推断其 resolve 类型 U，否则返回 T
type PromiseType<T> = T extends Promise<infer U> ? U : T;

// 使用：
type UserPromise = Promise<{ id: string; name: string }>;
type User = PromiseType<UserPromise>; // { id: string; name: string }（Promise resolve 类型）

// 1. 创建全局声明文件（如 global.d.ts，放在项目根目录）
declare global {
  interface Window {
    appConfig?: {
      apiUrl: string;
      env: "development" | "production";
    };
  }
}

// 2. 在代码中使用（TS 可识别 window.appConfig 的类型）
if (window.appConfig) {
  console.log("API 地址：", window.appConfig.apiUrl); // 正确（有类型提示）
  if (window.appConfig.env === "development") {
    console.log("开发环境");
  }
}

前端高频面试题：TypeScript 基础与进阶

前端高频面试题：TypeScript 篇

1. 请解释 TypeScript 是什么？它与 JavaScript 的核心区别是什么？

2. TypeScript 支持哪些基本数据类型？请分别说明。

3. 接口（Interface）和类型别名（Type Alias）的区别是什么？分别在什么场景下使用？

4. 什么是泛型（Generic）？为什么需要泛型？请举一个实习中常用的例子。

5. 什么是类型断言（Type Assertion）？有哪几种方式？使用时需要注意什么？

6. any、unknown、never、void 这四种特殊类型的区别是什么？分别在什么场景下使用？

7. 如何在 TypeScript 中定义'可选属性'和'只读属性'？请举例说明。

8. 什么是联合类型（Union Type）和交叉类型（Intersection Type）？请分别举例说明使用场景。

9. 什么是类型守卫（Type Guard）？常用的类型守卫有哪些？请举例说明。

10. 如何将 TypeScript 集成到 Vue 项目中？（实习高频，以 Vue3 + Vite 为例）

11. 什么是枚举（Enum）？它有什么作用？请举例说明数字枚举和字符串枚举的区别。

12. 什么是声明文件（.d.ts）？它的作用是什么？请举例说明使用场景。

13. 如何在 TypeScript 中处理异步函数的类型（如 Promise）？请举例说明。

14. 什么是索引签名（Index Signature）？它的作用是什么？请举例说明。

15. 如何在 TypeScript 中实现类的继承和多态？请举例说明。

16. TypeScript 中的 readonly 和 const 的区别是什么？请举例说明。

17. 什么是条件类型（Conditional Types）？请举例说明它的使用场景。

18. 如何在 TypeScript 中定义函数的类型？包括参数类型、返回值类型、可选参数、默认参数等。

19. TypeScript 的模块系统（import/export）与 JavaScript 的模块系统有什么区别？

20. 实习中使用 TypeScript 时，你遇到过'类型'X'上不存在属性'Y''的错误吗？如何解决？

21. 什么是映射类型（Mapped Types）？常用的内置映射类型有哪些？请举例说明。

22. 如何在 TypeScript 中处理 DOM 元素的类型？请举例说明常见 DOM 元素类型的使用。

23. 什么是 TypeScript 的'严格模式'（strict: true）？开启后会启用哪些关键规则？

24. 如何在 TypeScript 中实现泛型约束（Generic Constraints）？请举例说明它的作用。

25. 实习中使用 TypeScript 时，你遇到过哪些印象深刻的问题？是如何解决的？（项目经验类，必问）

26. TypeScript 中的'类型推断'是指什么？请举例说明常见的类型推断场景。

27. 如何在 TypeScript 中定义'函数重载'？请举例说明其使用场景。

28. TypeScript 中的'命名空间（Namespace）'是什么？它与模块（Module）的区别是什么？

29. 如何在 TypeScript 中定义'抽象类（Abstract Class）'和'抽象方法（Abstract Method）'？它们的作用是什么？

30. TypeScript 中，如何处理'循环依赖'问题？请举例说明常见解决方案。

31. 什么是'字面量类型（Literal Types）'？它与普通类型有什么区别？请举例说明。

32. TypeScript 中，`infer` 关键字的作用是什么？请举例说明其使用场景。

33. 如何在 TypeScript 中定义'全局变量'的类型？请举例说明。

更多推荐文章

相关免费在线工具

前端高频面试题：TypeScript 基础与进阶

前端高频面试题：TypeScript 篇

1. 请解释 TypeScript 是什么？它与 JavaScript 的核心区别是什么？

2. TypeScript 支持哪些基本数据类型？请分别说明。

3. 接口（Interface）和类型别名（Type Alias）的区别是什么？分别在什么场景下使用？

4. 什么是泛型（Generic）？为什么需要泛型？请举一个实习中常用的例子。

5. 什么是类型断言（Type Assertion）？有哪几种方式？使用时需要注意什么？

6. any、unknown、never、void 这四种特殊类型的区别是什么？分别在什么场景下使用？

7. 如何在 TypeScript 中定义'可选属性'和'只读属性'？请举例说明。

8. 什么是联合类型（Union Type）和交叉类型（Intersection Type）？请分别举例说明使用场景。

9. 什么是类型守卫（Type Guard）？常用的类型守卫有哪些？请举例说明。

10. 如何将 TypeScript 集成到 Vue 项目中？（实习高频，以 Vue3 + Vite 为例）

11. 什么是枚举（Enum）？它有什么作用？请举例说明数字枚举和字符串枚举的区别。

12. 什么是声明文件（.d.ts）？它的作用是什么？请举例说明使用场景。

13. 如何在 TypeScript 中处理异步函数的类型（如 Promise）？请举例说明。

14. 什么是索引签名（Index Signature）？它的作用是什么？请举例说明。

15. 如何在 TypeScript 中实现类的继承和多态？请举例说明。

16. TypeScript 中的 readonly 和 const 的区别是什么？请举例说明。

17. 什么是条件类型（Conditional Types）？请举例说明它的使用场景。

18. 如何在 TypeScript 中定义函数的类型？包括参数类型、返回值类型、可选参数、默认参数等。

19. TypeScript 的模块系统（import/export）与 JavaScript 的模块系统有什么区别？

20. 实习中使用 TypeScript 时，你遇到过'类型'X'上不存在属性'Y''的错误吗？如何解决？

21. 什么是映射类型（Mapped Types）？常用的内置映射类型有哪些？请举例说明。

22. 如何在 TypeScript 中处理 DOM 元素的类型？请举例说明常见 DOM 元素类型的使用。

23. 什么是 TypeScript 的'严格模式'（strict: true）？开启后会启用哪些关键规则？

24. 如何在 TypeScript 中实现泛型约束（Generic Constraints）？请举例说明它的作用。

25. 实习中使用 TypeScript 时，你遇到过哪些印象深刻的问题？是如何解决的？（项目经验类，必问）

26. TypeScript 中的'类型推断'是指什么？请举例说明常见的类型推断场景。

27. 如何在 TypeScript 中定义'函数重载'？请举例说明其使用场景。

28. TypeScript 中的'命名空间（Namespace）'是什么？它与模块（Module）的区别是什么？

29. 如何在 TypeScript 中定义'抽象类（Abstract Class）'和'抽象方法（Abstract Method）'？它们的作用是什么？

30. TypeScript 中，如何处理'循环依赖'问题？请举例说明常见解决方案。

31. 什么是'字面量类型（Literal Types）'？它与普通类型有什么区别？请举例说明。

32. TypeScript 中，infer 关键字的作用是什么？请举例说明其使用场景。

33. 如何在 TypeScript 中定义'全局变量'的类型？请举例说明。

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

32. TypeScript 中，`infer` 关键字的作用是什么？请举例说明其使用场景。