TypeScript高频面试题/写法

接口 (interface) 是什么？

answer

接口用于定义对象应具有的属性、方法及其类型。也可以用来定义类、函数、数组等的结构

Copy
// 1、 定义对象结构
interface Car {
brand: string;
speed: number;
drive(): void;
}
let myCar: Car = {
brand: "Toyota",
speed: 120,
drive() {
console.log("Driving at speed: " + this.speed);
}
};

// 2、指定接口只读和可选
interface Point {
readonly x: number; // 只读
readonly y: number; // 只读
z?: number; // 可选
}
let p1: Point = { x: 10, y: 20 };

type 和 interface 的区别？

answer

interface 只能定义对象类型，而 type 可以定义任何类型（基本类型，联合类型，元组）。

interface 可以被合并（merge），如果多个同名接口会被自动合并为一个接口，而 type 不行。

interface 使用 extends 扩展其他接口；而 type 是通过交叉类型（&）来合并多个类型

使用场景

interface 更适合用于描述对象的形状，尤其是当需要继承和声明合并时。

type 更灵活，除了对象类型，还可以用来定义联合类型、交叉类型、基础类型等。

unknown 和 any 有什么区别？

answer

any： 表示任意类型，不进行类型检查。

unknown： 也可以表示任意类型，但相比 any，unknown 是类型安全的。因为在对 unknown 类型的值做任何操作时需要先确定它的类型。

Copy
let value: unknown;
value = 42;
// 需要先做类型检查，才能调用 `toFixed` 方法
if (typeof value === "number") {
value.toFixed(); // 正确
}

value = "Hello";
// 需要先做类型检查，才能调用 `toUpperCase` 方法
if (typeof value === "string") {
value.toUpperCase(); // 正确
}

使用场景

any：适用于不关心类型安全的场景，或者需要快速编写代码时，但它会使得代码失去类型检查的优势。

unknown：适合在你不知道确切类型的情况下，但仍然希望保持类型安全性。在使用前可以强制开发者对类型进行校验

说一下 never 类型的用法？

answer

never 最常见的用法是表示一个函数永远不会有返回值。通常用于抛出错误或者导致程序无法继续执行的场景。

Copy
// 抛出异常
function throwError(message: string): never {
throw new Error(message);
}

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

// 穷尽检查
type Shape = 'circle' | 'square';

function getArea(shape: Shape): number {
switch (shape) {
case 'circle':
return Math.PI * 1 ** 2;
case 'square':
return 1 * 1;
default:
const _exhaustiveCheck: never = shape; // 这里的 `shape` 永远不会是其他值
throw new Error(`Unexpected shape: ${shape}`);
}
}

never 与 void 的区别？

answer

void： 表示没有返回值，但函数执行后仍然会正常结束，返回 undefined。

never： 表示永远不会返回值，函数永远不会结束（比如抛出错误或无限循环）。

Copy
function logMessage(message: string): void {
console.log(message); // 该函数返回 `undefined`
}

function throwError(message: string): never {
throw new Error(message); // 该函数永远不会返回
}

说一下联合类型、交叉类型、类型别名、类型保护

联合类型 (Union Types)

联合类型 允许一个变量可以是多种类型中的一种。使用 |（竖线）符号来定义。

场景： 用于表示某个值可以是多个不同类型中的一种，比如函数参数可以接受多种类型的数据。

Copy
let value: string | number;

function formatInput(input: string | number): string {
if (typeof input === "string") {
return input.toUpperCase();
} else {
return input.toFixed(2);
}
}

交叉类型 (Intersection Types)

交叉类型 将多个类型合并为一个类型，该类型同时拥有所有类型的特性。使用 &（和符号）定义。

场景： 用于组合多个类型的属性，创建一个拥有所有属性的对象类型。

Copy
interface Person {
name: string;
}
interface Employee {
id: number;
}
let employee: Person & Employee = {
name: "Alice",
id: 123
};

function printEmployee(employee: Person & Employee) {
console.log(`Name: ${employee.name}, ID: ${employee.id}`);
}

类型别名 (Type Aliases)

类型别名 用来为一个类型创建一个新的名称（别名）。通过 type 关键字定义，适用于基本类型、联合类型、交叉类型等。

场景： 用于简化复杂类型，提升代码的可读性。它可以为对象、函数、联合类型等复杂类型创建简单的别名。

Copy
type ID = string | number;
let userId: ID = "abc123";

type User = {
name: string;
age: number;
};
function greet(user: User) {
console.log(`Hello, ${user.name}`);
}

类型保护 (Type Guards)

