[學習筆記] TypeScript入門基礎

基礎語法

ts程序組成部分

模塊、函數、變量、語句和表達式、注釋

一些注意

- ts會忽略程序中的空格、制表符和換行符

- ts區分大小寫

- 分號可選，建議使用

- 注釋與js相同

- ts是一種面向對象的編程語言

基礎類型

ts包含的數據類型

any - 任意類型：聲明為any的變量可以賦予任意類型的值

number - 數字類型

string - 字符串類型

boolean - 布爾類型

元素類型[] - 數組類型

????let arr: number[] = [1, 2]

Array<元素類型> - 數組類型(使用數組泛型)?

????let arr: Array<number> = [1, 2]

[元素類型1, 元素類型2, ...] - 元組類型：元組類型用來表示已知元素數量和類型的數組，各元素的類型不必相同，但對應位置上但類型需要相同。

? ? let x: [string, number];

? ? x = ['string', 1];? ? // 正常運行

? ? x = [1, 'string'];? ? //? 報錯

enum - 枚舉：枚舉類型用于定義數值集合

? ? enum Color {Red, Green, Blue};

? ? let c: Color = Color.Blue;

? ? console.log(c);? ?// 2

void - void：用于標識方法返回值的類型，表示該方法沒有返回值

? ? function hello(): void {

? ? ? ? alert('Hello World!')

????}

null - null：表示對象值缺失

undefined - undefined：用于初始化變量為一個未定義的值

never - never：never是其他類型(包括null和undefined)的子類型，代表從不會出現的值

Any 類型

任意值是TypeScript針對編程時類型不明確的變量使用的一種數據類型，它常用于以下三種情況：

1 - 變量的值會動態改變時，比如來自用戶的輸入，任意值類型可以讓這些變量跳過編譯階段的類型檢查

~~2 - 改寫現有代碼時，任意值允許在編譯時可選擇地包含或移除類型檢查~~

3 - 定義存儲各種類型數據的數組時

Null 和Undefined

null

在JavaScript中null表示“什么都沒有”

在TypeScript中null時一個只有一個值的特殊類型，表示一個空對象引用。

用typeof檢測null返回是object。

undefined

在JavaScript中，undefined是一個已聲明但未賦值的變量。

Null和Undefined是其他任何類型(包括void)的子類型，可以賦值給其他類型，如數字類型，此時，賦值后的類型會變成null或undedined。

而在TypeScript中啟用嚴格的空校驗(--strictNullChecks)特性，就使得null和undefined只能被賦值給void或本身對應的類型。

never類型

never是其他類型的子類型，代表從不會出現的值。這意味著聲明為never類型的變量只能被never類型所賦值，在函數中它通常表現為拋出異常或無法執行到終止點(例如無限循環)

變量聲明

ts變量聲明

ts變量的命名規則與js變量的命名規則相同

變量不要使用name否則會與DOM中的全局window對象下的name屬性出現重名

ts是強類型語言，如果將不同的類型賦值給變量會編譯錯誤

類型斷言

類型斷言可以用來手動制定一個值的類型，即允許變量從一種類型更改為另一種類型。

類型推斷

當類型沒有給出時，TypeScript編譯器利用類型推斷來推斷類型。

如果由于缺乏聲明而不能推斷出類型，那么它的類型被視作默認的動態的any類型。

let num = 2;? ?// 類型推斷為 number

num = '2';? ?// 編譯錯誤

編譯錯誤原因：第一行代碼num的類型已被推斷為number了，不能再將字符型賦值給num。

變量作用域

全局作用域

類作用域 - 這個變量也可稱為字段。類變量聲明在一個類里，但在類的外面，該變量可以通過類的對象來訪問。類變量也可以是靜態的，靜態的變量可以通過類名直接訪問。

局部作用域

函數

函數返回值

function 函數名(): 返回值類型 {}

帶參數函數

function 函數名( 參數1: 參數1的類型, 參數2: 參數2的類型, ... ) {}

可選參數

function 函數名( 參數?: 參數類型 ) {} - 在形參后加上?，該參數即作為可選參數

默認參數

function 函數名( 參數: 參數類型 = 默認值 ) {}

剩余參數

當我們不知道要向函數傳入多少個參數時，可以使用剩余參數來定義。

function 函數名( ...參數數組: 數組類型 ) {}

Lambda函數（箭頭函數）

let 變量名 = (參數: 參數類型) => {}

參數可不指定類型，通過函數內來推斷參數類型

函數重載

重載就是方法名字相同，而參數不同，返回類型可以相同也可以不同。

每個重載的方法（或構造函數）都必須有一個獨一無二的參數類型列表。

* 如果參數類型不同，則參數類型應設置為any

* 如果參數數量不同，則可以將不同的參數設置為可選

TypeScript Number

Number 對象屬性

MAX_VALUE：可表示的最大的數，MAX_VALUE屬性值接近于 1.79E+308。大于MAX_VALUE的值代表“Infinity”

