引言

TypeScript 是一種由微軟開發(fā)的開源、跨平臺的編程語言，它是 JavaScript 的超集，為 JavaScript 添加了靜態(tài)類型系統(tǒng)和其他高級功能。隨著 TypeScript 在前端開發(fā)領域的廣泛應用，掌握 TypeScript 已經(jīng)成為很多開發(fā)者必備的技能之一。本文將整理一系列常見的 TypeScript 面試題，幫助準備面試的開發(fā)者們復習和鞏固知識。

1. TypeScript 基礎

1.1 TypeScript 是什么？

• TypeScript 是一種靜態(tài)類型的、面向對象的編程語言，它可以編譯成純凈的 JavaScript 代碼。
• 它是 JavaScript 的超集，意味著任何有效的 JavaScript 代碼也是有效的 TypeScript 代碼。

1.2 TypeScript 和 JavaScript 有什么區(qū)別？

• TypeScript 添加了靜態(tài)類型系統(tǒng)，可以在編譯階段捕獲類型錯誤。
• TypeScript 支持類、接口、枚舉等面向對象編程概念。
• TypeScript 提供了更強大的工具支持，如自動完成、智能感知等功能。

1.3 如何安裝 TypeScript？

• 通過 npm 安裝 TypeScript：
• bash

• 深色版本

  npm install -g typescript

1.4 如何編譯 TypeScript？

• 使用 tsc 命令編譯 TypeScript 文件：

  深色版本

  tsc filename.ts

2. 類型與接口

2.1 TypeScript 中有哪些基本類型？

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

2.2 如何定義聯(lián)合類型和交叉類型？

• 聯(lián)合類型：使用 | 符號表示多種類型之一。

  深色版本

  let value: string | number;

• 交叉類型：使用 & 符號表示多個類型的組合。

  深色版本

  type Person = {
      name: string;
  };
  
  type Developer = {
      skill: string;
  };
  
  type DevPerson = Person & Developer;

2.3 接口和類型別名的區(qū)別是什么？

• 接口（Interface）用于描述對象的形狀，可以擴展和合并。

  深色版本

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

• 類型別名（Type Alias）用于給類型起別名，更加靈活。

  深色版本

  type Person = {
      name: string;
      age: number;
  };

2.4 如何實現(xiàn)泛型？

• 使用 <T> 定義泛型類型參數(shù)。

  深色版本

  function identity<T>(arg: T): T {
      return arg;
  }

3. 高級類型

3.1 如何定義只讀屬性？

• 使用 readonly 關鍵字定義不可修改的屬性。

  深色版本

  interface Person {
      readonly id: number;
      name: string;
  }

3.2 如何使用條件類型？

• 條件類型允許基于類型推斷的結果來選擇不同的類型。

  深色版本

  type TypeName<T> =
      T extends string ? "string" :
      T extends number ? "number" :
      T extends boolean ? "boolean" :
      "unknown";

3.3 如何使用映射類型？

• 映射類型允許基于現(xiàn)有類型創(chuàng)建新的類型。

  深色版本

  type Readonly<T> = {
      readonly [P in keyof T]: T[P];
  };

4. 類與模塊

4.1 如何定義類？

• 使用 class 關鍵字定義類。

  深色版本

  class Person {
      constructor(public name: string, public age: number) {}
      
      greet() {
          console.log(`Hello, my name is ${this.name}.`);
      }
  }

4.2 如何實現(xiàn)繼承？

• 使用 extends 關鍵字實現(xiàn)繼承。

  深色版本

  class Employee extends Person {
      constructor(name: string, age: number, public position: string) {
          super(name, age);
      }
      
      work() {
          console.log(`${this.name} is working.`);
      }
  }

4.3 如何使用模塊？

• 使用 export 和 import 關鍵字導入和導出模塊。

  深色版本

  // person.ts
  export class Person {
      constructor(public name: string, public age: number) {}
  }
  
  // main.ts
  import { Person } from './person';
  const person = new Person('Alice', 30);

5. 實用技巧

5.1 如何使用類型斷言？

• 類型斷言允許你在 TypeScript 中“告訴”編譯器某個值的類型。

  深色版本

  const value: any = 'hello';
  const strLength: number = (value as string).length;

5.2 如何使用類型保護？

• 使用 instanceof 關鍵字或自定義類型保護函數(shù)。

  深色版本

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

5.3 如何使用裝飾器？

• 裝飾器是一種特殊類型的聲明，可以用來修改類的行為。

  深色版本

  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;
      }
  }

6. 面向對象編程

6.1 如何使用抽象類？

• 使用 abstract 關鍵字定義抽象類。

  深色版本

  abstract class Animal {
      abstract makeSound(): void;
  }
  
  class Dog extends Animal {
      makeSound() {
          console.log('Woof!');
      }
  }

6.2 如何使用接口繼承？

• 使用 extends 關鍵字繼承接口。

  深色版本

  interface Shape {
      color: string;
  }
  
  interface Circle extends Shape {
      radius: number;
  }

7. TypeScript 與其他框架/庫的集成

7.1 如何在 React 中使用 TypeScript？

• 定義組件的 props 和 state 類型。

  深色版本

  interface Props {
      name: string;
  }
  
  interface State {
      count: number;
  }
  
  class Greeting extends React.Component<Props, State> {
      state = { count: 0 };
      
      render() {
          return (
              <div>
                  Hello, {this.props.name}!
                  Clicked {this.state.count} times
              </div>
          );
      }
  }

7.2 如何在 Angular 中使用 TypeScript？

• 使用 TypeScript 的類型系統(tǒng)來定義組件和服務。

  深色版本

  import { Component } from '@angular/core';
  
  @Component({
      selector: 'app-root',
      template: `
          <h1>{{ title }}</h1>
      `,
  })
  export class AppComponent {
      title = 'Angular App';
  }

8. 最佳實踐

8.1 如何避免類型錯誤？

• 使用嚴格的類型檢查。

  深色版本

  tsc --strict

• 使用 never 類型表示永遠不會發(fā)生的路徑。

  深色版本

  function throwError(message: string): never {
      throw new Error(message);
  }

8.2 如何編寫可維護的代碼？

• 使用接口和類型別名來定義清晰的數(shù)據(jù)結構。
• 遵循單一職責原則。
• 利用 TypeScript 的類型系統(tǒng)來減少運行時錯誤。

結論

掌握 TypeScript 的基礎知識和高級特性對于成為一名合格的前端開發(fā)者來說非常重要。本文匯總了一系列常見的 TypeScript 面試題，希望能夠幫助開發(fā)者們更好地準備面試，同時也加深對 TypeScript 的理解和應用能力。如果你有任何疑問或需要進一步的幫助，請隨時提問！

到此這篇關于一些常見的TypeScript面試題的文章就介紹到這了,更多相關TypeScript面試題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論