你必須懂的TypeScript-PartI

(Typescript: 基本型態&Array宣告方法)

何謂 TypeScript?

> TypeScript為微軟在2012年開發的開源程式語言(靜態型別語言)，最主要是讓javascript加入型別辨識。

• 用「靜態型別」語法來描述 JavaScript 的動態型別。
• TypeScript 語法涵蓋完整 JavaScript 語法
• TypeScript為開發中的工具語言 =>開發後編譯成javascript

為何你需要懂Typescript?

1. 讓JS變強壯
JS 本身屬於動態語言，換句話說就是一個型別不嚴謹(隨便)的語言，因此在資料傳輸時很容易因為型別的不同導致出現各種不同的小蟲子QAQ。

2. 大家都在用，不懂得話跟不上時代
由於上述第一點導致很多問題，因此許多公司(包含敝司)開發前端都開始導入TypeScript，讓專案裡一大串雜亂無章的程式碼變得好維護。

3. 部分框架需求
Angular 2.0之後全面導入TypeScript，假如你需要用Angular開發，那你勢必須要先學會TypeScript

TypeScript 型別介紹(分三種)

1. 通用型別
   any : JS任何型別都可用的型別
2. 基本型別
   string, number, boolean, null, undefined, symbol(ES6)
3. 物件型別
   interface(接口), module, class(類), 陣列型別, literal

廢話不多說，我們直接來實作，體驗一下TypeScript再來看基本用法

TypeScript安裝與使用

1. 安裝

$npm install -g typescript

2. 編譯(直接在你的VS Code裡面，開啟終端機使用)

$tsc yourFile.ts

ts檔案編譯為js檔案的過程

TypeScript 基本使用方式

1. 使用冒號 ":" 來標示型別
2. 可有可無的用"?"來表示
3. 函式: 傳入參數定義型別，function若沒return值需要用void

clickDate = (date: string) => {  // 1. 用:來標示型別
    console.log(date);
}
interface ModuleProps {  // interface為物件的型態，後續會談到
    isOpen?: boolean,  // 表示moduleProps裡面的，isOpen參數不一定要傳
    title: string,  
}
function printDate(defaultOpen: boolean, type: string;):void {
    console.log(defaultOpen); 
    console.log(type);
} 

Array 的宣告方式(dataType表示資料型別)

1. dataType[]

const user: string[] = ["jw", "sk", "yl"];

2. Array<dataType>

const idNumber: Array<number> = [1, 2, 3];

3. [dataType] (較直觀的表示方法)

   const mixture: [string,number] = ['hi', 3];
   const multiStrArr: [string, string, string] = ['jw', 'sk', 'yl'];

=> 錯誤寫法:

const multiStrArr: [string] = ['jw','sk','yl']
// 錯誤原因:如果用直觀方法來定義型別，必須依照實際數量來定義(例如上面array有三個值，那即使型別都一樣也要定義三次)

想要直觀又想要偷懶的解決方式 => 使用多數量的表達方式: [...dataType]

const multiStrArr: [...string[]] = ['jw','jk','cy'];

4. array裡面包object的表示方法 => 需要加key值

const user: [...{[k:string]:number}[]]= [{'cy': 87},{'cy': 87},{'cy': 87} ]

以上就先介紹到這邊摟! 希望大家都能夠開始使用typescript

參考資料:

1. TypeScript官網

TypeScript - JavaScript that scales.

2. TypeScript中文教程

前言

3. TypeScript Will保哥課程