TypeScript 面试题汇总

引言

TypeScript 是一种由微软开发的开源、跨平台的编程语言,它是 JavaScript 的超集,为 JavaScript 添加了静态类型系统和其他高级功能。随着 TypeScript 在前端开发领域的广泛应用,掌握 TypeScript 已经成为很多开发者必备的技能之一。本文将整理一系列常见的 TypeScript 面试题,帮助准备面试的开发者们复习和巩固知识。

1. TypeScript 基础

1.1 TypeScript 是什么?

  • TypeScript 是一种静态类型的、面向对象的编程语言,它可以编译成纯净的 JavaScript 代码。
  • 它是 JavaScript 的超集,意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。

1.2 TypeScript 和 JavaScript 有什么区别?

  • TypeScript 添加了静态类型系统,可以在编译阶段捕获类型错误。
  • TypeScript 支持类、接口、枚举等面向对象编程概念。
  • TypeScript 提供了更强大的工具支持,如自动完成、智能感知等功能。

1.3 如何安装 TypeScript?

  • 通过 npm 安装 TypeScript:

  • bash

  • 深色版本

    复制代码
    1npm install -g typescript

1.4 如何编译 TypeScript?

  • 使用 tsc 命令编译 TypeScript 文件:

    复制代码

    bash

    深色版本

    复制代码
    1tsc filename.ts

2. 类型与接口

2.1 TypeScript 中有哪些基本类型?

  • string, number, boolean, null, undefined, void, never, any, unknown

2.2 如何定义联合类型和交叉类型?

  • 联合类型 :使用 | 符号表示多种类型之一。

    复制代码

    typescript

    深色版本

    复制代码
    1let value: string | number;
  • 交叉类型 :使用 & 符号表示多个类型的组合。

    复制代码

    typescript

    深色版本

    复制代码
    1type Person = {
    2    name: string;
    3};
    4
    5type Developer = {
    6    skill: string;
    7};
    8
    9type DevPerson = Person & Developer;

2.3 接口和类型别名的区别是什么?

  • 接口 (Interface)用于描述对象的形状,可以扩展和合并。

    复制代码

    typescript

    深色版本

    复制代码
    1interface Person {
    2    name: string;
    3    age: number;
    4}
  • 类型别名 (Type Alias)用于给类型起别名,更加灵活。

    复制代码

    typescript

    深色版本

    复制代码
    1type Person = {
    2    name: string;
    3    age: number;
    4};

2.4 如何实现泛型?

  • 使用 <T> 定义泛型类型参数。

    复制代码

    typescript

    深色版本

    复制代码
    1function identity<T>(arg: T): T {
    2    return arg;
    3}

3. 高级类型

3.1 如何定义只读属性?

  • 使用 readonly 关键字定义不可修改的属性。

    复制代码

    typescript

    深色版本

    复制代码
    1interface Person {
    2    readonly id: number;
    3    name: string;
    4}

3.2 如何使用条件类型?

  • 条件类型允许基于类型推断的结果来选择不同的类型。

    复制代码

    typescript

    深色版本

    复制代码
    1type TypeName<T> =
    2    T extends string ? "string" :
    3    T extends number ? "number" :
    4    T extends boolean ? "boolean" :
    5    "unknown";

3.3 如何使用映射类型?

  • 映射类型允许基于现有类型创建新的类型。

    复制代码

    typescript

    深色版本

    复制代码
    1type Readonly<T> = {
    2    readonly [P in keyof T]: T[P];
    3};

4. 类与模块

4.1 如何定义类?

  • 使用 class 关键字定义类。

    复制代码

    typescript

    深色版本

    复制代码
    1class Person {
    2    constructor(public name: string, public age: number) {}
    3    
    4    greet() {
    5        console.log(`Hello, my name is ${this.name}.`);
    6    }
    7}

4.2 如何实现继承?

  • 使用 extends 关键字实现继承。

    复制代码

    typescript

    深色版本

    复制代码
    1class Employee extends Person {
    2    constructor(name: string, age: number, public position: string) {
    3        super(name, age);
    4    }
    5    
    6    work() {
    7        console.log(`${this.name} is working.`);
    8    }
    9}

