TypeScript中的型別註解和型別推斷

碼字不易，有幫助的同學希望能關注一下我的微信公眾號：Code程式人生，感謝！程式碼自用自取。

這期我們學習一下 TypeScript 中的兩個基本概念：型別註解和型別推斷，這兩個概念在我們撰寫 TypeScript 程式碼時會一直使用(重點)，但很多教學都沒有講解，不過在官方檔案中有比較好的解釋。你現在可能還不能完全理解我說的這兩個概念，但是你看完文章後就會有很直觀的了解啦。

type annotation型別註解

這個概念我們在前三節課中一直使用，只是我沒明確這個概念和關係，所以你會覺的很陌生。這就好比，你身邊有一個特別漂亮的姑娘，她一直很喜歡你，你也很喜歡她，但窗戶紙一直沒捅破，直到有一天你們喝多後，去了如家酒店（談了談心），你們的關係就明確了。

學程式並沒有這麼複雜，我們直接點，新建一個檔案demo4.ts ,然後看程式碼：

1
2
let count: number;
count = 123;

這段程式碼就是型別註解，意思是顯示的告訴程式碼，我們的count變數就是一個數值型別，這就叫做型別註解。是不是一下就明白了，其實程式這東西就這麼簡單，真正複雜的是人。

type inferrence型別推斷

當你明白了型別註解的概念之後，再學型別推斷就更簡單了，先來看一段程式碼。還是在Demo4.ts檔案中寫入下面的程式碼。

1
let countInference = 123;

這時候我並沒有顯示的告訴你變數countInference是一個數值型別，但是如果你把滑鼠放到變數上時，你會發現 TypeScript 自動把變數註解為了number（數值）型別，也就是說它是有某種推斷能力的，透過你的程式碼 TS 會自動的去嘗試分析變數的型別。這個就彷佛是人的情商比較高，還沒等女生表白那，你就已經看出她的心思。

工作使用問題(潛規則)

  • 如果 TS 能夠自動分析變數型別， 我們就什麼也不需要做了
  • 如果 TS無法分析變數型別的話， 我們就需要使用型別註解

先來看一個不用寫型別註解的範例：

1
2
3
const one = 1;
const two = 2;
const three = one + two;

再來看一個用寫型別註解的範例：

1
2
3
4
5
function getTotal(one, two) {<!-- -->
  return one + two;
}

const total = getTotal(1, 2);

這種形式，就需要用到型別註解了，因為這裡的one和two會顯示為any型別。這時候如果你傳字串，你的業務邏輯就是錯誤的，所以你必須加一個型別註解，把上面的程式碼寫成下面的樣子。

1
2
3
4
5
function getTotal(one: number, two: number) {<!-- -->
  return one + two;
}

const total = getTotal(1, 2);

這裡有的一個問題是，為什麼total這個變數不需要加型別註解，因為當one和two兩個變數加上註解後，TypeScript 就可以自動透過型別推斷，分析出變數的型別。

當然 TypeScript 也可以推斷出物件中屬性的型別，例如現在寫一個小姐姐的物件，然后里邊有兩個屬性。

1
2
3
4
const XiaoJieJie = {<!-- -->
  name: "劉英",
  age: 18,
};

寫完後你把滑鼠放在XiaoJieJie物件上面，就會提示出他裡邊的屬性，這表明 TypeScript 也分析出了物件的屬性的型別。

在寫 TypeScript 程式碼的一個重要宗旨就是每個變數，每個物件的屬性型別都應該是固定的，如果你推斷就讓它推斷，推斷不出來的時候你要進行註解。

有微信小程式課設、畢設需求聯繫個人QQ：505417246

關注下面微信公眾號，可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs、Python等實作學習資料
最新最全的前端知識總結和專案原始碼都會第一時間釋出到微信公眾號，請大家多多關注，謝謝

關注公眾號後，回復前端面試題，領取大量前端面試題匯總pdf資料