TypeScript 面試問題-js教程-PHP中文網

TypeScript Interview Questions

問題 - 什麼是 TypeScript？

TypeScript 是 Javascript 的超集
新增靜態類型，從而提高程式碼品質並在運行前進行錯誤檢查。
它支援介面、枚舉、泛型等功能。
提供更好的錯誤檢查、增強的工具和改進的程式碼可讀性。

問題 - 什麼是顯式和隱式類型賦值？

顯式意味著寫出型別。就像下面這樣——

let firstName: string = "Rutvik";

登入後複製

隱式意味著 TypeScript 將根據值猜測類型。以下類型將被視為數字

let age = 23;

登入後複製

問題 - TypeScript 中any、unknown 和never 之間的差異？

any 的型別用來指派任意型別的變數。
即使重新指派其他類型也不會報錯。

let x: any = 10;
x = 'hello'; // No TypeScript error
console.log(x.toUpperCase()); // No TypeScript error

登入後複製

unknown類型比any類型更好，因為它要求我們在對值進行操作之前檢查類型。

let y: unknown = 10;
// Type assertion needed before using y as number
if (typeof y === 'number') {
    console.log(y.toFixed(2));
}

登入後複製

型別從不代表從未發生過的值。
它通常用於未正確傳回的函數的傳回語句。

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

登入後複製

問題 - 如何給出數組的類型？

對於輸入數組，我們需要給出以下類型。在下面的範例中，陣列只能包含字串類型。

const names: string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // no error

登入後複製

我們也可以使用 readonly 關鍵字，這可以防止陣列被更改。

const names: readonly string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // Error: Property 'push' does not exist on type 'readonly string[]'.

登入後複製

問題 - 什麼是數組中的類型推斷？

如果我們不給陣列指定任何類型，它會自動推斷類型。

const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error

登入後複製

問題 - 什麼是元組？

它是一個具有預先定義長度和類型的類型數組。
它在給出不同類型的混合數組類型時非常有用。

let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];

登入後複製

問題 - 什麼是只讀元組？

如果我們不將元組設定為唯讀，我們可以為定義的元組添加更多項，並且 TypeScript 不會拋出任何錯誤。

let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
//No safety in indexes from 3
ourTuple.push('This is wrong');

登入後複製

現在，為了解決這個問題，我們在類型之前使用關鍵字 readonly。

let ourTuple: readonly [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
// throws error as it is readonly
ourTuple.push('Coding Hero took a day off');

登入後複製

問題 - 如何給出物件的類型？

我們可以透過建立另一個類似結構的物件並指定物件中的鍵和鍵的類型來給出物件的類型。

interface CarTypes {
    brand: string,
    model: string,
    year: number
}


const car: CarTypes = {
  brand: "Tata",
  model: "Punch",
  year: 2020
};

登入後複製

問題 - 如何在物件中擁有可選屬性？

要提供可選屬性或鍵，我們需要添加 ?在他們的鑰匙之後。

let firstName: string = "Rutvik";

登入後複製

問題 - 解釋一下 TypeScript 中的枚舉？

枚舉是一種常數變數。您必須僅使用其中的值。
預設情況下這些值是數字，從 0 開始並以 1 遞增。
它們可以是數字或基於字串的

let age = 23;

登入後複製

let x: any = 10;
x = 'hello'; // No TypeScript error
console.log(x.toUpperCase()); // No TypeScript error

登入後複製

問題 - 什麼是型別別名？

它們允許使用自訂名稱定義類型，並且可用於所有基本類型（如字串和數字）以及複雜類型（如物件和陣列）。

let y: unknown = 10;
// Type assertion needed before using y as number
if (typeof y === 'number') {
    console.log(y.toFixed(2));
}

登入後複製

問題 - 什麼是介面？

介面類似型，但只能用於物件。

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

登入後複製

問題 - 如何擴充介面？

介面可以使用extend關鍵字進行擴充。

const names: string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // no error

登入後複製

問題 - 什麼是並集和交集類型？

聯盟：-

當屬性可以是多個值（例如字串或數字）時，使用聯合類型。
因此，它們也被稱為 OR，並且透過使用 | 來使用。象徵。

const names: readonly string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // Error: Property 'push' does not exist on type 'readonly string[]'.

登入後複製

交叉口：-

將多種類型合併為一個時使用交叉型別。
因此，它們也稱為 AND，並透過使用 & 符號來使用。

const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error

登入後複製

問題 - Typescript 中的函數是什麼？

如何在函數中給出返回類型？

我們可以在函數名稱後面加上 : 符號來給出函數的回傳類型。

let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];

