常見類型（Everyday Types）

類型可以出現(xiàn)在很多地方，不僅僅是在類型注解 (type annotations)中。我們不僅要學(xué)習(xí)類型本身，也要學(xué)習(xí)在什么地方使用這些類型產(chǎn)生新的結(jié)構(gòu)。

我們先復(fù)習(xí)下最基本和常見的類型，這些是構(gòu)建更復(fù)雜類型的基礎(chǔ)。

原始類型:

string，number 和 boolean（The primitives）

JavaScript 有三個(gè)非常常用的原始類型：string，number 和 boolean，每一個(gè)類型在 TypeScript 中都有對(duì)應(yīng)的類型。他們的名字跟你在 JavaScript 中使用 typeof 操作符得到的結(jié)果是一樣的。

• string 表示字符串，比如 "Hello, world"
• number 表示數(shù)字，比如 42，JavaScript 中沒有 int 或者 float，所有的數(shù)字，類型都是 number
• boolean 表示布爾值，其實(shí)也就兩個(gè)值： true 和 false

類型名 String ，Number 和 Boolean （首字母大寫）也是合法的，但它們是一些非常少見的特殊內(nèi)置類型。所以類型總是使用 string ，number 或者 boolean 。

數(shù)組（Array）

聲明一個(gè)類似于 [1, 2, 3] 的數(shù)組類型，你需要用到語(yǔ)法 number[]。這個(gè)語(yǔ)法可以適用于任何類型（舉個(gè)例子，string[] 表示一個(gè)字符串?dāng)?shù)組）。你也可能看到這種寫法 Array<number>，是一樣的。我們會(huì)在泛型章節(jié)為大家介紹 T<U> 語(yǔ)法。

any

TypeScript 有一個(gè)特殊的類型，any，當(dāng)你不希望一個(gè)值導(dǎo)致類型檢查錯(cuò)誤的時(shí)候，就可以設(shè)置為 any 。

當(dāng)一個(gè)值是 any 類型的時(shí)候，你可以獲取它的任意屬性 (也會(huì)被轉(zhuǎn)為 any 類型)，或者像函數(shù)一樣調(diào)用它，把它賦值給一個(gè)任意類型的值，或者把任意類型的值賦值給它，再或者是其他語(yǔ)法正確的操作，都可以：

let obj: any = { x: 0 };
// None of the following lines of code will throw compiler errors.
// Using `any` disables all further type checking, and it is assumed 
// you know the environment better than TypeScript.
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;

當(dāng)你不想寫一個(gè)長(zhǎng)長(zhǎng)的類型代碼，僅僅想讓 TypeScript 知道某段特定的代碼是沒有問題的，any 類型是很有用的。

noImplicitAny

如果你沒有指定一個(gè)類型，TypeScript 也不能從上下文推斷出它的類型，編譯器就會(huì)默認(rèn)設(shè)置為 any 類型。

如果你總是想避免這種情況，畢竟 TypeScript 對(duì) any 不做類型檢查，你可以開啟編譯項(xiàng) noImplicitAny，當(dāng)被隱式推斷為 any 時(shí)，TypeScript 就會(huì)報(bào)錯(cuò)。

變量上的類型注解（Type Annotations on Variables）

當(dāng)你使用 const、var 或 let 聲明一個(gè)變量時(shí)，你可以選擇性的添加一個(gè)類型注解，顯式指定變量的類型：

let myName: string = "Alice";

TypeScript 并不使用“在左邊進(jìn)行類型聲明”的形式，比如 int x = 0；類型注解往往跟在要被聲明類型的內(nèi)容后面。

不過大部分時(shí)候，這不是必須的。因?yàn)?TypeScript 會(huì)自動(dòng)推斷類型。舉個(gè)例子，變量的類型可以基于初始值進(jìn)行推斷：

// No type annotation needed -- 'myName' inferred as type 'string'
let myName = "Alice";

大部分時(shí)候，你不需要學(xué)習(xí)推斷的規(guī)則。如果你剛開始使用，嘗試盡可能少的使用類型注解。你也許會(huì)驚訝于，TypeScript 僅僅需要很少的內(nèi)容就可以完全理解將要發(fā)生的事情。

