深入了解TypeScript中常用類型的使用

更新時間：2022年09月19日 09:43:16 作者：RadiumAg

javaScript??有三個經(jīng)常會使用到的原始類型：stirng，number,boolean?。每一個在Typescript?都有一個相對應(yīng)的類型。本文就來聊聊TypeScript中這些常用類型的使用，感興趣的可以了解一下

原始類型：string,number,boolean

javaScript? 有三個經(jīng)常會使用到的原始類型：stirng，number,boolean?。每一個在Typescript?都有一個相對應(yīng)的類型。正如你所期望的，你可以得到相同的名稱在javascript?中使用typeof?去操作這些類型對應(yīng)的值：

string代表的值，例如"Hello,world"。
number?代表的值，例如42。
boolean?代表的兩個值，true和false。

數(shù)組（Arrays）

若要指定類似[1,2,3]的數(shù)組類型，你可以使用number[]?語法，這個語法可以聲明任何類型的數(shù)組（e.g. string[]）?；蛟S你也看到過Array<number>?的這種相同含義寫法。

請注意[number]是元組（Tuples）;請移步到Tuple

Any類型

TypeScript也有一個特殊的類型----any?。任何時候，你不想因為類型問題而造成類型檢查報錯的時候，你都可以去使用它。當(dāng)你在一個值上使用?any?的時候，你可以在這個值上訪問任何屬性?（訪問的屬性也是any?類型）,像function一樣調(diào)用它，把任意類型的值都賦值給它。只要在合法的語法內(nèi)，可以做相當(dāng)多的事情：

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)你不想只是用寫一長串類型去使TypeScript?相信一行代碼時，any類型非常有用。

noImplicitAny

當(dāng)你不指定一個類型，并且TypeScript?無法從上下文推斷除類型的話，編譯器?一般會默認(rèn)推斷為any?。通常情況下，如果你需要避免?這種情況的話，因為any?不會類型檢查?，這就需要使用編譯器?上的配置noImplicitAny?去標(biāo)識任何隱藏的any?類型為錯誤（讓編譯器報錯）。

在變量上使用類型注釋

當(dāng)你使用const，var，let去聲明變量的時候，你可以選擇直接指定類型：

let myName: string = "Alice";

TypeScript?不使用"左側(cè)類型（types on the left）"的風(fēng)格，就像int x = 0；類型注釋往往放在被注釋的對象后面。

然而通常情況下，這并不是必要的。盡可能的情況下，TypeScirpt會在你的代碼上嘗試自動推斷類型。舉個例子，變量的類型會被基于它的初始化類型進行推斷：

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

在大多數(shù)情況下，你不需要刻意的去學(xué)習(xí)推斷規(guī)則，嘗試使用更少的類型注釋。

函數(shù)（Functions）

Functions?是JavaScript傳遞數(shù)據(jù)的主要工具。TypeScript?允許你指定function的輸入輸出類型。

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

當(dāng)你定義了一個function? ，你可以在function?的每個參數(shù)后面添加類型注釋，參數(shù)的類型定義在參數(shù)名稱后面：

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

當(dāng)參數(shù)添加了類型注釋?，調(diào)用function傳遞參數(shù)時，將會被檢查：

// Would be a runtime error if executed!
greet(42);

甚至你沒有在你的參數(shù)后面進行類型聲明，TypeScript仍然會檢查你傳遞的參數(shù)數(shù)量是否正確。

返回類型注釋（Return Type Annotations）

你也可以添加返回類型注釋? 。返回類型注釋出現(xiàn)在參數(shù)列表之后：

function getFavoriteNumber(): number {
  return 26;
}

很類似變量類型注釋?，你通常不需要顯式的添加一個返回類型注釋?，因為TypeScript?會基于function的return?語句，自動推導(dǎo)function?的返回類型。這個類型注解上述的類型注解的例子并沒有改變?nèi)魏螙|西。有一些代碼庫會為了文檔的目的顯式的返回一個類型，去防止意外的更改，或者只是個人的喜好。

之后，我們將看到更多關(guān)于上下文影響其類型的例子。

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

匿名函數(shù)有略微不同于函數(shù)聲明，當(dāng)一個函數(shù)出現(xiàn)在TypeScript可以明確的知道它怎么被調(diào)用的地方，那么它的參數(shù)會自動推到類型。

舉個例子：

