TypeScript（3）基礎型別

Silent丿丶黑羽發表於2022-06-15
TypeScript型別

基礎型別

TypeScript 支援與 JavaScript 幾乎相同的資料型別，此外還提供了實用的列舉型別方便我們使用。
 

布林值

最基本的資料型別就是簡單的true/false值，在JavaScript和TypeScript裡叫做boolean（其它語言中也一樣）

let isDone: boolean = false;
console.log(isDone)
isDone = true;  // ok
// isDone = 2 // error

其中:boolean就宣告變數isDone必須是布林型，否則編譯會報錯，如果我們給isDone賦值為2，則會報錯

 

數字

和JavaScript一樣，TypeScript裡的所有數字都是浮點數。 這些浮點數的型別是 number。 除了支援十進位制和十六進位制字面量，TypeScript還支援ECMAScript 2015中引入的二進位制和八進位制字面量。

let a1: number = 10 // 十進位制
let a2: number = 0b1010  // 二進位制
let a3: number = 0o12 // 八進位制
console.log(a1)
console.log(a2)
console.log(a3)
console.log(a4)

結果

10
10
10
10

 

字串

JavaScript 程式的另一項基本操作是處理網頁或伺服器端的文字資料。 像其它語言裡一樣，我們使用 string 表示文字資料型別。 和 JavaScript 一樣，可以使用雙引號（"）或單引號（'）表示字串。

let firstName: string = "jkc";
console.log(firstName)
firstName = "jkc1";
console.log(firstName)

結果

jkc
jkc1

