TypeScript - any 型別

上一頁
下一頁

TypeScript 中的 any 型別是一種特殊的型別，可以表示任何值。它通常用於變數型別未知或尚未定義的情況。在將 JavaScript 程式碼轉換為 TypeScript 時，any 型別非常有用。

any 型別在傳統意義上並不是一種型別。它更像是一個佔位符，告訴 TypeScript 編譯器忽略特定變數、函式等的型別檢查。

可以表示任何值

使用 any 型別宣告的變數可以儲存任何資料型別的值 -

let x: any;
x = "Hello";
x = 23;
x = true;

這裡變數 x 使用 any 型別宣告。這允許我們將任何值（字串、數字、布林值等）賦予該變數。

當使用 typeof 運算子檢查時，any 型別變數的型別為 undefined -

let x: any;
console.log(typeof x) // undefined

編譯後，它將生成以下 JavaScript 程式碼 -

let x;
console.log(typeof x); // undefined

以上示例程式碼的輸出如下 -

undefined

示例

讓我們透過以下 TypeScript 示例瞭解 any 型別 -

let x: any;
console.log(typeof x);
x = "Hello";
console.log(typeof x);
x = 23;
console.log(typeof x);
x = true;
console.log(typeof x);

這裡變數宣告為 any 型別。然後用不同型別的值（字串、數字和布林值）對其進行賦值。

編譯後，它將生成以下 JavaScript 程式碼 -

let x;
console.log(typeof x);
x = "Hello";
console.log(typeof x);
x = 23;
console.log(typeof x);
x = true;
console.log(typeof x);

以上示例程式碼的輸出如下 -

undefined 
string 
number 
boolean

any 型別的函式引數

您還可以定義一個引數為 any 型別的函式 -

function func(para: any){
}

這裡函式 func 可以接受任何型別的引數 - 數字、字串、布林值等。

示例

讓我們舉個例子，

function greet(name: any): string{
   return `Hello Mr. ${name}`;
}
console.log(greet('Shahid'));
console.log(greet(123));

函式 greet() 定義了一個 any 型別的引數。因此它可以接受任何型別的引數（數字、字串等）。

我們呼叫了 greet() 函式，傳遞了字串和數字型別的兩個不同值。您可以注意到它對這兩種型別的引數都有效。

編譯後，以上 TypeScript 程式碼將生成以下 JavaScript 程式碼 -

function greet(name) {
    return `Hello Mr. ${name}`;
}
console.log(greet('Shahid'));
console.log(greet(123));

以上示例程式碼的輸出如下 -

Hello Mr. Shahid 
Hello Mr. 123

any 型別的物件

也可以定義 any 型別的物件。此類物件可以具有任何型別的屬性。讓我們舉個例子 -

const student: any = {
   name: "John Doe",
   age: 32,
   isEnrolled: true,
}

這裡 student 物件使用 any 宣告。它包含三個不同型別的屬性。

示例

嘗試以下示例，

const student: any = {
   name: "John Doe",
   age: 32,
   isEnrolled: true,
}
console.log(student.name);
console.log(student.age);
console.log(student.isEnrolled);

編譯後，它將生成以下 JavaScript 程式碼 -

const student = {
    name: "John Doe",
    age: 32,
    isEnrolled: true,
};
console.log(student.name);
console.log(student.age);
console.log(student.isEnrolled);

以上示例程式碼的輸出如下 -

John Doe
32 
true

為什麼要使用 any 型別？

使用 any 型別的一個原因是，當您處理未進行型別檢查的程式碼時。例如，如果您使用現有的 JavaScript 程式碼，則 any 型別在將 JavaScript 程式碼轉換為 TypeScript 時非常有用。如果您使用的是未用 TypeScript 編寫的第三方庫，則可能需要在 TypeScript 程式碼中對變數使用 any 型別。

使用 any 型別的另一個原因是，當您不確定值的型別是什麼時。例如，接受使用者輸入的函式可以使用 any 型別來處理來自使用者的任何型別的資料。

建議在新 TypeScript 程式碼中避免使用 any 型別。建議在使用 any 型別時要謹慎。如果您過於頻繁地使用 any 型別，您的程式碼將變得不太型別安全。

型別斷言

使用型別斷言縮小 any 變數的型別 -

let value: any = "hello world";
let lenStr: number = (value as string).length;
console.log(lenStr);

在以上程式碼中，變數 value 定義為 any 型別。然後將其縮小到字串型別。

編譯後，它將生成以下 JavaScript 程式碼 -

let value = "hello world";
let lenStr = value.length;
console.log(lenStr);

以上程式碼的輸出如下 -

11

注意

如果不謹慎使用 any 型別，可能會導致錯誤。

在以下示例中，我們嘗試訪問不存在的屬性 enrYear。這將導致執行時錯誤，因為我們已將 student 物件定義為 any 型別。請注意，它不會顯示編譯時錯誤。

const student: any = {
   name: "John Doe",
   age: 32,
   isEnrolled: true,
}
console.log(student.name);
console.log(student.age);
console.log(student.enrYear);

編譯後，它將生成以下 JavaScript 程式碼 -

const student = {
    name: "John Doe",
    age: 32,
    isEnrolled: true,
};
console.log(student.name);
console.log(student.age);
console.log(student.enrYear);

以上示例程式碼的輸出如下 -

John Doe 
32 
undefined

any vs. unknown

當使用 any 型別宣告變數時，您可以訪問其不存在的屬性。

示例：使用 any 宣告的變數

let user: any;
user.isEnrolled;

以上 TypeScript 程式碼在編譯時不會顯示任何錯誤。但它會引發以下執行時錯誤。

Cannot read properties of undefined (reading 'isEnrolled')

示例：使用 unknown 宣告的變數

let user:unknown;
user.isEnrolled;

以上程式碼將顯示以下編譯時錯誤 -

'user' is of type 'unknown'.
列印頁面
上一頁
下一頁
廣告