TypeScript經常使用知識之--變量和函數的約定

這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰

由於Typescript的持續火爆，分享下TS的經常使用知識點，咱們一塊兒學習交流，一塊兒加油！

變量的約定

1.基本類型

// number
let number: number = 1;

//boolean
let boolean: boolean = true;

//string
let string: string = "string";

// array
let array: string[] = ["1", "2", "3"];
let array1: Array<number> = [1, 2, 3];

//null
let nullnull: null = null;

//undefined
let undefinedundefined: undefined = undefined;

//any 任何類型均可以
let anyany: any = "any";

//元組 tuple
let tupletuple: [string, number] = ["1", 11];

// 枚舉
enum Color {
  Green,
  Red,
}

console.log(Color.Green, Color.Red);

// HTML類型
let htmlEle: HTMLElement = document.querySelector("p");
複製代碼

2.非空斷言

若是一個元素有可能爲空，那麼取當中的屬性可能會報錯，這個時候須要用！進行非空斷言

let div: HTMLElement | null = document.getElementById("id");
div!.style.color;
複製代碼

3.never 和 void的區別

1.never 是永不可能執行到的

2.void 是空

3.never 和任何類型交叉都是never

function f1(a: string): void {}

function f2(a: string): never {
  // 由於永遠執行不到 全部返回是never
  throw new Error();
}

type A = string | number;
type B = never;

type AB = A & B; // never 和任何類型交叉都是never

複製代碼

4.聯合類型

type C = number | string;
type C2 = boolean | string | number;
複製代碼

5.斷言

有時候咱們在不知道什麼類型的時候調用一些屬性，直接調用會報錯，可是使用斷言就能夠避免這個問題

function fn3(a: string | Array<number>) {
  // 好比string是沒有join的 這個時候就須要強轉
  (a as Array<number>).join();
}
複製代碼

函數的約定

1.定義函數

1.可使用interface 和 type 對函數進行約束

2.定義的類型能夠是多類型 使用 | 分隔

//type
type GetName = (id: string | number) => string | number;

//interface
interface GetName1 {
  (id: string | number): string | number;
}

let getName: GetName = function (id: string | number): string | number {
  return id;
};

let getName1: GetName1 = function (id: string | number): string | number {
  return id;
};

let name = getName("id");
let name2 = getName1("id");

複製代碼

2.函數參數

1.可選參數

2.默認參數

3.剩餘參數

// 可選參數
function optional(a: string, b?: boolean): void {}
optional("1");
optional("1", true);

// 默認參數
function defaultFn(a: string, b: boolean = true) {}
defaultFn("1");

// 默認參數
function restFn(x1, x2, ...x: string[]) {
  for (let i = 0; i < x.length; i++) {
    console.log(x[i]);
  }
  console.log(x1, x2);
}
restFn("1", "2", "3", "4", "5");
複製代碼

3.函數重載

1.函數的定義能夠進行重載，相似於Java

2.重載的意義在在於更好的約束傳入的參數

function getAge(id: string, gender: boolean): number;
function getAge(id: number, gender: string): number;
function getAge(id: string | number, gender: boolean | string): number {
  if (typeof id === "string") {
    return Number(id);
  }

  if (typeof id === "number") {
    return id;
  }
}

getAge("1", true);
getAge(1, "male");
// 下面這種狀況就會報錯
// getAge(1,true);
複製代碼

相關資料

• TypeScript 官網

你們喜歡的能夠看看個人專欄 (TypeScript經常使用知識) 我會盡可能保持天天晚上更新，若是喜歡的麻煩幫我點個贊，十分感謝

你們若是喜歡「算法」的話，能夠看看我分享的另一個專欄（前端搞算法）裏面有更多關於算法的題目的分享,但願能幫助你們更深的理解算法

文章內容目的在於學習討論與分享學習算法過程當中的心得體會，文中部分素材來源網絡，若有侵權，請聯繫刪除，郵箱 182450609@qq.com