TypeScript面試題詳解

一、基礎語法

TypeScript是JavaScript的超集，在語法上進行了擴展。基礎語法是TypeScript入門的必備知識。以下是基礎語法中常見的面試題。

1、變數聲明

在TypeScript中，使用關鍵字`let`或`var`聲明變數。`let`聲明的變數不能重複聲明，也不能在聲明前使用；`var`聲明的變數可以重複聲明，同時聲明前使用時為`undefined`。

let a = 1;
var b = 2;

let a = 3; // 報錯
var b = 4; // 不報錯，b為4

console.log(c); // 報錯
var c = 5; // 不報錯

2、類型註解

TypeScript支持變數類型註解，即在聲明變數時指定變數的類型。類型註解可以提高代碼的可讀性和可維護性。

let str: string = "hello";
let num: number = 1;
let bool: boolean = true;
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 1];

function add(a: number, b: number): number {
  return a + b;
}

3、介面和類

TypeScript中的介面和類是面向對象編程的重要概念。介面定義了對象所需的屬性和方法，類定義了對象和相關操作的集合。

interface Person {
  name: string;
  age: number;
  sayHi(): void;
}

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

  sayHi() {
    console.log(`Hi, my name is ${this.name}, and I'm ${this.age} years old.`);
  }
}

二、進階語法

在TypeScript的進階語法中，有一些核心概念。不僅要理解它們的定義，還需要了解它們的實際應用。

1、泛型

泛型是TypeScript的高級特性之一。它可以讓我們編寫靈活、可重用的代碼。

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

let output1 = identity("hello");
let output2 = identity(1);

2、枚舉

枚舉是一種特殊類型，可以為一組數值賦予更易讀的名稱。它可以提高代碼的可讀性。

enum Color {
  Red,
  Green,
  Blue
}

let c: Color = Color.Green;
console.log(c); // 輸出1

3、命名空間

命名空間可以將一組相關的變數、介面、類等封裝到一起。它可以避免全局命名衝突，並提高代碼的可讀性和可維護性。

namespace Utility {
  export function log(message: string) {
    console.log(message);
  }
}

Utility.log("hello");

三、常用工具庫

在實際的TypeScript開發中，常常會用到第三方工具庫。以下是幾個常用工具庫及其應用。

1、lodash

lodash是一個實用的JavaScript工具庫，提供了很多常用函數的封裝，可以提升JavaScript的開發效率。

import * as _ from "lodash";

let arr = [1, 2, 3, 4, 5];
let chunkedArr = _.chunk(arr, 2);
console.log(chunkedArr); // 輸出[[1, 2], [3, 4], [5]]

2、axios

axios是一個基於Promise的HTTP客戶端，可用於瀏覽器和Node.js環境中的HTTP請求。

import axios from "axios";

axios.get("https://api.github.com/users/octocat").then(response => {
  console.log(response.data);
});

3、moment

moment是一個常用的日期處理工具庫，提供了強大的日期格式化和計算功能。

import moment from "moment";

let date = moment("2021-01-01");
console.log(date.format("YYYY年MM月DD日")); // 輸出2021年01月01日
console.log(date.add(1, "year").format("YYYY年MM月DD日")); // 輸出2022年01月01日