MIN_VALUE：可表示的最小的數，即最接近 0 的正整數(實際上不會變為 0 )，MIN_VALUE的值約為 5e-324，小于MIN_VALUE的值將會轉換為 0 。最大的負數是 -MIN_VALUE。

NaN：非數字值

NEGATIVE_INFINITY：負無窮大，溢出時的返回值。該值小于MIN_VALUE。

POSITIVE_INFINITY：正無窮大，溢出時的返回值。該值大于MAX_VALUE。

prototype：Number 對象的靜態屬性。可以向對象添加屬性和方法。

constructor：返回對創建此對象的Number函數的引用。

Number 對象方法

~~toExponential() ：把對象的值轉為指數計數法~~

toFixed() ：把數字轉換為字符串，并可指定小數點的位數

toLocaleString() ：把數字轉換為字符串，使用~~本地數字格式順序~~

toPrecision() : 把數字格式轉為指定的長度

toString() ：把數字轉換為字符串，使用指定的基數。數字的基數是2～36之間的整數。若省略該參數，則使用基數10.

valueOf() ：返回一個Number對象的原始數字值

TypeScript String

String 對象屬性

length

prototype

constructor

String 對象方法

localeCompare() - 用本地特定對順序來比較兩個字符串 - 相同返回0 不同返回-1

TypeScript Array(數組)

聲明數組的語法格式

let array_name [:datatype];? ?// 聲明

array_name = [val1, val2, val3, ...];? ?// 初始化

let array_name [:datatype] = [val1, val2, val3, ...];? ?// 直接在聲明時初始化

*如果數組聲明時未設置類型，則會被認為時any類型，在初始化時根據第一個元素的類型來推斷數組的類型。

Array 對象

Array 對象的構造函數接受兩種值：

表示數組大小的數值

初始化的數組列表元素使用逗號隔開

數組結構

let arr:number[] = [1, 2];

let [num1, num2] = arr

// num1 = 1, num2 = 2

數組迭代

for ... in

多維數組

let arr_name:datatype[] []

數組方法

reduce() - 將數組元素計算為一個值（從左到右）

reduceRight() - 將數組元素計算為一個值（從右到左）

TypeScript 元組

創建元組

let tuple_name = [val1, val2, val3, ...]

元組運算

push() - 向元組尾部添加元素

pop() - 從元組尾部移除元素，并返回移除的元素

結構元組

let tup = ['a', 1];

let [a, b] = tup;

// a = 'a', b = 1

TypeScript 聯合類型

聯合類型可以通過管道將變量設置多種類型，賦值時可以根據設置的類型來賦值。

*只能賦值指定的類型

聯合類型格式

datatype1 | datatype2 | datatype3 | ...

TypeScript 接口

定義接口

interface interface_name {}

接口和數組

接口中我們可以將數組的索引值和元素設置為不同類型，索引值類型可以是數字或字符串。

接口繼承

單接口繼承：Child_interface_name extends super_interface_name

多接口繼承：Child_interface_name extends super_interface1_name, super_interface2_name, ...

TypeScript 類

類的模塊（類的數據成員）

字段 - 類里面聲明的變量，表示對象的有關數據

構造函數 - 類實例化時可調用，可以為類的對象分配內存

方法 - 對象要執行的操作

類的繼承

子類不能繼承父類的私有成員（方法和屬性）和構造函數。

一次只能繼承一個類，不支持繼承多個類，但支持多重繼承（A繼承B，B繼承C）。

語法：class child_class_name extends parent_class_name

static 關鍵字

static 關鍵字用于定義類的數據成員（屬性和方法）為靜態的，靜態成員可以直接通過類名調用。

instanceof 運算符

instanceof 運算符用于判斷對象是否是指定的類型，如果是返回true，否則返回false。

訪問控制修飾符

TypeScript中，可以使用訪問控制符來保護對類、變量、方法和構造方法的訪問。

支持三種不同的訪問權：

public（默認） - 公有可以在任何地方被訪問

protected - 受保護可以被其自身以及其子類和父類訪問

private - 私有只能被其定義所在的類訪問

類和接口

類可以實現接口，使用關鍵詞 implements，可將接口字段作為類的屬性使用。

TypeScript 對象

TypeScript 類型模板

TypeScript 中的對象必須是特定類型的實例。

在JavaScript中如果需要在對象中添加方法，可以直接 object.方法名 = ... 添加，但是在TypeScript中使用該方法會出現編譯錯誤，因為TypeScript 中的對象必須是特定類型的實例。

TypeScript 命名空間

命名空間定義了標識符的可見范圍，一個標識符可在多個名字空間中定義，它在不同名字空間中的含義是互不相關的。

命名空間使用 namespace 來定義。

如果需要在外部調用命名空間內的標識符，需要在標識符前添加 export 關鍵詞。

舉例：

? ? namespace 命名空間名字 {

? ? ? ? export interface 接口名 {}

? ? ? ? export class 類名 {}

? ? ? ? ... ...