簡(jiǎn)單的類型定義

還是上次代碼

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

const total = getTotal(1, 2);

這時(shí)候我們寫的代碼其實(shí)是有一個(gè)小坑的，就是我們并沒有定義getTotal的返回值類型，雖然TypeScript可以自己推斷出返回值是number類型。

但是如果這時(shí)候我們的代碼寫錯(cuò)了，比如寫程了下面這個(gè)樣子。

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

const total = getTotal(1, 2);

這時(shí)候total的值就不是number類型了，但是不會(huì)報(bào)錯(cuò)。

有的小伙伴這時(shí)候可能會(huì)說，可以直接給total一個(gè)類型注解，比如寫成這個(gè)樣子。

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

這樣寫雖然可以讓編輯器報(bào)錯(cuò)，但是這還不是很高明的算法，因?yàn)槟銢]有找到錯(cuò)誤的根本，這時(shí)錯(cuò)誤的根本是getTotal()函數(shù)的錯(cuò)誤，所以合適的做法是給函數(shù)的返回值加上類型注解，代碼如下：

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

const total = getTotal(1, 2);

這段代碼就比較嚴(yán)謹(jǐn)了，所以小伙伴們?cè)趯懘a時(shí)，盡量讓自己的代碼更加嚴(yán)謹(jǐn)。

函數(shù)無返回值的定義方法

有時(shí)候函數(shù)是沒有返回值的，比如現(xiàn)在定義一個(gè)sayHello的函數(shù)，這個(gè)函數(shù)只是簡(jiǎn)單的terminal打印，并沒有返回值。

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

這就是沒有返回值的函數(shù)，我們就可以給他一個(gè)類型注解void，代表沒有任何返回值。

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

如果這樣定義后，你再加入任何返回值，程序都會(huì)報(bào)錯(cuò)。

never返回值類型

如果一個(gè)函數(shù)是永遠(yuǎn)也執(zhí)行不完的，就可以定義返回值為never，那什么樣的函數(shù)是永遠(yuǎn)也執(zhí)行不完的那?我們先來寫一個(gè)這樣的函數(shù)(比如執(zhí)行執(zhí)行的時(shí)候，拋出了異常，這時(shí)候就無法執(zhí)行完了)。

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

還有一種是一直循環(huán)，也是我們常說的死循環(huán)，這樣也運(yùn)行不完，比如下面的代碼：

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

函數(shù)參數(shù)為對(duì)象解構(gòu)時(shí)

這個(gè)坑有很多小伙伴掉下去過，就是當(dāng)一個(gè)函數(shù)的參數(shù)是對(duì)象時(shí)，我們?nèi)绾味x參數(shù)對(duì)象的屬性類型。

我先寫個(gè)一般javaScript的寫法。

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

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

在瀏覽器中你會(huì)看到直接報(bào)錯(cuò)了，意思是total有可能會(huì)是任何類型，那我們要如何給這樣的參數(shù)加類型注解那？

最初你可能會(huì)這樣寫。

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

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

你在編輯器中會(huì)看到這種寫法是完全錯(cuò)誤的。那正確的寫法應(yīng)該是這樣的。

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

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

如果參數(shù)是對(duì)象，并且里邊只有一個(gè)屬性時(shí)，我們更容易寫錯(cuò)。

錯(cuò)誤代碼如下：

function getNumber({ one }: number) {
  return one;
}

const one = getNumber({ one: 1 });

看著好像沒什么問題，但實(shí)際這是有問題的，正確的代碼應(yīng)該時(shí)這樣的。

function getNumber({ one }: { one: number }): number {
  return one;
}

const one = getNumber({ one: 1 });

這樣寫才是正確的寫法，小伙伴們趕快動(dòng)手練習(xí)一下吧，剛開始學(xué)你可能會(huì)覺的很麻煩，但是你寫的時(shí)間長(zhǎng)了，你就會(huì)發(fā)現(xiàn)有規(guī)矩還是好的。人向往自由，缺鮮有人能屈駕自由。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。