// 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()); // 被string[]類型的數(shù)組調(diào)用，自動推導(dǎo)為string類型
 // 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()); // 被string[]類型的數(shù)組調(diào)用，自動推導(dǎo)為string類型
 // Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
});

上述例子中，甚至參數(shù)s?都沒有類型注釋，TypeScript?使用了forEach?函數(shù)的類型，和數(shù)組的推導(dǎo)類型?一起明確了參數(shù)s的類型。

這種處理方式被稱為上下文類型，因為函數(shù)的上下文通知參數(shù)s應(yīng)該有什么類型。

類似于推到規(guī)則，你不需要特別學(xué)習(xí)它是怎么發(fā)生的。但是需要明白這種情況下，它會發(fā)生，這樣可以幫助你確認(rèn)什么時候不需要類型注解

對象類型（Object Types）

作為原始類型的一部分，你最經(jīng)常遇到的類型是對象類型（Object Type），JavaScript中有屬性的值幾乎都對應(yīng)了它！我們可以簡單的去列出對象的屬性和屬性的類型去定義對象類型（Object Type）

舉個例子，函數(shù)攜帶了一個坐標(biāo)對象作為參數(shù)：

// 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 });

上面的例子中，我們聲明了擁有兩個number?類型的屬性的參數(shù)，屬性是x和y?。你可以使用,?或者;(推薦)?去分割屬性。并且最后一個分隔符是可選的。

每個屬性的類型部分也是可選的?。如果你不顯式?指定一個類型，它就會被假定為any。

可選屬性（Options Properties）

對象類型也可以指定他們的某些屬性是可選的（optional）?，使用`可選時`，需要在屬性名稱后面加?符號：

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

在javaScript?中，如果你訪問一個不存在的屬性，它會返回一個undefined?而不是拋出錯誤?。如此，當(dāng)你訪問可選屬性?之前，你必須檢查它是否是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)允許你使用各種各樣的運算符從現(xiàn)有類型去創(chuàng)建一個新類型?，F(xiàn)在讓我們來寫一些新類型。是時候開始用一種有趣的方式去組合他們。

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

第一種組合方式是聯(lián)合類型。一個聯(lián)合類型由多個類型組織而成，代表值是這些類型中任意的一個。我們引用每個類型作為聯(lián)合類型的成員。

讓我們寫一個可以操作string?或者number類型的函數(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'.

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

去匹配聯(lián)合類型的值是非常容易的----就是簡單的提供聯(lián)合類型中的一個。如果你有一個聯(lián)合類型，你將如何使用它。

TypeScript?只允許使用對聯(lián)合類型的每個成員都有效的操作。舉個例子，如果你有一個string | number?的聯(lián)合類型，那你不能使用只有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)合類型（narrow the union with code ）?，和你在javaScript?中不使用類型注釋一樣。當(dāng)TypeScript可以根據(jù)代碼結(jié)構(gòu)推斷更具體的類型時，就會發(fā)生收縮。

舉個例子，TypeScript?知道只有string?的值typeof?的值才是"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);
  }
}

另一個例子是使用函數(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[]?類型，那它在else?中必定是string類型。

又是你會遇到一個成員擁有公共方法的聯(lián)合類型。舉個例子。數(shù)組和字符串這兩個都勇敢又slice方法。如果聯(lián)合類型中的每個成員都有相同的方法，那你可以在不使用收縮（narrowing）的情況下使用這個使用這個屬性：

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

聯(lián)合屬性擁有交集（intersection）是有點迷惑的。這不是偶然-這個名稱`unio` 來自類型導(dǎo)論。聯(lián)合類型number | string是由每個類型的并集組成。請注意，給定了兩個集合，每個集合都有相應(yīng)的實現(xiàn)。只有這些交集的實現(xiàn)才適用于集合本身的并集。例如，如果我們有一個房間里的高個子戴著帽子，另一個房間里的講西班牙語的人戴著帽子，把這兩個房間結(jié)合起來，我們對每個人的唯一了解就是他們一定戴著帽子。

類型別名（Type Aliases）

我們一般是使用對象類型（object types）和聯(lián)合類型都是直接他們寫成類型注解。這非常方便。但是常見的情況是，不止一次地使用同一個類型，并通過一個名稱引用它。

一個類型別名準(zhǔn)確的來說，就是一個名稱代表了任何類型。類型別名的語法是：

type Point = {
  x: number;
  y: number;
};
 
// Exactly the same as the earlier example
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

使用類型別名的一般方式是給任意類型一個名稱，就像一個對象類型。舉個例子，類型別名可以給聯(lián)合類型命名：

type ID = number | string;

請注意別名只是別名----你不能使用類型別名來創(chuàng)建統(tǒng)一類型的不同版本。從其他方面來說，這個代碼或許看起來像不合法的，但是對于TypeScript來說，它是沒有任何問題的，因為這兩個別名都是相同的類型：

type UserInputSanitizedString = string;
 
function sanitizeInput(str: string): UserInputSanitizedString {
  return sanitize(str);
}
 
// Create a sanitized input
let userInput = sanitizeInput(getInput());
 
// Can still be re-assigned with a string though
userInput = "new input";

接口（Interfaces）

interface是聲明對象類型的另一種方式：

interface Point {
  x: number;
  y: number;
}
 
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

就像我們使用之前提到的類型別名，這個例子就像我們使用了匿名對象類型一樣。TypeScript? 僅僅關(guān)心我們傳輸?shù)闹档慕Y(jié)構(gòu)，它只是關(guān)注它期望的有的屬性。僅關(guān)注類型的結(jié)構(gòu)和功能是我們將TypeScript稱為結(jié)構(gòu)化類型系統(tǒng)的原因。