函數(shù)（Function）

函數(shù)是 JavaScript 傳遞數(shù)據(jù)的主要方法。TypeScript 允許你指定函數(shù)的輸入值和輸出值的類型。

參數(shù)類型注解（Parameter Type Annotations）

當(dāng)你聲明一個(gè)函數(shù)的時(shí)候，你可以在每個(gè)參數(shù)后面添加一個(gè)類型注解，聲明函數(shù)可以接受什么類型的參數(shù)。參數(shù)類型注解跟在參數(shù)名字后面：

// Parameter type annotation
function greet(name: string) {
  console.log("Hello, " + name.toUpperCase() + "!!");
}

當(dāng)參數(shù)有了類型注解的時(shí)候，TypeScript 便會(huì)檢查函數(shù)的實(shí)參：

// Would be a runtime error if executed!
greet(42);
// Argument of type 'number' is not assignable to parameter of type 'string'.

即便你對(duì)參數(shù)沒有做類型注解，TypeScript 依然會(huì)檢查傳入?yún)?shù)的數(shù)量是否正確

返回值類型注解（Return Type Annotations）

你也可以添加返回值的類型注解。返回值的類型注解跟在參數(shù)列表后面：

function getFavoriteNumber(): number {
  return 26;
}

跟變量類型注解一樣，你也不需要總是添加返回值類型注解，TypeScript 會(huì)基于它的 return 語(yǔ)句推斷函數(shù)的返回類型。像這個(gè)例子中，類型注解寫和沒寫都是一樣的，但一些代碼庫(kù)會(huì)顯式指定返回值的類型，可能是因?yàn)樾枰帉懳臋n，或者阻止意外修改，亦或者僅僅是個(gè)人喜好。

匿名函數(shù)（Anonymous Functions）

匿名函數(shù)有一點(diǎn)不同于函數(shù)聲明，當(dāng) TypeScript 知道一個(gè)匿名函數(shù)將被怎樣調(diào)用的時(shí)候，匿名函數(shù)的參數(shù)會(huì)被自動(dòng)的指定類型。

這是一個(gè)例子：

// No type annotations here, but TypeScript can spot the bug
const names = ["Alice", "Bob", "Eve"];
// Contextual typing for function
names.forEach(function (s) {
  console.log(s.toUppercase());
  // Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
});
// Contextual typing also applies to arrow functions
names.forEach((s) => {
  console.log(s.toUppercase());
  // Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
});

盡管參數(shù) s 并沒有添加類型注解，但 TypeScript 根據(jù) forEach 函數(shù)的類型，以及傳入的數(shù)組的類型，最后推斷出了 s 的類型。

這個(gè)過程被稱為上下文推斷（contextual typing），因?yàn)檎菑暮瘮?shù)出現(xiàn)的上下文中推斷出了它應(yīng)該有的類型。

跟推斷規(guī)則一樣，你也不需要學(xué)習(xí)它是如何發(fā)生的，只要知道，它確實(shí)存在并幫助你省掉某些并不需要的注解。后面，我們還會(huì)看到更多這樣的例子，了解一個(gè)值出現(xiàn)的上下文是如何影響它的類型的。

對(duì)象類型（Object Types）

除了原始類型，最常見的類型就是對(duì)象類型了。定義一個(gè)對(duì)象類型，我們只需要簡(jiǎn)單的列出它的屬性和對(duì)應(yīng)的類型。

舉個(gè)例子：

// The parameter's type annotation is an object type
function printCoord(pt: { x: number; y: number }) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

這里，我們給參數(shù)添加了一個(gè)類型，該類型有兩個(gè)屬性, x 和 y，兩個(gè)都是 number 類型。你可以使用 , 或者 ; 分開屬性，最后一個(gè)屬性的分隔符加不加都行。

每個(gè)屬性對(duì)應(yīng)的類型是可選的，如果你不指定，默認(rèn)使用 any 類型。

可選屬性（Optional Properties）

對(duì)象類型可以指定一些甚至所有的屬性為可選的，你只需要在屬性名后添加一個(gè) ? ：

function printName(obj: { first: string; last?: string }) {
  // ...
}
// Both OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