登入後複製

如何在函數中指定參數類型？

我們可以透過在每個參數後面用 : 符號提及參數來給出參數的類型。

let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
//No safety in indexes from 3
ourTuple.push('This is wrong');

登入後複製

如何在函數中給出可選參數、預設參數和剩餘參數？

使用預設參數，我們可以將參數標記為可選。像這樣，其中 c 是可選的並用 ? 表示。

let ourTuple: readonly [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
// throws error as it is readonly
ourTuple.push('Coding Hero took a day off');

登入後複製

預設值（ES6 功能）位於型別之後。

interface CarTypes {
    brand: string,
    model: string,
    year: number
}


const car: CarTypes = {
  brand: "Tata",
  model: "Punch",
  year: 2020
};

登入後複製

其餘參數（ES6 函數）被賦予數組類型，因為它們轉換數組中傳遞的項目。

interface CarTypes {
    brand: string,
    model: string,
    year?: number
}

const car: CarTypes = {
  brand: "Tata",
  model: "Punch"
};

登入後複製

問題 - TypeScript 中的轉換是什麼？

強制轉換是覆蓋變數類型的過程。
就像下面的範例一樣，類型未知，但在與 as 關鍵字一起使用時將其設為字串。

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}
console.log(Direction.Up); // 1
console.log(Direction.Down); // 2

登入後複製

我們也可以用來代替 as。兩者的意思是一樣的。

let firstName: string = "Rutvik";

登入後複製

問題 - TypeScript 中的泛型是什麼？

Typeascript 中的泛型可讓您建立可以處理多種資料類型的可重複使用元件或函數。

let age = 23;

登入後複製

問題 - Typescript 中的實用程式類型？

TypeScript 提供實用型別來簡化常見型別轉換。
這些類型使物件和介面類型的操作和互動變得更加容易。
以下是一些常用實用程式類型的細分：

1. 部分

使 T 類型的所有屬性可選。
用例：當您想要建立一個只需要某些屬性的物件。

let x: any = 10;
x = 'hello'; // No TypeScript error
console.log(x.toUpperCase()); // No TypeScript error

登入後複製

2. 必填

使 T 類型的所有屬性成為必需。
用例：當您想要強制所有屬性必須存在時。

let y: unknown = 10;
// Type assertion needed before using y as number
if (typeof y === 'number') {
    console.log(y.toFixed(2));
}

登入後複製

3.只讀

使 T 類型的所有屬性只讀。
用例：確保物件的屬性無法被修改。

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

登入後複製

4. 選擇

透過從類型 T 中選取一組屬性 K 來建立類型。
用例：當您只需要類型的特定屬性。

const names: string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // no error

登入後複製

5. 省略

透過從型別 T 中省略一組屬性 K 來建立型別。
用例：當您想要除特定屬性之外的所有屬性。

const names: readonly string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // Error: Property 'push' does not exist on type 'readonly string[]'.

登入後複製

6. 記錄

使用鍵 K 和型別 T 的值來建構一個型別。
用例：建立具有固定鍵和一致值類型的物件類型。

const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error

登入後複製

7. 排除

從型別 T 排除所有可指派給 U 的型別。
用例：過濾掉特定類型。

let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];

登入後複製

8. 萃取物

僅從類型 T 中提取可分配給 U 的類型。
用例：將類型縮小到特定子集。

let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
//No safety in indexes from 3
ourTuple.push('This is wrong');

登入後複製

9. 不可空

從型別 T 排除 null 和 undefined。
用例：確保值既不為 null 也不未定義。

let ourTuple: readonly [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
// throws error as it is readonly
ourTuple.push('Coding Hero took a day off');

登入後複製

10. 返回類型

推斷函數類型的回傳類型。
用例：捕獲和使用函數的回傳類型。

interface CarTypes {
    brand: string,
    model: string,
    year: number
}


const car: CarTypes = {
  brand: "Tata",
  model: "Punch",
  year: 2020
};

登入後複製

11. 實例類型

建構一個由建構函式型別 T 的實例型別所組成的型別。
用例：取得類別實例的類型。

interface CarTypes {
    brand: string,
    model: string,
    year?: number
}

const car: CarTypes = {
  brand: "Tata",
  model: "Punch"
};

登入後複製

十二、參數

提取函數類型的參數類型。
用例：重複使用函數的參數類型。

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}
console.log(Direction.Up); // 1
console.log(Direction.Down); // 2

登入後複製

以上是TypeScript 面試問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！