類型別名和接口的不同（Differences Between Type Aliases and Interfaces）

類型別名和接口非常的類似，并且很多時候你可以自由的去使用它們。大多數(shù)interface的特性在type中也是起作用的，關(guān)鍵區(qū)別在于，類型不能重新打開以添加新屬性，而接口總是可擴展的。

// Extending an interface
interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear = getBear() 
bear.name
bear.honey





// Extending a type via intersections
type Animal = {
  name: string
}

type Bear = Animal & { 
  honey: boolean 
}

const bear = getBear();
bear.name;
bear.honey;

// Adding new fields to an existing interface
interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});





// A type cannot be changed after being created
type Window = {
  title: string
}

type Window = {
  ts: TypeScriptAPI
}

 // Error: Duplicate identifier 'Window'.

在之后你將學(xué)習(xí)這些概念，所以現(xiàn)在不用擔(dān)心你不明白。

類型斷言（Type Assertions）

有時您會有 TypeScript 無法知道的值類型的信息。

舉個例子，如果你使用了document.getElementById，TypeScript?僅僅知道它會返回HTMLElement?類型中的一個，但是你或許知道你的頁面擁有一個給了ID的HTMLCanvasElement。

在這種情況下，你可以使用一個類型斷言（type assertions）去指定一個更明確的類型：

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

作為類型斷言，類型斷言會被編譯器移除不會在運行時影響你的代碼行為。你可以使用尖括號語法（angle-bracket）：

const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");

注意：因為類型斷言會在編譯時移除，所以類型斷言沒有運行時檢查。如果類型斷言是錯誤的，則不會產(chǎn)生異?；騨ull。

TypeScript只允許類型斷言往更寬泛的類型或者更窄的類型轉(zhuǎn)換。這個規(guī)則可以防止不可能的強迫行為，比如：

const x = "hello" as number;
// Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

這里舉個例子：

type Bob = {
  weight: number;
};

type Lucy = {
  weight: number;
  height: number;
};

type John = {};

const humanA: Bob = { weight: 0 };

const humanB = humanA as Lucy;  // 對于Bob來說，Lucy更寬
const humanC = humanA as John;  // 對于Bob來說，John更窄

字面量類型（Literal Types）

除了常規(guī)類型string和number?類型之外，我們可以在類型韋志中引用特定的字符串和數(shù)字。

考慮這個問題的一種方法是考慮javaScript是如何以不同的方式聲明變量的。var和let?這兩個都允許改變保存在變量中的值，但是const?不是。這個反映了TypeScript是如何為字面量創(chuàng)建類型的。

let changingString = "Hello World";
changingString = "Olá Mundo"; // 類型是string
// Because `changingString` can represent any possible string, that
// is how TypeScript describes it in the type system

 
const constantString = "Hello World"; //類型是 "Hello World"
// Because `constantString` can only represent 1 possible string, it
// has a literal type representation
constantString;

文字類型本身并不十分有價值：

let x: "hello" = "hello";
// OK
x = "hello";
// ...
x = "howdy";
// Type '"howdy"' is not assignable to type '"hello"'.

這沒有太多的作用讓變量只有一個值。

但是字面量結(jié)合聯(lián)合類型，就能體現(xiàn)出一個非常有用的概念----舉個例子，函數(shù)僅接受一個特定的已知值：

