TypeScript 學習筆記 — 函式中的型別（四）

Echoyya、發表於2023-02-08
TypeScript筆記函式型別

目錄

對於函式主要關心的是：函式的入參型別 和 函式的返回值型別

函式的兩種宣告方式

  1. 透過 function 關鍵字來進行宣告，不涉及到變數型別的標註
function sum(a: string, b: string): string {
  // 限制函式的引數和返回值型別
  return a + b;
}
sum("a", "b");
  1. 透過表示式方式宣告，可以給變數重新賦值，如果給變數寫好了一個型別，就意味著賦予的值要滿足這個型別.
type Sum = (a1: string, b1: string) => string;
let sum: Sum = (a: string, b: string) => {
  return a + b;
};

可選引數

?表示可選引數，可傳可不傳，必須在其他引數的最後面

let sum = (a: string, b?: string): string => {
  return a + b;
};
sum("a");

預設引數

預設引數列示函式引數的預設值，必須在其他引數的最後面

type Sum = (x: string, y?: string) => string;
let sum: Sum = function (a, b = "123") {
  return a + b;
};
sum("a");

剩餘引數

let sum = function (a?: string, ...args: string[]) {
  return args.reduce((memo, current) => memo + current, a);
};
let r = sum("a", "b", "c", "d");
console.log(r);

函式的過載

js 不支援函式的過載， ts 也就不支援，所以 ts 中的函式過載（偽過載， 對引數進行區分），
而 js 是透過 arguments 來實現過載，比如$('app').html() 和 $('app').html('hello world') 實現獲取和設定功能

function toArray(value: number): number[];
function toArray(value: string): string[];
function toArray(value: string | number): string[] | number[] {
  // 只有一個具體的實現，並不是真正意義上的過載
  if (typeof value === "string") {
    return value.split("");
  } else {
    return value.toString().split("").map(Number);
  }
}
let arr1 = toArray(1);
let arr2 = toArray("2");

this 的型別

在 TS 中存在兩個關鍵字：

  • typeof：取變數的型別，返回的是型別
  • keyof：取的是型別的 key 的集合
// this 導致的問題是不方便型別推導，用起來比較麻煩
function getName(this: Person, key: PersonKey) {
  return this[key];
}
const person = { name: "yya", age: 18 };

type Person = typeof person; // type Person = {name: string; age: number;}
type PersonKey = keyof Person; // type PersonKey = "name" | "age"
getName.call(person, "name");
getName.call(person, "a"); // 報錯：型別“"a"”的引數不能賦給型別“"name" | "age"”的引數。

相關文章