TypeScript 基礎入門-變數篇

前言

身邊滿多前端工程師都會接觸到 TypeScript,所以這邊紀錄一下 TypeScript 基礎入門

TypeScript 何物

首先一樣在學習任何新事物之前都要先科普一下,所以我們先了解一下 TypeScript 是什麼東西。

TypeScript 是一個嚴格超集合,何謂嚴格超集合?簡單來講就是他非常的嚴謹然後又包含了其他 ES 規範

自己畫的(醜)

更詳細可以看 Wiki

起手式

由於 TypeScript 是需要做轉譯與 CoffeeScript 相同,所以這邊我們可以使用 Gulp 來轉譯,剛剛好 Gulp 有提供一個套件可以協助我們做編譯

gulp-typesc

這邊我也不廢話直接準備開始撰寫 TypeScript,如果對於 Gulp 不熟悉者可以看我先前所撰寫的 Gulp 系列文章 這是在講 Gulp 不是飲料是任務自動化工具這件事

我這邊就直接快轉到安裝完套件以及 Gulp 環境哩~

※ 注意 Gulp 環境必須是 Gulp 4 唷!

Image

變數撰寫

首先 TypeScript 撰寫變數的方式稍微有點不太一樣,以往我們撰寫變數頂多這樣子

1
2
const isA = 10;
const isB = '小明';

但是在 TypeScript 是需要宣告型別的,所以要這樣寫才對

1
2
const isA: number = 10;
const isB: string = '小明';

編譯出來就會跟原本 JS 相同

TypeScript

但是如果不宣告型別會發生什麼事情?一樣可以編譯成功,但是這樣子就會失去撰寫 TypeScript 的好處,所以如果當我們宣告變數是 number,但我們卻手誤寫入 string 那就不一樣了

1
2
const isA: number = '123';
const isB: string = '小明';

這樣我們就會得到一個錯誤,他在跟你講,你賦予的值,不是一個正確的型別

不是正確的型別

所以 TS 主要型別有這幾種

1
2
3
4
5
6
7
8
9
10
11
12
13
const isA: number = '123';

const isB: string = '小明';

// 注意不要使用 new Boolean,因為透過建構函式創造並不是一個 boolean
const isC: boolean = false;

// 在 JavaScript 沒有值的概念可以使用 TypeScript 的 void 做表示,但是聲明 void 基本上沒什麼用處
const isD: void = undefined; // 但是 void 只能傳入 undefined 和 null

// 另外還可以宣告 undefined 和 null 這兩個型別
const isE: undefined = undefined;
const isF: null = null;

編譯出來就會像這樣子

TS 主要型別

結尾

這邊我們就可以體會到使用 TypeScript 有甚麼樣的好處,因為原本 JavaScript 是一個弱型別語言,而且是動態語言,只有在他執行階段時才會知道他的型別,透過 TypeScript 我們可以先給予型別,這樣子的好處我們可以減少很多奇怪的 Bug,而且撰寫 TypeScript 還有一個好處 不用擔心瀏覽器相容問題,因為本身 TypeScript 就 Babel 的能力,所以完全可以在 TypeScript 中安心撰寫 ES5 ~ ES6 等。

0%