function printText(s: string, alignment: "left" | "right" | "center") {
  // ...
}
printText("Hello, world", "left");
printText("G'day, mate", "centre");
// Argument of type '"centre"' is not assignable to parameter of type '"left" | "right" | "center"'.

數(shù)字的字面量類型以相同的方式工作：

function compare(a: string, b: string): -1 | 0 | 1 {
  return a === b ? 0 : a > b ? 1 : -1;
}

當(dāng)然，你可以和不是字面量的類型結(jié)合使用：

nterface Options {
  width: number;
}
// 參數(shù)和不是字面量的類型結(jié)合使用
function configure(x: Options | "auto") {
  // ...
}
configure({ width: 100 });
configure("auto");
configure("automatic");
// Argument of type '"automatic"' is not assignable to parameter of type 'Options | "auto"'.

還有很多其它的字面量類型：boolean? 字面量。boolean?字面量類型只有兩種值，就如你所猜測的一樣。boolean?的兩種值是true和false?。類型boolean?他本身實際上也是true | false的別名。

字面量推導(dǎo)（Literal Inference）

當(dāng)你組織一個對象變量的時候，TypeScript會自動假設(shè)這個對象的屬性稍后可能更改值。例如，如果你的代碼像這樣：

const obj = { counter: 0 };
if (someCondition) {
  obj.counter = 1;
}

TypeScript?并沒有認(rèn)為先前為0的字段賦值為1是一個錯誤。而是告訴obj.counte?r必須是number?類型，不是0?，因為這個類型的變量確定可以讀和寫。

相同的應(yīng)用在string類型上：

const req = { url: "https://example.com", method: "GET" };
handleRequest(req.url, req.method);
// Argument of type 'string' is not assignable to parameter of type '"GET" | "POST"'.

在上述例子當(dāng)中req.method?被推導(dǎo)為string，而不是"GET"?類型。因為代碼可以在req?的創(chuàng)建和handleRequest?的調(diào)用之間進行計算，后者可以為req.method?分配一個新的字符串，比如“GUESS”，TypeScript認(rèn)為這是一個錯誤。

這里有兩種方式去解決這個問題：

可以改變推到結(jié)果通過添加一個類型斷言：

// Change 1:
const req = { url: "https://example.com", method: "GET" as "GET" };
// Change 2
handleRequest(req.url, req.method as "GET");

Change 1 代表“打算req.method一直為字面量類型"GET?"”，防止之后被篡改。Change2代表”你確認(rèn)req.method的值為"GET"“。

你可以使用 as const 來覆蓋實體對象來變成字面量類型：

const req = { url: "https://example.com", method: "GET" } as const;
handleRequest(req.url, req.method);

as const 后綴就像const。但是對于類型系統(tǒng)來說，會確保所有的屬性被賦予字面量類型?來代替一般的string或者number類型。

null? 和 undefined

JavaScript?擁有兩個原始的類型用來表明未初始化的值：null和undefined。

TypeScript?有兩個相對應(yīng)的并且相同名稱的變量。這兩個類型的行為取決于是否打開了strictNullChecks選項

枚舉（Enums）

枚舉是由 TypeScript? 添加到 JavaScript? 中的一個特性，它允許描述一個值，該值可以是一組可能的命名常量中的一個。與大多數(shù) TypeScript? 特性不同，這不是對 JavaScript? 的類型級別添加，而是添加到語言和運行時中。因此，您應(yīng)該知道這個特性的存在，但是除非您確定，否則可能不要使用它。

不太常見的原始類型（Less Common Primitives）

值得一提的是類型系統(tǒng)中還有JavaScript中剩余的一些對應(yīng)的類型。這里就不深入了解了。

bigint

在ES2020中，JavaScript中用來表示非常大的整數(shù)的原始類型BigInt：

// Creating a bigint via the BigInt function
const oneHundred: bigint = BigInt(100);
 
// Creating a BigInt via the literal syntax
const anotherHundred: bigint = 100n;

symbol

在JavaScript用來創(chuàng)建全局唯一的引用的函數(shù)Symbol()：

// Creating a bigint via the BigInt function
const oneHundred: bigint = BigInt(100);
 
// Creating a BigInt via the literal syntax
const anotherHundred: bigint = 100n;

到此這篇關(guān)于深入了解TypeScript中常用類型的使用的文章就介紹到這了,更多相關(guān)TypeScript常用類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: