一篇文章帶你過一遍 TypeScript

AlphaWallet 發布于2019-08-26 13:36 / 3553人閱讀

摘要：泛型通過在函數接口類變量名后使用定義。抽象類可以包括具體實現一個類只能繼承一個類，但是可以實現多個接口。該開源項目目前由社區進行維護。通常通過中的字段，或者聲明文件進行聲明。

TypeScript 是 Javascript 的一個超集，提高了代碼的可讀性和可維護性。Typescript 官網提供的文檔已經相當完善，但完整地看一遍需要一定的時間，本文試將 TypeScript 中要點提出，縮略為一文，用于瀏覽要點、快速復習。

1. 類型 1.1 原始類型定義

boolean/number/string/null/undefined

其中 null/undefined 是 TypeScript 中任何類型的子類型。

1.2 空值、任意值、枚舉、Never

void/any/enum/never

void 指空值，若用于變量，則該變量只能賦值為 null/undefined；若用于函數，則該函數返回值為空/null/undefined。

any 指任意值。TypeScript 中變量賦值后類型是無法改變的，但 any 類型的變量可以改變為任意值。（聲明變量且無法類型推論時默認為 any 類型）

enum 指枚舉類型，取值可以枚舉出來。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

never 指不存在的值的類型，例如異常，函數無限循環無法返回等。

1.3 數組類型定義

TypeScript 中數組類型有多種定義方式，羅列如下：

1.類型 + 方括號

let list: number[] = [1, 2, 3];

2.數組泛型 Array<元素類型>

let list: Array = [1, 2, 3];

3.元組 Tuple

表示一個已知元素數量和類型的數組

let x: [string, number] = ["1", 2]

4.接口定義類型

interface NumberArray {
  [index: number]: number;
}
let x: NumberArray = [1, 1, 2, 3, 5];

1.4 函數類型

TypeScript 中函數類型有多種定義方式，羅列如下：

1.函數聲明中類型定義

function add(x: number, y: number): number {
  return x + y;
}

2.函數表達式中類型定義

let myAdd = function(x: number, y: number): number {
  return x + y;
}

3.箭頭函數中類型定義

let myAdd = (x: number, y: number): number => {
  return x + y;
}

4.接口定義類型

interface Add {
  (x: number, y: number): number;
}
let myAdd: Add = function(num1, num2) {
  return num1 + num2;
}

1.5 對象類型

TypeScript 中對象類型有多種定義方式，羅列如下：

1.object

let obj: object = {test: 1};

2.接口定義類型

interface SquareConfig {
  color: string;
  width: number;
}
let newSquare: SquareConfig = {
  color: "white",
  width: 100
};

1.6 聯合類型

聯合類型表示值為多種類型中的一種，用 | 進行類型聯合

1.7 泛型

泛型指在定義函數、接口、類時，不預先指定類型，在使用時再指定。泛型通過在函數、接口、類變量名后使用 <> 定義。（類型斷言中 <> 位于變量名前）

function identity(arg: T): T {
    return arg;
}

identity("myString")

2. 類型操作 2.1 類型推論

在沒有指定類型時，Typescript 會根據類型推論推斷出類型。

// 推論類型為 number
let x = 1;

// 推論類型為 any
let y;

2.2 類型斷言

類型斷言指對變量指定一個比現在類型更明確的類型。

類型斷言有兩種形式。

1."尖括號"語法：

// 聲明 someValue
let someValue: any = "this is a string";

// 對 someValue 類型斷言，類型為 string，比原先 any 類型更明確
let strLength: number = (someValue).length;

2."as" 語法（在 tsx 中只能使用 as 語法，因為 jsx 中 <> 會和"尖括號"語法混淆）

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

2.3 類型別名

類型別名不會新建類型，是通過新建名字來引用已有類型。通過 type 進行別名定義。

type Name = string;
let x: Name = "1";

3. 類和接口 3.1 類

類的概念是 ES6 中提出的，類的本質是構造函數的語法糖，通過 class 來創建。

TypeScript 中提供了 public、private 和 protected 三種修飾符，分別代表屬性或方法是共有的、私有的、受保護的。

TypeScript 中 static 修飾符修飾屬性或方法，代表屬性或方法是靜態的，即無需實例化，可以直接通過類調用。

TypeScript 中 readonly 修飾符修飾屬性，代表屬性只讀，即初始化之后不可修改。

3.2 抽象類

抽象類指對類或類中部分方法進行抽象，作為其他類繼承的基類，不能直接實例化。派生類必須實現抽象類中的抽象方法。

通過 abstract 關鍵字定義抽象類和抽象類內部定義的抽象方法，extends 來繼承類。

abstract class Animal {
  // 必須在派生類中實現
  abstract makeSound(): void;
  // 無須在派生類中實現
  move(): void {
    console.log("roaming the earch...");
  }
}

class Dog extends Animal {
  makeSound (): void {
    console.log("barking");
  }
}

3.3 接口

接口和抽象類有些類似，接口是對屬性和方法的抽象，不能直接實例化。接口和抽象類的區別如下：

接口是 100% 的抽象，不能含有具體的實現。抽象類可以包括具體實現

一個類只能繼承一個類，但是可以實現多個接口。接口可以繼承接口、類。

接口通過 interface 定義，implements 實現。

interface ClockInterface {
  alert(): void;
}

class Clock implements ClockInterface {
  alert() {
    console.log("Clock alert");
  }
}

4. 其他 4.1 內置對象

TypeScript 根據 JavaScript 提供了相關的內置對象，如 Date、Document、HTMLElement、Event、NodeList 等。具體可參考定義文件。

4.2 聲明文件

以 npm 包為例，將第三方包安裝到 TypeScript 項目時，需要聲明文件，聲明該第三方包中導出內容的相關類型，這樣 TypeScript 才能進行編譯檢查。聲明文件以 .d.ts 結尾的文件，有以下3個來源：

1.@types
TypeScript 2.0 默認查看 ./node_modules/@types 文件夾，獲取模塊的類型定義。例如可以通過安裝 npm install --save-dev @types/node 獲取 node 類型相關聲明。該開源項目 DefinitelyTyped 目前由社區進行維護。

2.第三方包已有聲明文件
第三方包已有聲明文件，則不需要再額外安裝包，可以直接使用。通常通過 package.json 中的 types 字段，或者 index.d.ts 聲明文件進行聲明。

3.書寫聲明文件
當前面兩種方法都無效時，可以在項目中書寫聲明文件，如創建 types 目錄，用來管理聲明文件。聲明文件寫法可以參考 DefinitelyTyped 中相關示例，如下為其中一個示例：

// 聲明 createABigTriangle 方法
declare function createABigTriangle(gl: WebGLRenderingContext): void;

// 第三方庫是 commonjs 規范的，導出聲明使用 export= 這種語法
// 第三方庫是 ES6 規范的，導出聲明使用 export default 和 export 這種語法
export = createABigTriangle;

本文首發于個人博客：https://www.aquatalking.com/b...

（完）

GPU云服務器云服務器這篇文章手把手帶你閱讀Netty源碼【附一遍帶你學c帶你飛 TypeScript

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109155.html

STM32入門學習經驗總結

摘要：嚴格地說，應該是模仿實驗。為什么覺得無從下手，看資料沒有頭緒經驗總結看資料需要計劃耐心和速度這里所謂的資料包括書籍文檔。建議有報銷條件的同學自己設計一塊板子學習。無法報銷的同學，可以選購一款開發板學習。 STM32系列基于專為要求高性能、低成本、低功耗的嵌入式應用專門設計的ARMCortex...

biaoxiaoduan 2021-10-12 10:12 評論0 收藏0
vue + typescript 進階篇

摘要：進階篇本文是繼新項目起手式之后的進階踩坑配置，所以推薦先行閱讀前文完整閱讀完之后，基本可以順利在新項目中使用了另外特別注意不推薦在已有項目上強加，因寫法的組件跟之前的組件不兼容，若上的話需要修改之前寫的組件配置完整版可參考，若沒配置出來 vue + typescript 進階篇本文是繼 Vue + TypeScript 新項目起手式之后的進階+踩坑配置，所以推薦先行閱讀前文 ...

lemanli 2019-08-21 17:28 評論0 收藏0
【譯】使用TypeScript兩年后-值得嗎？

摘要：弄了一個持續更新的筆記，可以去看看，鏈接地址此篇文章的地址使用兩年后值得嗎基礎筆記的地址可以也可以。使用，你可以使用抽象類等功能。有關抽象類的更多信息支持，和方法，只讀屬性。弄了一個持續更新的github筆記，可以去看看，鏈接地址：Front-End-Basics 此篇文章的地址：使用TypeScript兩年后-值得嗎？基礎筆記的github地址：https://githu...

RyanQ 2019-08-23 16:56 評論0 收藏0
Deno 并不是下一代 Node.js

摘要：長文預警字，圖。開發并不是因為，也不是為了取代。不知道從官方介紹來看，可以認為它是下一代是如何腦補出來的。只是一個原型或實驗性產品。所以，不是要取代，也不是下一代，也不是要放棄重建生態。的目前是要擁抱瀏覽器生態。這幾天前端圈最火的事件莫過于 ry(Ryan Dahl) 的新項目 deno 了，很多 IT 新聞和媒體都用了標題：下一代 Node.js。這周末讀了一遍 deno 的源碼，...

mmy123456 2019-08-26 11:59 評論0 收藏0
小光光談前端

摘要：這個問題應該是百度或者知乎都能知道答案的，以上是自己親身學習的一些途徑方便少走一點彎路入門。問題1：前端的學習路線基礎的html，css，js，推薦慕課網免費課程:前端工程師路徑,極客學院免費課程:前端工程師路徑大概刷過就可以了，不用死記硬背某個知識點，css跟js還需要加深學習的，在實戰過程中不懂就去查文檔基礎的ps切圖能力慕課網ps基礎課程擁有自己的虛擬主機傳送...

canopus4u 2019-08-29 16:10 評論0 收藏0