Typescript 學習筆記 - Section 4

Section Overview

這章節主要會介紹 Type Annotation 跟 Type Inference 在 function 上的使用

Type Annotation around functions

Type Annotation - 我們告訴 Typescript function 的參數 type 是什麼，以及回傳值的 type Type Inference - Typescript 主動去判斷回傳值的 type 是什麼

Examples

const add = (a: number, b: number): number => {
  return a + b;
};

Type Inference around functions

const add = (a: number, b: number): number => {
  // typescript will throw error
  return '123123';
};
 
const add = (a: number, b: number): number => {
  // typescript只關心type，並不管functino內的邏輯是否正確
  return a - b;
};

在任何情況下我們都要 annotate 參數 type 是什麼，以及回傳值的 type 是什麼，原因如下

const subtract = (a: number, b: number) => {
  // typescript 認為這function沒任何回傳值，所以回傳值的type是void，實際上是因為程式碼錯誤漏寫return而已
  // 所以須加上回傳值的type，讓typescript提示我們哪邊有錯誤
  a - b;
};

More Examples

function divide(a: number, b: number): number {
  return a / b;
}
 
const multiply = function (a: number, b: number): number {
  return a * b;
};

Void and Never

const logger = (message: string): void => {
  console.log(message);
};
 
const throwError = (message: string): never => {
  throw new Error(message);
};
 
// rewrite
const throwError = (message: string): string => {
  if (!message) {
    throw new Error(message);
  }
 
  return message;
};

Destructuring with Annotations

const todaysWeather = {
  date: new Date(),
  weather: 'sunny',
};
 
const logWeather = ({
  date,
  weather,
}: {
  date: Date;
  weather: string;
}): void => {
  console.log(forecast.date);
  console.log(forecast.weather);
};
 
logWeather(todaysWeather);

Annotations Around Objects

const profile = {
  name: 'alex',
  age: 20,
  coords: {
    lat: 0,
    lng: 15,
  },
  setAge(age: number): void {
    this.age = age;
  },
};
 
const { age, name }: { age: number; name: string } = profile;
const {
  coords: { lat, lng },
}: { coords: { lat: number; lng: number } } = profile;