2021年10月22日3 分鐘閱讀次瀏覽

Day12: 【TypeScript 學起來】只有 TS 才有的型別: Literal Types(字面值型別) / Tuple (元組)

今天來介紹Literal Types(字面值型別) / Tuple (元組)。

Day12: 【TypeScript 學起來】只有 TS 才有的型別: Literal Types(字面值型別) / Tuple (元組)

工程師A：覺得當工程師好累想換一行怎麼辦工程師B：按一下 enter 啊工程師A：......

很常工程師之間都聊不下去了更何況是pm 你說是不是.... 今天來介紹Literal Types(字面值型別) / Tuple (元組)。

Literal Types 字面值型別

string literal types

就是值的表現方式，某些特殊的"值"可以當作"型別"來使用，用來約束取值只能是某幾個字串中的一個。如下方讓 x 變數的字面值為“hello”。

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

Day12: 【TypeScript 學起來】只有 TS 才有的型別: Literal Types(字面值型別) / Tuple (元組)

但很少情況會使用到一個變數只有一個值，我們可以將想要的值結合起來，如 alignment 給予3個字面值，其參數要符合其中一個。如果不符合這3個值的其中一個或寫錯字，都會報錯。

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

Day12: 【TypeScript 學起來】只有 TS 才有的型別: Literal Types(字面值型別) / Tuple (元組)

numeric literal types

除了文字上，數字的操作也一樣：執行compare函式的回傳值只能 -1、0 和 1。

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

non-literal types

非字面值型別也可以結合操作：

interface Options {
  width: number;
}
function configure(x: Options | "auto") {
   console.log(x);
}
configure({ width: 100 });
configure("auto");
configure("automatic"); // 不符Options 及 “auto”
//error： Argument of type '"automatic"' is not assignable to parameter of type 'Options | "auto"'.

Day12: 【TypeScript 學起來】只有 TS 才有的型別: Literal Types(字面值型別) / Tuple (元組)

Tuple 元組

Tuple 就是合併了不同型別的物件。定義一對值分別為 string 和 number 的元組：

const iris: [string, number] = ['iris', 18];

可以針對型別有的屬性進行使用、賦值。但當直接對元組型別的變數進行初始化或者賦值，需提供所有項目。如果要新增不同型別的項目也是無法的：

let tom: [string, number];
tom = ['tom', 18]; //如果只有宣告tom沒賦值，會是undefined，tsconfig strictNullChecks 打開的話會報錯提醒
tom[0] = 'Tom'; //ok
tom[1] = 25; //ok
tom[0].slice(1); //ok
tom[1].toFixed(2); //ok
tom.push('male'); //ok
 
tom = ['tom chen']; //error:Property '1' is missing in type '[string]' but required in type '[string, number]'.
tom.push(true); //error: Argument of type 'true' is not assignable to parameter of type 'string | number'.