4.3 如何使用模块?

  • 使用 exportimport 关键字导入和导出模块。

    复制代码

    typescript

    深色版本

    复制代码
    1// person.ts
    2export class Person {
    3    constructor(public name: string, public age: number) {}
    4}
    5
    6// main.ts
    7import { Person } from './person';
    8const person = new Person('Alice', 30);

5. 实用技巧

5.1 如何使用类型断言?

  • 类型断言允许你在 TypeScript 中"告诉"编译器某个值的类型。

    复制代码

    typescript

    深色版本

    复制代码
    1const value: any = 'hello';
    2const strLength: number = (value as string).length;

5.2 如何使用类型保护?

  • 使用 instanceof 关键字或自定义类型保护函数。

    复制代码

    typescript

    深色版本

    复制代码
    1function isString(value: any): value is string {
    2    return typeof value === 'string';
    3}

5.3 如何使用装饰器?

  • 装饰器是一种特殊类型的声明,可以用来修改类的行为。

    复制代码

    typescript

    深色版本

    复制代码
    1function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    2    const originalMethod = descriptor.value;
    3    descriptor.value = function (...args: any[]) {
    4        console.log(`Calling "${propertyKey}" with`, args);
    5        return originalMethod.apply(this, args);
    6    };
    7}
    8
    9class Calculator {
    10    @log
    11    add(a: number, b: number) {
    12        return a + b;
    13    }
    14}

6. 面向对象编程

6.1 如何使用抽象类?

  • 使用 abstract 关键字定义抽象类。

    复制代码

    typescript

    深色版本

    复制代码
    1abstract class Animal {
    2    abstract makeSound(): void;
    3}
    4
    5class Dog extends Animal {
    6    makeSound() {
    7        console.log('Woof!');
    8    }
    9}

6.2 如何使用接口继承?

  • 使用 extends 关键字继承接口。

    复制代码

    typescript

    深色版本

    复制代码
    1interface Shape {
    2    color: string;
    3}
    4
    5interface Circle extends Shape {
    6    radius: number;
    7}

7. TypeScript 与其他框架/库的集成

7.1 如何在 React 中使用 TypeScript?

  • 定义组件的 props 和 state 类型。

    复制代码

    typescript

    深色版本

    复制代码
    1interface Props {
    2    name: string;
    3}
    4
    5interface State {
    6    count: number;
    7}
    8
    9class Greeting extends React.Component<Props, State> {
    10    state = { count: 0 };
    11    
    12    render() {
    13        return (
    14            <div>
    15                Hello, {this.props.name}!
    16                Clicked {this.state.count} times
    17            </div>
    18        );
    19    }
    20}

7.2 如何在 Angular 中使用 TypeScript?

  • 使用 TypeScript 的类型系统来定义组件和服务。

    复制代码

    typescript

    深色版本

    复制代码
    1import { Component } from '@angular/core';
    2
    3@Component({
    4    selector: 'app-root',
    5    template: `
    6        <h1>{{ title }}</h1>
    7    `,
    8})
    9export class AppComponent {
    10    title = 'Angular App';
    11}

8. 最佳实践

8.1 如何避免类型错误?

  • 使用严格的类型检查。

    复制代码

    typescript

    深色版本

    复制代码
    1tsc --strict
  • 使用 never 类型表示永远不会发生的路径。

    复制代码

    typescript

    深色版本

    复制代码
    1function throwError(message: string): never {
    2    throw new Error(message);
    3}

8.2 如何编写可维护的代码?

  • 使用接口和类型别名来定义清晰的数据结构。
  • 遵循单一职责原则。
  • 利用 TypeScript 的类型系统来减少运行时错误。

结论

掌握 TypeScript 的基础知识和高级特性对于成为一名合格的前端开发者来说非常重要。本文汇总了一系列常见的 TypeScript 面试题,希望能够帮助开发者们更好地准备面试,同时也加深对 TypeScript 的理解和应用能力。如果你有任何疑问或需要进一步的帮助,请随时提问!

相关推荐
zhougl99614 分钟前
html处理Base文件流
linux·前端·html
花花鱼17 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_20 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)2 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法