类型保护 是 ts 中用于判断某个值的实际类型，并根据该类型进行进一步处理的技术。它在使用联合类型时非常有用，确保在不同类型的分支中能正确地执行相应的操作。

typeof 类型保护： 用于判断基本类型（string, number, boolean 等）

Copy
function printId(id: string | number) {
if (typeof id === "string") {
console.log(id.toUpperCase());
} else {
console.log(id.toFixed(2));
}
}

instanceof 类型保护： 用于判断对象是否是某个类的实例。

Copy
class Dog {
bark() {
console.log("Woof!");
}
}
class Cat {
meow() {
console.log("Meow!");
}
}
function makeSound(animal: Dog | Cat) {
if (animal instanceof Dog) {
animal.bark();
} else {
animal.meow();
}
}

is 关键字： 可以通过函数返回值 is 来创建自定义类型保护。

Copy
function isString(value: any): value is string {
return typeof value === "string";
}

function printValue(value: string | number) {
if (isString(value)) {
console.log(value.toUpperCase());
} else {
console.log(value.toFixed(2));
}
}

in 关键字: 用于判断对象是否具有某个属性，特别在判断联合类型中的对象类型时。

Copy
interface Bird {
fly(): void;
}
interface Fish {
swim(): void;
}
function move(animal: Bird | Fish) {
if ("fly" in animal) {
animal.fly();
} else {
animal.swim();
}
}

typeof 关键字的作用是什么？

answer

复用已有变量的类型： 如果你有一个已知类型的对象或变量，可以通过 typeof 查询它的类型，避免重复编写类型声明。

函数返回类型： 可以用 typeof 来推断函数返回的类型。

运行时：JavaScript 中的类型检查

Copy
// 1、复用已有变量的类型
let person = {
name: "Alice",
age: 25,
};
type PersonType = typeof person; // { name: string; age: number; }

// 2、函数返回类型
function getPerson() {
return { name: "Alice", age: 25 };
}

type PersonType = typeof getPerson(); // { name: string; age: number; }

// 3、JavaScript 中的类型检查
function printValue(value: number | string) {
if (typeof value === "string") {
console.log("This is a string: ", value);
} else {
console.log("This is a number: ", value);
}
}

keyof 关键字的作用是什么？

answer

获取对象类型的键： keyof 常用于从对象类型中提取所有键，并用于动态地操作类型。

类型约束： keyof 可以用来约束函数参数，使得函数的参数必须是对象类型的某个键。

Copy
// 1、获取对象类型的键
type Person = {
name: string;
age: number;
location: string;
};

type PersonKeys = keyof Person; // 'name' | 'age' | 'location'

// 2、类型约束（key必须是obj的对象键）
function getValue<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
const person = { name: "Alice", age: 25, location: "NYC" };
const name = getValue(person, "name");
const age = getValue(person, "age");

如何定义一个枚举？使用场景是？

answer

枚举用于定义一组固定的、命名的常量，适合处理有限的选项集、状态、方向或权限。使用关键字 enum 定义

Copy
enum ResultEnum {
SUCCESS = 200,
ERROR = 500,
NOTLOGGED = 401,
OVERDUE = 402,
TIMEOUT = 5000,
}

enum LogLevel {
Info,
Warn,
Error
}

如何联合枚举类型的 Key?

Copy
enum Direction {
Up,
Down,
Left,
Right
}

type DirectionType = keyof typeof Direction; // Up | Down | Left | Right

什么是泛型 (generics)？

answer

泛型 允许我们编写代码时不指定具体类型，使用类似占位符的方式，等到实际使用的时候再指定类型。使得泛型具有更高的灵活性

泛型函数、接口、类 是 TypeScript 中实现泛型的主要方式。

Copy
// 简单泛型函数
function echo<T>(arg: T): T {
return arg;
}
echo<number>(42); // 传入 number 类型

// 泛型接口
interface Box<T> {
content: T;
}

// 默认泛型类型
function createArray<T = string>(length: number, value: T): T[] {
return Array(length).fill(value);
}

如何对泛型类型进行约束？

规定泛型参数必须符合某些条件，比如必须具有某些属性或方法。

Copy
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(arg: T): T {
console.log(arg.length);
return arg;
}
logLength("Hello"); // 字符串有 length 属性，合法
// logLength(123); // 这里会报错，因为 number 类型没有 length 属性

as 作用？什么时候使用？

answer

在某些情况下，TypeScript 不能推断出值的确切类型，或者你知道某个值的类型比 TypeScript 推断得更加具体，此时可以使用 as 来进行类型断言。但需要自己保证类型断言的正确性。

类型推断不准确时、当我们明确知道数据的类型时可以使用 as 类型断言

Copy
let someValue: any = "This is a string";

// 我们知道 someValue 是 string 类型
let strLength: number = (someValue as string).length;

let colors = ["red", "green", "blue"] as const;
// `colors` 的类型将是 readonly ["red", "green", "blue"]

元组是什么？和 ts 数组有何区别？

answer

元组是一种固定长度、各个元素可以是不同类型的数组。在定义元组时，必须指定每个元素的类型和顺序。在使用元组时，你必须按顺序和类型访问元素。而 TypeScript 数组的元素类型通常是相同的。

Copy
let tuple: [string, number];
tuple = ["Hello", 42]; // 合法
// tuple = [42, "Hello"]; // 非法，顺序错误

使用场景

函数返回值： 当函数需要返回多个不同类型的值时，可以使用元组。

键值对： 元组可以用于表示键值对，像对象的属性和值

Copy
function getUserInfo(): [string, number] {
return ["Alice", 25];
}

let entry: [string, number] = ["score", 100];
console.log(entry[0]); // 输出 "score"

// 可选元素的元组
type FlexibleTuple = [string, number?, boolean?];
let tuple1: FlexibleTuple = ["Hello"];

函数重载是什么？有何作用？

answer

是什么？： 函数重载使得同一个函数名可以有多个不同的参数列表（签名），这些签名可以根据参数的类型或数量不同而变化。使其能够处理不同的输入情况。

作用： 增强灵活性、提高代码可读性、提供类型安全。适合根据不同参数 / 参数类型 获取对应类型及实现的情况

Copy
// 重载签名（没有实现）
function format(input: number): string;
function format(input: Date): string;

// 实现签名（包含逻辑）
function format(input: any): string {
if (typeof input === "number") {
return input.toFixed(2); // 格式化数字
} else if (input instanceof Date) {
return input.toISOString(); // 格式化日期
}
}

// 不同数量、类型参数
function greet(name: string): string;
function greet(firstName: string, lastName: string): string;

function greet(firstName: string, lastName?: string): string {
if (lastName) {
return `Hello, ${firstName} ${lastName}!`;
} else {
return `Hello, ${firstName}!`;
}
}

如何实现条件类型？

条件类型通常以 T extends U ? X : Y 这样的形式书写，其中 T extends U 表示条件判断，如果条件为真则返回类型 X，否则返回类型 Y。这类似于 JavaScript 中的三元操作符 condition ? trueValue : falseValue。

Copy
T extends U ? X : Y
// • T extends U：表示条件，检查类型 T 是否可以赋值给类型 U。
// • X：当 T 满足条件（即 T extends U 为 true）时返回的类型。
// • Y：当 T 不满足条件（即 T extends U 为 false）时返回的类型。

// 示例：
type IsString<T> = T extends string ? "Yes" : "No";

type A = IsString<string>; // "Yes"
type B = IsString<number>; // "No"

有什么常用的内置工具类型？

Partial<T>

将类型 T 的所有属性变为可选属性。

Copy
const Person = {
name: string;
age: number;
}

type PartialPerson = Partial<Person>;
// PartialPerson 等价于 { name?: string; age?: number; }

Required<T>

将类型 T 的所有属性变为必选属性。

Copy
interface Person {
name?: string;
age?: number;
}

type RequiredPerson = Required<Person>;
// RequiredPerson 等价于 { name: string; age: number; }

Readonly<T>

将类型 T 的所有属性变为只读属性，不允许修改。

Copy
interface Person {
name: string;
age: number;
}

type ReadonlyPerson = Readonly<Person>;
// ReadonlyPerson 等价于 { readonly name: string; readonly age: number; }

Pick<T, K>

从类型 T 中选取部分属性组成新类型。K 是需要选取的属性的联合类型。

Copy
interface Person {
name: string;
age: number;
address: string;
}

type PersonNameAndAge = Pick<Person, "name" | "age">;
// PersonNameAndAge 等价于 { name: string; age: number; }

Omit<T, K>

从类型 T 中排除 K 指定的属性，构造新类型。

Copy
interface Person {
name: string;
age: number;
address: string;
}

type PersonWithoutAddress = Omit<Person, "address">;
// PersonWithoutAddress 等价于 { name: string; age: number; }

Record<K,T>

构造一个类型，键 K 可以是字符串、数字等，值 T 是所有属性的类型。

Copy
type Page = "home" | "about" | "contact";
type PageInfo = { title: string };

const pages: Record<Page, PageInfo> = {
home: { title: "Home Page" },
about: { title: "About Us" },
contact: { title: "Contact Us" },
};

Exclude<T,U>

从联合类型 T 中排除所有属于类型 U 的子类型。

Copy
type A = "a" | "b" | "c";
type B = "a";

