函式引數型別和返回型別定義

簡單型別定義

如下圖，getTotal沒有給它定義返回值型別，雖然被推斷出了返回值是number型別，但如圖所示，有string存在時，並未報錯

可以直接給total一個型別註解，但錯誤的根本是getTotal()函式的錯誤

const total: number = getTotal(1, 2);

合適的做法是給函式的返回值加上型別註解，程式碼如下：

function getTotal(one: number, two: number): number {
  return one + two;
}
const total = getTotal(1, 2);

函式無返回值時定義方法

型別註解void，代表沒有任何返回值。

function sayHello(): void {
  console.log("hello world");
}

如果這樣定義後，你再加入任何返回值，程式都會報錯。

never返回值型別

如果一個函式是永遠也執行不完的，就可以定義返回值為never

function errorFuntion(): never {
  throw new Error();
  console.log("Hello World");
}

function forNever(): never {
  while (true) {}
  console.log("Hello JSPang");
}

函式引數為物件時

普通寫法

function add({ one, two }) {
  return one + two;
}
const total = add({ one: 1, two: 2 });

錯誤寫法

function add({ one: number, two: number }) {
  return one + two;
}
const total = add({ one: 1, two: 2 });

正確寫法

function add({ one, two }: { one: number, two: number }): number {
  return one + two;
}

const three = add({ one: 1, two: 2 });

引數是物件，並且裡邊只有一個屬性時

錯誤寫法

function getNumber({ one }: number) {
  return one;
}
const one = getNumber({ one: 1 });

正確寫法

function getNumber({ one }: { one: number }): number {
  return one;
}
const one = getNumber({ one: 1 });

陣列型別定義

一般陣列型別

推斷

const numberArr = [1, 2, 3];

註解

const numberArr: number[] = [1, 2, 3];

如果陣列中有多種型別，比如既有數字型別，又有字串的時候。那我們要如何定義那。 很簡單，只要加個()，然後在裡邊加上|就可以了，具體看程式碼。

const arr: (number | string)[] = [1, "string"];

陣列中物件型別的定義

麻煩寫法

const xiaoJieJies: { name: string, age: Number }[] = [
  { name: "劉英", age: 18 },
  { name: "謝大腳", age: 28 },
];

這種形式看起來比較麻煩，而且如果有同樣型別的陣列，寫程式碼也比較麻煩，TypeScript 為我們準備了一個概念，叫做型別別名(type alias)。

比如剛才的程式碼，就可以定義一個型別別名，定義別名的時候要以type關鍵字開始。現在定義一個Lady的別名。

type Lady = { name: string, age: Number };

const xiaoJieJies: Lady[] = [
  { name: "劉英", age: 18 },
  { name: "謝大腳", age: 28 },
];

等價於下面程式碼

class Madam {
  name: string;
  age: number;
}
const xiaoJieJies: Madam[] = [
  { name: "劉英", age: 18 },
  { name: "謝大腳", age: 28 },
];

元組的使用和型別約束

TypeScript 中提供了元組的概念，這個概念是JavaScript中沒有的。其實元組在開發中並不常用。一般只在資料來源是CVS這種檔案的時候，會使用元組。其實可以把元組看成陣列的一個加強，它可以更好的控制或者說規範裡邊的型別。
我們先來看一個陣列和這個陣列註解的缺點，比如我們有一個小姐姐陣列，陣列中有姓名、職業和年齡，程式碼如下：

元組的基本應用

const xiaojiejie = ["dajiao", "teacher", 28];

這時候把滑鼠放到xiaojiejie變數上面，可以看出推斷出來的型別。我們就用型別註解的形式給他作一個註解，程式碼如下：

const xiaojiejie: (string | number)[] = ["dajiao", "teacher", 28];

這時候你已經增加了程式碼註解，但是這並不能很好的限制，比如我們把程式碼改成下面的樣子，TypeScript依然不會報錯。

const xiaojiejie: (string | number)[] = ["dajiao", 28, "teacher"];

我們只是簡單的把陣列中的位置調換了一下，但是TypeScript並不能發現問題，這時候我們需要一個更強大的型別，來解決這個問題，這就是元組。

元組和陣列類似，但是型別註解時會不一樣。

const xiaojiejie: [string, string, number] = ["dajiao", "teacher", 28];

這時候我們就把陣列中的每個元素型別的位置給固定住了，這就叫做元組。

元組的使用

如果要使用元組，完全可以使用物件的形式來代替，但是如果你維護老系統，你會發現有一種資料來源時CSV,這種檔案提供的就是用逗號隔開的，如果要嚴謹的程式設計就需要用到元組了。例如我們有這樣一組由CSV提供的（注意這裡只是模擬資料）。

"dajiao", "teacher", 28;
"liuying", "teacher", 18;
"cuihua", "teacher", 25;

如果資料來源得到的資料時這樣的，你就可以使用元組了。

const xiaojiejies: [string, string, number][] = [
  ["dajiao", "teacher", 28],
  ["liuying", "teacher", 18],
  ["cuihua", "teacher", 25],
];

學習視訊 ：
https://www.bilibili.com/video/BV1qV41167VD?p=7
資料：
https://jspang.com/detailed?id=63#toc317