我們還可以使用模版字串，它可以定義多行文字和內嵌表示式。 這種字串是被反引號包圍（ ），並且以${ expr }`這種形式嵌入表示式

let firstName:string = 'jkc1'
firstName = 'jkc2'
let age:number = 18
const info = `My name is ${firstName}, I am ${age} years old!`
console.log(info)

結果

My name is jkc2, I am 18 years old!

 

陣列

TypeScript像JavaScript一樣可以運算元組元素。 有兩種方式可以定義陣列。 第一種，可以在元素型別後面接上 []，表示由此型別元素組成的一個陣列：

let list: number[] = [1, 2, 3];
let list1: string[] = ['1', '2', '3']
let list2: boolean[] = [true, false]
console.log(list)
console.log(list1)
console.log(list2)

 
第二種方式是使用陣列泛型，Array<元素型別>：

let list2: Array<number> = [1, 2, 3]
console.log(list2)

 

元組 Tuple

元組型別允許表示一個已知元素數量和型別的陣列，各元素的型別不必相同。 比如，你可以定義一對值分別為 string 和 number 型別的元組。

let t1: [string, number]
t1 = ['hello', 10] // OK
t1 = [10, 'hello'] // Error

當訪問一個已知索引的元素，會得到正確的型別：

console.log(t1[0].substring(1)) // OK
console.log(t1[1].substring(1)) // Error, 'number' 不存在 'substring' 方法

 

列舉

enum 型別是對 JavaScript 標準資料型別的一個補充。 使用列舉型別可以為一組數值賦予友好的名字。

enum Color {Red, Green, Blue}

// 列舉數值預設從0開始依次遞增
// 根據特定的名稱得到對應的列舉數值
let myColor: Color = Color.Green  // 1
console.log(myColor, Color.Red, Color.Blue)

預設情況下，從0開始為元素編號。 你也可以手動的指定成員的數值。 例如，我們將上面的例子改成從 1開始編號：

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

或者，全部都採用手動賦值：

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green

列舉型別提供的一個便利是你可以由列舉的值得到它的名字。 例如，我們知道數值為 2，但是不確定它對映到 Color 裡的哪個名字，我們可以查詢相應的名字：

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2]

console.log(colorName)  // 'Green'

 

any

有時候，我們會想要為那些在程式設計階段還不清楚型別的變數指定一個型別。 這些值可能來自於動態的內容，比如來自使用者輸入或第三方程式碼庫。 這種情況下，我們不希望型別檢查器對這些值進行檢查而是直接讓它們通過編譯階段的檢查。 那麼我們可以使用 any型別來標記這些變數：

// any
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 也可以是個 boolean

在對現有程式碼進行改寫的時候，any 型別是十分有用的，它允許你在編譯時可選擇地包含或移除型別檢查。並且當你只知道一部分資料的型別時，any 型別也是有用的。 比如，你有一個陣列，它包含了不同的型別的資料：

let list: any[] = [1, true, 'free']

list[1] = 100

any型別可以隨意更改裡面的值的型別
 

void

某種程度上來說，void型別像是與any型別相反，它表示沒有任何型別。 當一個函式沒有返回值時，你通常會見到其返回值型別是 void：

function warnUser(): void {
    console.log("This is my warning message");
}

宣告一個void型別的變數沒有什麼大用，因為你只能為它賦予undefined和null：

let unusable: void = undefined;
unusable = null
unusable = 1 // error

 

Never

never型別表示的是那些永不存在的值的型別。 例如， never型別是那些總是會丟擲異常或根本就不會有返回值的函式表示式或箭頭函式表示式的返回值型別； 變數也可能是 never型別，當它們被永不為真的型別保護所約束時。
never型別是任何型別的子型別，也可以賦值給任何型別；然而，沒有型別是never的子型別或可以賦值給never型別（除了never本身之外）。 即使 any也不可以賦值給never。
下面是一些返回never型別的函式：

// 返回never的函式必須存在無法達到的終點
function error(message: string): never {
    throw new Error(message);
}

// 推斷的返回值型別為never
function fail() {
    return error("Something failed");
}

// 返回never的函式必須存在無法達到的終點
function infiniteLoop(): never {
    while (true) {
    }
}

 

object

object表示非原始型別，也就是除number，string，boolean，symbol，null或undefined之外的型別。

使用object型別，就可以更好的表示像Object.create這樣的API。例如：

function getObj(obj: object):object {
    console.log(obj)
    return {
        name: "鳴人",
        age: 20
    }
}

getObj({name: '佐助'})
getObj({name: '卡卡西', age: 18})
getObj(null)
getObj(new String('123'))
getObj('123')  // 錯誤

 

型別斷言

有時候你會遇到這樣的情況，你會比TypeScript更瞭解某個值的詳細資訊。 通常這會發生在你清楚地知道一個實體具有比它現有型別更確切的型別。
 
通過型別斷言這種方式可以告訴編譯器，“相信我，我知道自己在幹什麼”。 型別斷言好比其它語言裡的型別轉換，但是不進行特殊的資料檢查和解構。 它沒有執行時的影響，只是在編譯階段起作用。 TypeScript會假設你，程式設計師，已經進行了必須的檢查。
 
型別斷言有兩種形式。 其一是“尖括號”語法：

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
`console.log(strLength)`

我們首先建立了一個any型別的變數someValue，然後使用<string>斷言這個型別是不是string型別，如果不是則會輸出undefined
另一個為as語法：

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

兩種形式是等價的。 至於使用哪個大多數情況下是憑個人喜好；然而，當你在TypeScript裡使用JSX時，只有 as語法斷言是被允許的。
 

型別推斷

型別推斷: TypeScript會在沒有明確的指定型別的時候推測出一個型別
有下面2種情況:

  1. 定義變數時賦值了, 推斷為對應的型別.
  2. 定義變數時沒有賦值, 推斷為any型別
/* 定義變數時賦值了, 推斷為對應的型別 */
let b9 = 123 // number
// b9 = 'abc' // error

/* 定義變數時沒有賦值, 推斷為any型別 */
let b10  // any型別
b10 = 123
b10 = 'abc'

 

聯合型別（Union Types）

聯合型別（Union Types）表示取值可以為多種型別中的一種
需求1: 定義一個一個函式得到一個數字或字串值的字串形式值

function toString2(x: number | string) : string {
    return x.toString()
}

console.log(toString2('123'))
console.log(toString2(123))
let list: number[] = [1, 2, 3];
console.log(toString2(list)) // error

如果我們輸入除number或者string型別，編譯就會報錯

 
需求2: 定義一個一個函式得到一個數字或字串值的長度

// 定義一個getLength函式，傳入的引數可以是number或者string型別
function getLength(str: number | string) {
    // str.length存在嗎？如果存在也就說明str是string型別的
    if ((<string>str).length) {
        return (<string>str).length
    } else {
        // 此時說明str是number型別
        return str.toString().length
    }
}

console.log(getLength('123'))
console.log(getLength(12345678))

結果：

3
8

相關文章