Typescript介紹

Typescript是基於Javascript所延伸出來的一種超集，讓js能夠像Java、C#一樣有強型別的概念，同時，還提供了對ES5、ES6的支援。

優點

1. 提早發現錯誤：許多js的錯誤往往是在runtime時才報錯，有了typescript，我們能夠在編譯時期就發現錯誤。
2. 增加可讀性：有了型別之後，我們能更好得理解程式碼，進而提升整體的閱讀速度。
3. 提供更完整的物件導向功能，越龐大的專案越能感受到因此帶來的好處。

缺點

1. 增加開發成本：為了降低未來的維護成本，需要額外定義許多型別、介面等。
2. 和一些library結合得不是非常好。

 安裝

npm install typescript --save-dev

 使用方式

tsc 檔案名稱 => 將ts檔編譯為js檔

 Primitive type

let myString: string = "hello"; // 字串
let myNumber: number = 10 // 數值
let myBool: boolean = true; // 布林值 

 Union Types

可以兼容多種型態

let myUnionVar: string | number = "hello";
myUnionVar = 10; 

 Array

有兩種表示方式

let myStrArray1: string[] = ["a", "b", "c"];
let myStrArray1: Array<string> = ["a", "b", "c"]; 

 Any

如果使用此型態，基本上就像是在寫js，沒有利用到ts帶給我們的好處，不得已時才使用

let a: any = 10;
a.split(","); // runtime時才會報錯 

 Function

function parseStringToInt(str: string): number { // 括號外的是function的回傳型別
    return parseInt(str, 10);
} 

 Optional Parameters

必須放在必要參數之後 

function parseStringToInt(str: string, base?: number): number {
    if(base == null)
      return parseInt(str, 10);
    else
      return parseInt(str, base);
} 

 Default Parameters

function parseStringToInt(str: string, base: number = 10): number {
    return parseInt(str, base);
} 

 Enum

enum Gender {
  Male,
  Female,
  Transgender
}

let gender: Gender = Gender.Male; 

 Type Aliases

type Person = {
    name: string;
    country: string;
    age: number
}

function greeting(person: Person) {
    console.log(`Hello, my name is ${person.name}, I\'m ${person.age} years old. I\'m from ${person.country}.`);
} 

 Interface

interface Person {
    name: string;
    country: string;
    age: number
}

function greeting(person: Person) {
    console.log(`Hello, my name is ${person.name}, I\'m ${person.age} years old. I\'m from ${person.country}.`);
} 

Type Alias和Interface，它們的功能非常相似，而且時常可以混用。針對這個部分，Typescript的官方文件推薦，除非遇到無法使用Interface的情況，否則我們應該盡可能的使用Interface。

這次的Typescript介紹先到這邊，主要是介紹一些常用且基礎的語法。至於會不會有後續介紹，這個要再看看，畢竟我也才剛接觸Typescript，進階的語法可能需些時間消化並整理，謝謝大家。

參考連結

https://www.typescriptlang.org/docs/handbook/intro.html

https://willh.gitbook.io/typescript-tutorial/