TS常规面试题1

以下是 TypeScript(TS)常见的面试题分类及参考答案,覆盖基础语法、类型系统、高级特性等核心知识点:

一、基础概念

1. TypeScript 与 JavaScript 的区别?

  • TypeScript:JavaScript 的超集,静态类型检查,提供接口、枚举、类等面向对象特性,编译后生成纯 JS 代码。
  • JavaScript:动态类型,无编译时类型检查,灵活性高但容易出现运行时错误。

2. 什么是静态类型和动态类型?

  • 静态类型:编译时检查类型,如 TS、Java;
  • 动态类型:运行时检查类型,如 JS、Python。

二、类型系统

1. 如何定义基本类型?

typescript

ini 复制代码
let num: number = 10;
let str: string = 'hello';
let isDone: boolean = false;
let arr: number[] = [1, 2, 3]; // 或 Array<number>
let tuple: [string, number] = ['a', 1]; // 元组

2. 什么是联合类型(Union Type)和交叉类型(Intersection Type)?

  • 联合类型A | B,值可以是 A 或 B 类型(如 string | number)。
  • 交叉类型A & B,值同时拥有 A 和 B 的所有属性(常用于接口合并)。

3. 如何实现类型守卫(Type Guard)?

  • typeof :判断基本类型(如 typeof x === 'string')。
  • instanceof :判断类实例(如 x instanceof Person)。
  • 自定义守卫 :通过函数返回类型谓词(如 function isString(x: any): x is string)。

三、接口与类

1. 接口(Interface)和类型别名(Type Alias)的区别?

  • 接口 :只能定义对象结构,支持继承(extends),自动合并同名接口。
  • 类型别名 :可定义基本类型、联合类型等,通过 & 合并类型,不可重复定义。

2. 如何实现类的继承和多态?

typescript

typescript 复制代码
class Animal {
  constructor(protected name: string) {}
  speak(): string { return 'Animal sound'; }
}

class Dog extends Animal {
  speak(): string { return `Dog ${this.name} barks`; } // 重写方法
}

const dog: Animal = new Dog('Buddy');
console.log(dog.speak()); // 多态:输出 "Dog Buddy barks"

四、高级特性

1. 泛型(Generics)的作用?

  • 示例

    typescript

    csharp 复制代码
    function identity<T>(arg: T): T { return arg; }
    const num = identity<number>(10); // 或省略类型参数,自动推断
  • 作用:创建可复用组件,支持多种数据类型,避免重复代码。

2. 什么是装饰器(Decorator)?

  • 示例

    typescript

    typescript 复制代码
    function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
      const originalMethod = descriptor.value;
      descriptor.value = function(...args: any[]) {
        console.log(`Calling ${propertyKey} with ${args}`);
        return originalMethod.apply(this, args);
      };
    }
    
    class Calculator {
      @log
      add(a: number, b: number) { return a + b; }
    }
  • 作用:在不修改原代码的情况下,扩展类、方法、属性的功能。

3. 如何处理可选链(Optional Chaining)和空值合并(Nullish Coalescing)?

  • 可选链obj?.propobj?.method(),避免 obj.propobjnull/undefined 报错。
  • 空值合并a ?? b,仅当 anull/undefined 时返回 b(区别于 ||)。

五、类型体操

1. 如何实现 Partial<T> 工具类型?

typescript

ini 复制代码
type Partial<T> = { [P in keyof T]?: T[P] }; // 将所有属性变为可选

2. 如何获取函数返回值类型?

typescript

typescript 复制代码
type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : never;

function fetchData(): Promise<string> { return Promise.resolve('data'); }
type Data = ReturnType<typeof fetchData>; // 类型为 Promise<string>

六、工程实践

1. tsconfig.json 中常见配置项的作用?

  • compilerOptions

    • target:指定 JS 版本(如 ESNext)。
    • module:指定模块系统(如 ESNext)。
    • strict:启用所有严格类型检查(如 noImplicitAny)。
    • outDir:编译输出目录。
    • moduleResolution:模块解析策略(如 Node)。

2. 如何处理第三方库的类型声明?

  • 安装官方类型包:npm install @types/xxx

  • 自定义类型声明文件(.d.ts):

    typescript

    typescript 复制代码
    declare module 'library-name' {
      export function func(): string;
    }

七、常见场景

1. 如何处理异步函数的返回类型?

typescript

csharp 复制代码
async function getData(): Promise<string> {
  return 'data';
}

// 使用时需考虑 Promise 包装
const result: string = await getData(); // 正确
const wrong: string = getData(); // 错误,类型为 Promise<string>

2. 如何在 React 中使用 TypeScript?

tsx

typescript 复制代码
import React, { FC, useState } from 'react';

interface Props {
  name: string;
  age?: number;
}

const App: FC<Props> = ({ name, age = 18 }) => {
  const [count, setCount] = useState<number>(0);
  return <div>Hello {name}, age {age}, count {count}</div>;
};

八、设计模式

1. 如何实现单例模式(Singleton)?

typescript

csharp 复制代码
class Singleton {
  private static instance: Singleton;
  private constructor() {} // 私有构造函数

  static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

九、性能优化

1. TypeScript 会影响运行时性能吗?

  • 编译后:TS 代码被编译为纯 JS,不会影响运行时性能。
  • 编译时 :类型检查会增加构建时间,但可通过 tsconfig.json 配置优化(如 incremental 选项)。

十、易错点

1. anyunknown 的区别?

  • any:禁用类型检查,可赋值给任意类型。
  • unknown:安全的 "未知类型",使用前必须先断言或类型守卫。

2. 如何避免类型断言滥用?

  • 优先使用类型守卫或泛型。
  • 仅在确定类型但编译器无法推断时使用断言(如 as Type)。
相关推荐
灵感__idea13 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript