簡單的類型定義

還是上次代碼

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

const total = getTotal(1, 2);

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

但是如果這時候我們的代碼寫錯了，比如寫程了下面這個樣子。

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

const total = getTotal(1, 2);

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

有的小伙伴這時候可能會說，可以直接給total一個類型注解，比如寫成這個樣子。

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

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

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

const total = getTotal(1, 2);

這段代碼就比較嚴(yán)謹(jǐn)了，所以小伙伴們在寫代碼時，盡量讓自己的代碼更加嚴(yán)謹(jǐn)。

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

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

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

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

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

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

never返回值類型

如果一個函數(shù)是永遠(yuǎn)也執(zhí)行不完的，就可以定義返回值為never，那什么樣的函數(shù)是永遠(yuǎn)也執(zhí)行不完的那?我們先來寫一個這樣的函數(shù)(比如執(zhí)行執(zhí)行的時候，拋出了異常，這時候就無法執(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ù)為對象解構(gòu)時

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

我先寫個一般javaScript的寫法。

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

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

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

最初你可能會這樣寫。

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

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

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

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

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

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

錯誤代碼如下：

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

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

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

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

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

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

總結(jié)

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

最新評論