type Result = Exclude<A, B>; // "b" | "c"

Extract<T,U>

从联合类型 T 中提取所有可以赋值给类型 U 的子类型。

Copy
type A = "a" | "b" | "c";
type B = "a" | "b";

type Result = Extract<A, B>; // "a" | "b"

NonNullable<T>

排除类型 T 中的 null 和 undefined。

Copy
type A = string | null | undefined;

type NonNullableA = NonNullable; // string

ReturnType<T>

获取函数类型 T 的返回值类型。

Copy
function getUser() {
return { name: "Alice", age: 25 };
}

type UserType = ReturnType<typeof getUser>;
// UserType 等价于 { name: string; age: number; }

InstanceType<T>

获取构造函数类型 T 的实例类型。

Copy
class Person {
name: string = "Alice";
age: number = 25;
}

type PersonInstance = InstanceType<typeof Person>;
// PersonInstance 等价于 Person

Parameters<T>

获取函数类型 T 的参数类型，返回一个元组类型。

Copy
function greet(name: string, age: number): string {
return `Hello ${name}, you are ${age} years old.`;
}

type GreetParams = Parameters<typeof greet>;
// GreetParams 等价于 [string, number]

ConstructorParameters<T>

获取构造函数类型 T 的参数类型，返回一个元组类型。

Copy
class Person {
constructor(public name: string, public age: number) {}
}

type PersonConstructorParams = ConstructorParameters<typeof Person>;
// PersonConstructorParams 等价于 [string, number]

ThisType<T>

用于指定上下文对象 this 的类型，通常与 noImplicitThis 选项配合使用。

Copy
type ObjectDescriptor<D, M> = {
data?: D;
methods?: M & ThisType<D & M>; // M中的this会被推断为 D & M 类型
};

let obj: ObjectDescriptor<{ x: number }, { foo(): void }> = {
data: { x: 10 },
methods: {
foo() {
console.log(this.x); // 推断为 number
}
}
};

Awaited<T>

获取一个 Promise 的解析类型。

Copy
type P = Promise<string>;

type Result = Awaited ; // string

declare，declare global 是什么？

answer

declare： 告诉 TypeScript 某些外部定义存在，进行类型声明，不生成代码。

declare global： 用于声明或扩展全局范围内的变量、类型、或接口，让它们在全局作用域中可用。

.d.ts 和 .ts 文件有何区别？

answer

.ts 文件： 用于编写 TypeScript 源代码，可以包含实现和类型定义，编译后生成 .js 文件。

.d.ts 文件： 用于声明类型信息，通常用于为 JavaScript 库、外部模块或没有类型的代码提供类型定义

如何为组件模板实例引用标注类型？

Copy

<MyComponent ref="myComponentRef" message="Hello, World!" />



import { ref } from 'vue'
import MyComponent from './MyComponent.vue';
const myComponentRef = ref<InstanceType<typeof MyComponent> | null>(null)


typescript.json 配置说明！

https://typescript.p6p.net/typescript-tutorial/tsconfig.json.html#compileoptions

Copy
{
// 编译选项
"compilerOptions": {
// 指定 ECMAScript 目标版本（如 ES5, ES6, ESNext）。
"target": "ES6",
// 指定使用的模块系统
"module": "ESNext",
// 启用所有严格类型检查选项的标志。
"strict": true,
// 启用对 ES 模块的互操作性支持。
"esModuleInterop": true,
// 生成 .map 文件，用于调试。
"sourceMap": true,
// 指定 JSX 代码的编译方式（如 react, react-jsx, preserve）。
"jsx": "preserve",
// 指定使用的库文件（如 DOM, ES6, ESNext）。
"lib": ["ES6", "DOM"],
// 指定使用的库文件（如 DOM, ES6, ESNext）。
"skipLibCheck": true,
// 在没有类型注解的情况下禁止隐式 any 类型。
"noImplicitAny": true,
// 生成声明文件，开启后会自动生成声明文件
"declaration": true,
// 指定生成声明文件存放目录
"declarationDir": "./file",
// 只生成声明文件，而不会生成js文件
"emitDeclarationOnly": true,
// 允许export=导出，由import from 导入
"esModuleInterop": true,
// 解析非相对模块的基地址，默认是当前目录
"baseUrl": "./",
// 路径映射，相对于baseUrl
"paths": {
"@/*": ["./src/*"]
},
// ...
},
// 包含的文件或目录
"include": [],
// 排除的文件或目录
"exclude": [],
// 指定编译的具体文件列表，适用于小型项目。
"files": [],
// 用于支持项目间的引用，适用于大型项目。
"references": []
// 继承其他配置
"extends": ""
}