TypeScript 的內建函數
本文將介紹 TypeScript 中的內建函數。
YouTube Video
TypeScript 的內建函數
TypeScript 的內建函數是方便的函數，可用於簡潔地執行日常操作。這些是標準的 JavaScript 函數，增加了類型安全，在使用 TypeScript 編碼時特別有用。在這裡，我們將詳細介紹一些重要的內建函數、它們的使用以及類型規範。
什麼是內建函數？
TypeScript 的內建函數基於標準的 JavaScript 函數。應用 TypeScript 的類型系統可以增強類型檢查和自動補全功能。主要的函數包括以下幾種：。
parseInt()parseFloat()isNaN()isFinite()Number()String()Array()Array.isArray()eval()encodeURI()decodeURI()setTimeout()setInterval()
這些函數在 TypeScript 項目中被廣泛使用，用於簡潔的數據轉換和評估。
parseInt()
parseInt() 是一個用於將字串轉換為整數的函數。您可以將進制（如二進制、十進制）指定為第二個參數。在 TypeScript 中，您可以像下面這樣指定類型：。
1function stringToInt(value: string, radix: number = 10): number {
2 const result: number = parseInt(value, radix);
3 if (isNaN(result)) {
4 throw new Error('Invalid number format');
5 }
6 return result;
7}
8
9console.log(stringToInt("42")); // 42
10console.log(stringToInt("101010", 2)); // 42 (converted from binary)
- 指定輸入是一個字串，使用
value: string - 返回值明確指定為
number類型。
parseFloat()
parseFloat() 是一個用於將字符串轉換為浮點數的函數。
1function stringToFloat(value: string): number {
2 const result: number = parseFloat(value);
3 if (isNaN(result)) {
4 throw new Error('Invalid number format');
5 }
6 return result;
7}
8
9console.log(stringToFloat("3.14")); // 3.14
10console.log(stringToFloat("2.71828")); // 2.71828
parseFloat()可以正確解析包含小數點的數字。- 通過指定類型，如果輸入不是數字，您可以在類型檢查時收到警告。
isNaN()
isNaN() 是一個用於判斷給定值是否為 NaN（非數字）的函數。TypeScript 中的使用範例如下：。
1function checkNaN(value: unknown): boolean {
2 return isNaN(Number(value));
3}
4
5console.log(checkNaN("hello")); // true
6console.log(checkNaN(123)); // false
unknown類型是一種可以接受任意類型的通用類型。- 使用
Number()函數將其轉換為一個數字，並檢查結果是否為NaN。
isFinite()
isFinite() 用於判斷一個值是否是有限值。
1function isValueFinite(value: unknown): boolean {
2 return isFinite(Number(value));
3}
4
5console.log(isValueFinite("100")); // true
6console.log(isValueFinite(Infinity)); // false
- 該函數還使用
Number()在判斷之前將值轉換為數字。
Number()
Number() 函數將字符串或布林值轉換為數字。
1function convertToNumber(value: string | boolean): number {
2 return Number(value);
3}
4
5console.log(convertToNumber("42")); // 42
6console.log(convertToNumber(true)); // 1
- 在此範例中，使用聯合類型
string | boolean指定參數是字串或布林值之一。
String()
String() 函式將數字或布林值轉換為字串。
1function convertToString(value: number | boolean): string {
2 return String(value);
3}
4
5console.log(convertToString(123)); // "123"
6console.log(convertToString(false)); // "false"
- 在此範例中，建立了一個接受
number | boolean類型聯合並將結果轉換為字串的函式。
Array()
Array() 函數用於創建一個新數組。此外，它提供了許多實用的方法，可用於從現有數組中創建子數組或提取特定元素。
1function createArray(): Array<number> {
2 return Array(1, 2, 3, 4, 5); // 新しい配列を作成
3}
4
5function getSubArray(array: Array<number>): Array<number> {
6 return array.slice(1, 4); // サブ配列を作成
7}
8
9const numbers = createArray();
10console.log(numbers); // [1, 2, 3, 4, 5]
11
12const subArray = getSubArray(numbers);
13console.log(subArray); // [2, 3, 4]
- 此示例展示了如何使用
Array()函數創建一個新數組，以及如何使用slice()方法創建子數組。
Array.isArray()
Array.isArray() 判斷給定的值是否為陣列。
1function checkArray(value: unknown): boolean {
2 return Array.isArray(value);
3}
4
5console.log(checkArray([1, 2, 3])); // true
6console.log(checkArray("Not an array")); // false
- 使用
unknown類型，我們同時接受任何類型並檢查是否為陣列。
eval()
eval() 函數將字符串作為表達式進行評估並返回結果。然而，由於安全性和性能風險，建議不要使用它。
1function evaluateExpression(expression: string): any {
2 return eval(expression);
3}
4
5console.log(evaluateExpression("2 + 3")); // 5
6console.log(evaluateExpression("'Hello ' + 'World!'")); // "Hello World!"
- 在此示例中，通過
eval評估了作為字符串提供的表達式，並輸出了結果。
encodeURI()
encodeURI() 函數對整個 URL 進行編碼並轉義某些字符。
1const uri = "https://example.com/page?name=John Doe&age=30";
2const encodedURI = encodeURI(uri);
3
4console.log(encodedURI); // "https://example.com/page?name=John%20Doe&age=30"
- 此示例將空格編碼為
%20，從而生成一個安全的 URL。
decodeURI()
decodeURI() 函數將已編碼的 URL 解碼回其原始格式。
1const encodedURI = "https://example.com/page?name=John%20Doe&age=30";
2const decodedURI = decodeURI(encodedURI);
3
4console.log(decodedURI); // "https://example.com/page?name=John Doe&age=30"
- 此示例將已編碼的 URL 字符串解碼回原始 URL。
setTimeout()
setTimeout() 函數在指定的延遲時間（以毫秒為單位）後執行指定的函數。
1setTimeout(() => {
2 console.log("Executed after 2 seconds");
3}, 2000);- 此示例在 2 秒後顯示一條消息。
setInterval()
setInterval() 函數以指定的間隔時間（以毫秒為單位）重複執行指定的函數。
1let count = 0;
2const intervalId = setInterval(() => {
3 count++;
4 console.log(`Interval executed ${count} time(s)`);
5 if (count === 3) {
6 clearInterval(intervalId); // Stops the interval after 3 executions
7 }
8}, 1000);- 此示例以一秒的間隔顯示一條消息，並在執行三次後停止。
結論
TypeScript 的內建函式透過為標準 JavaScript 函式添加類型安全性來實現更安全且更高效的編碼。這些函式簡化了日常的程式設計任務，並提高了程式碼的可讀性和可維護性。每個函式都依其目的正確使用，並通過指定類型提前檢測錯誤，在提升開發過程的可靠性方面發揮了重要作用。
透過使用 TypeScript，開發可以利用靜態類型的優勢，同時保有 JavaScript 的靈活性。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。