【TypeScript學習系列】學習基礎宣告的方法,了解TypeScript與JavaScript的差異

TypeScript跟JavaScript最大的不同在於,多了型態的宣告,所以在一開始變數的宣告上,就有很大的不同,所以學習TypeScript第一個步驟就是學習各型態的宣告,以及學習宣告類型後,會出現什麼樣的狀況來在開發的時候減少錯誤

宣告類型整理

做一個整理表格,方便查找

類型作用
number數值類型,只有數字
string字串類型,放字元跟字串
boolean布林類型,true跟false是否判斷
undefined 
null 
any任何類型都可以儲存,不建議使用,只建議用在debug的時候
unknown類似any可以儲存類型,但是有額外著偵錯功能

變數宣告

大致上數值、字串跟布林宣告都差不多,簡單做幾個範例

number宣告

let num1 = 999;
let num2: number;

string宣告

let str1 = "字串";
let str2: string;

布林宣告

let boo1 = false;
let boo2: boolean;

特殊的宣告

如果要宣告undefined跟null的話,就不能等於值的方式宣告,這樣會被判斷為any而不是undefined跟null型態

//any
let un = undefined;
//undefined
let nu2: undefined;

//any
let n1 = null;
//null
let n2: null;

類型檢查效果

跟js不同的地方就是,會在程式執行之前,就知道錯誤在哪裡,減少在開發上類型除錯的問題

陣列及元組宣告

在宣告上的部份都是一樣多了型態的可以增加進去,只是在陣列還可以新增不同型態在同一個陣列裡

單一的型態

這三種方式都是宣告陣列的方法

const arr1 = [1, 2, 3];
const arr3: string[] = [];
const arr4: Array<string> = [];

多種的型態

這裡面可以包含兩種型態不會報錯

const arr2 = [1, 2, ""];
const arr5: (string | boolean)[] = [];

元組宣告(Tuple)

固定順序及類型,陣列內數量都要一樣的陣列

乍看之下沒什麼差別,跟一般陣列差別在不能多也不能少,而且類型順序不可以亂掉

const tu1: [number, string, boolean] = [999, "1", false];

物件宣告

基本上跟JS是差不多的,可以直接宣告一個物件,並且賦予內容給他

let obj = {
  name: "hank",
  age: 18,
};

那如果今天已經知道裡面需要什麼,並且我還沒拿到該需要的值,只是想事先宣告好的話,可以這樣寫

let obj1: { name: string; age: number };

等拿到需要的內容時,在實作出來

obj1 = {
  name: "",
  age: 123,
};

但我可能有些東西,我可能想要傳,或是不想要傳,就可以加上可選功能 “?”,那我在實作上就不需要加上age也不會報錯

let obj1: { name: string; age?: number };

obj1 = {
  name: "",
};

unknown跟any的差別

這兩個用法差不多,unknown是比較安全的any,他有些情況下是可以做判斷的,首先宣告部分跟用法都差不多,可以在裡面存入任何的值

let name1: any = "Hank";
name1 = 18;

let name2: unknown = "may";
name2 = 16;

斷言

unknown有一個功能,也就是後來執行到後面的時候,我需要加上型態了,就可以使用斷言

let name3: unknown = "tony";
let name4 = name3 as string;

類型檢查功能

剛提到兩者差異在於類型檢查,像是any的狀況,宣告一個變數,要做字串分割,但因為any可以塞入任何的變數,所以在這種狀態,可能執行時就會發生錯誤

let name6: any;
console.log(name6.split(""));

但如果是unknown,就會直接發生執行錯誤,因為可能出現形態上的錯誤

let name5: unknown;
console.log(name5.split(""));//這行錯誤

所以加上判斷功能就不會出現問題了

let name5: unknown;

if (typeof name5 === "string") {
  console.log(name5.split(""));
}

union、never、強制斷言

union

就是多種類型的宣告,在上面陣列也有提到多種類型,就是一種union的表示

const arr5: (string | boolean)[] = [];

除了陣列也可以針對變數進行宣告,所以一種變數也能有多種形態

let teacherName: string | number;
teacherName = "Alyssa";
teacherName = 11;

never

這是一種不可能會發生的狀態,在JS中,如果發生到不會執行的狀況,通常也不太會知道,因為不會報錯,這樣就可能無法得知自己程式哪裡出問題,但TS多了never判斷,讓我們知道哪裡是會出問題的

以上面為例,如果要做字串分割,但TS會發現這行並不會執行到,並顯示出never

let teacherName: string | number;
teacherName = "Alyssa";
teacherName = 11;

//never 不可能發生
if(typeof teacherName==='string'){
  teacherName.split("")//這行錯誤
}

強制斷言

一般使用斷言,就是如果不是unknown就會出現錯誤,但如果堅持要強制轉換,因為很清楚過程中型態會發生變化,那就可以使用強制斷言

這樣就可以讓宣告的變數強制轉換成你需要的類型

let test5 = 555;
let test6 = test5 as unknown as string;

總結:

今天依然是學習HiSKIO的布魯斯的 TypeScript 入門攻略|輕鬆打造實時聊天室這堂課,並以自己學習能記住的方式進行記錄。要說到TS的觀念我不是第一次接觸,但上過布魯斯的課之後,會有一種靈光乍現的感覺,因為他總是可以把很複雜的觀念,透過自身對於程式很深度的知識能力,轉換成一般人都能理解的方式,在這筆記中,也只是簡單把我學習的內容,轉換成我能快速迴想的紀錄,但真正能學到精隨的方式,還是要聽過一次布魯斯的講解,非常推薦想要有架構的理解TypeScript的人,都去上這堂課

布魯斯的 TypeScript 入門攻略|輕鬆打造實時聊天室

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。