在 JavaScript 中，如果你獲取一個(gè)不存在的屬性，你會(huì)得到一個(gè) undefined 而不是一個(gè)運(yùn)行時(shí)錯(cuò)誤。因此，當(dāng)你獲取一個(gè)可選屬性時(shí)，你需要在使用它前，先檢查一下是否是 undefined。

function printName(obj: { first: string; last?: string }) {
  // Error - might crash if 'obj.last' wasn't provided!
  console.log(obj.last.toUpperCase());
  // Object is possibly 'undefined'.
  if (obj.last !== undefined) {
    // OK
    console.log(obj.last.toUpperCase());
  }
  // A safe alternative using modern JavaScript syntax:
  console.log(obj.last?.toUpperCase());
}

聯(lián)合類型（Union Types）

TypeScript 類型系統(tǒng)允許你使用一系列的操作符，基于已經(jīng)存在的類型構(gòu)建新的類型?，F(xiàn)在我們知道如何編寫一些基礎(chǔ)的類型了，是時(shí)候把它們組合在一起了。

定義一個(gè)聯(lián)合類型（Defining a Union Type）

第一種組合類型的方式是使用聯(lián)合類型，一個(gè)聯(lián)合類型是由兩個(gè)或者更多類型組成的類型，表示值可能是這些類型中的任意一個(gè)。這其中每個(gè)類型都是聯(lián)合類型的成員（members）。

讓我們寫一個(gè)函數(shù)，用來處理字符串或者數(shù)字：

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}
// OK
printId(101);
// OK
printId("202");
// Error
printId({ myID: 22342 });
// Argument of type '{ myID: number; }' is not assignable to parameter of type 'string | number'.
// Type '{ myID: number; }' is not assignable to type 'number'.

使用聯(lián)合類型（Working with Union Types）

提供一個(gè)符合聯(lián)合類型的值很容易，你只需要提供符合任意一個(gè)聯(lián)合成員類型的值即可。那么在你有了一個(gè)聯(lián)合類型的值后，你該怎樣使用它呢？

TypeScript 會(huì)要求你做的事情，必須對(duì)每個(gè)聯(lián)合的成員都是有效的。舉個(gè)例子，如果你有一個(gè)聯(lián)合類型 string | number , 你不能使用只存在 string 上的方法：

function printId(id: number | string) {
  console.log(id.toUpperCase());
    // Property 'toUpperCase' does not exist on type 'string | number'.
    // Property 'toUpperCase' does not exist on type 'number'.
}

解決方案是用代碼收窄聯(lián)合類型，就像你在 JavaScript 沒有類型注解那樣使用。當(dāng) TypeScript 可以根據(jù)代碼的結(jié)構(gòu)推斷出一個(gè)更加具體的類型時(shí)，類型收窄就會(huì)出現(xiàn)。

舉個(gè)例子，TypeScript 知道，對(duì)一個(gè) string 類型的值使用 typeof 會(huì)返回字符串 "string"：

function printId(id: number | string) {
  if (typeof id === "string") {
    // In this branch, id is of type 'string'
    console.log(id.toUpperCase());
  } else {
    // Here, id is of type 'number'
    console.log(id);
  }
}

再舉一個(gè)例子，使用函數(shù)，比如 Array.isArray:

function welcomePeople(x: string[] | string) {
  if (Array.isArray(x)) {
    // Here: 'x' is 'string[]'
    console.log("Hello, " + x.join(" and "));
  } else {
    // Here: 'x' is 'string'
    console.log("Welcome lone traveler " + x);
  }
}

注意在 else分支，我們并不需要做任何特殊的事情，如果 x 不是 string[]，那么它一定是 string .

有時(shí)候，如果聯(lián)合類型里的每個(gè)成員都有一個(gè)屬性，舉個(gè)例子，數(shù)字和字符串都有 slice 方法，你就可以直接使用這個(gè)屬性，而不用做類型收窄：

// Return type is inferred as number[] | string
function getFirstThree(x: number[] | string) {
  return x.slice(0, 3);
}

以上就是TypeScript常見類型及應(yīng)用示例講解的詳細(xì)內(nèi)容，更多關(guān)于TypeScript常見類型及應(yīng)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論