為什麼要TypeScript

這幾年想要找工作的時候，注意到越來越多TypeScript出現在JD上!!

到底TS(TypeScript)是何方神聖！

因為JS是個弱型別的語言，很容易傳錯不同型別的資料，導致Code爆掉。

而TypeScipt的好處呢，就是可以幫我們在編譯時，提早告訴我們錯誤，

VScode、PHP storm也有TS的支持，在寫Code的時候就可以及時提示你錯誤了。

更帥的是，我自己式都把他當作文檔來使用啦！譬如說前人的code，你根本不知道要傳什麼，

看一下他的TS型別宣告，可以猜個大概。(尤其是Object會把Property打出來！)

整理一下：

1. 提早避開型別錯誤(提供編譯時的靜態檢查)
2. 當作說明檔案使用(提示函式要傳入的參數等等)

Using Vue with TypeScript

#小知識：什麼是靜態語言？
靜態語言是指變數是否帶有資料型態，反之則為動態語言。
動態語言（弱型別語言）容錯率高，1既能表示int，也能表示float。好比輸入"couwu"也能打出"錯誤"兩字。
靜態語言（強型別語言）嚴謹，1是int就是int，輸入"couwu"絕對打不出"錯誤"兩字。

引用自：靜態語言與動態語言的信任抉擇
什麼是靜態語言和動態語言

接下來就一次看完TypeSciprt重要的型別！

一樣是我的筆記！ 隨時補充。

來Playground 直接測試你的TS

A. 類型

1.基本類型

JS 已經有的原始型別，TS都可以使用:

boolean, bigint, null, number, string, symbol, and undefined,

TS並添加了更多型別如：

• any (allow anything)
• unknown (ensure someone using this type declares what the type is)
• never (不太可能用到就是)
• void (函式沒有回傳東西的時候使用)

TS基本語法使用Interface&Type去建立型別，
官方文件建議先使用Interface，除非有特殊的需求才使用Type (明天會來討論這件事情)

PS. 基本類型是我自己筆記分類

基本類型：Array

- any[]
- string[] : 全部都是 string
- (string | number)[]

//陣列泛型
let fibonacci: Array<number> = [1, 1, 2, 3, 5];

基本類型：Tuple

固定長度和類型的Array,知道某個位置的某個值一定是什麼類型

參見：Tuple

 [1,2]

let tom: [string, number] = ['Tom', 25];

基本類型：Enum

自訂類型(指定字串)
詳見：Enum

enum Role {AUTHOR, ADMIN, READ_ONLY}
const person = {role= Rold.READ_ONLY}

//手動賦值
enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};

//直接存取裡面的資料
enum StatusCodes {
  OK = 200,
  BadRequest = 400,
  Unauthorized,
  PaymentRequired,
  Forbidden,
  NotFound,
}
console.log(StatusCodes.OK);

基本類型：Literal types: 接受固定的內容

指定固定字串使用，常常搭配 Union Type 使用

type LockStates = "locked" | "unlocked";
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

基本類型：Function type

//如果沒有要回傳東西
function = (a:number)=>void;
function = (a:string)=>never;

//輸入多餘的（或者少於要求的）引數，是不被允許的
function add(a: number, b:number): number{ return a + b...}
add(1,3,8) //error

//函式表達左右邊都需要定義
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

//引述預設值
function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}

2.Class類型

TS全面支持ES6以後出現的Class

TODO:
TS-Class

3.複數類型

兩種:Union & Generic

複數類型：union type

let abc = number | string

//搭配literal使用
type LockStates = "locked" | "unlocked";

function getLength(obj: string | string[]) {
  return obj.length;
}

複數類型：Generics 泛型

用<>包起來的泛型

//常常搭配Array使用，指出Array裡面的類型
type StringArray = Array<string>;

interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}
 
// This line is a shortcut to tell TypeScript there is a
// constant called `backpack`, and to not worry about where it came from.
declare const backpack: Backpack<string>;
 
// object is a string, because we declared it above as the variable part of Backpack.
const object = backpack.get();
 
// Since the backpack variable is a string, you can't pass a number to the add function.
backpack.add(23);
Argument of type 'number' is not assignable to parameter of type 'string'.

B. TS與鴨子類型

TS式結構類型系統，又稱鴨子類型：

什麼是鴨子類型？

鴨子類型（duck typing）在程式設計中是一種動態類型的風格，一個對象不是由繼承來的，而是由當前方法和屬性的集合決定。
一隻鳥走起路來像鴨子，飛起來像鴨子，那牠就可以被稱作鴨子。

• 鴨子類型
• TypeScript类型系统（5/5）-类型编程篇

建立型別

我們可以使用Interface 和type來建造我們的鴨子

建立型別：Interface 介面

將物件抽象的概念提取出來，可以繼承。

TS也會自動將一樣的Interface合併，詳見: Merging Interfaces

注意：物件的屬性數量和名稱一定要一樣

interface Person {
	name: string;
	age: number
}

//介面與介面之間可以是繼承關係
interface Rachel extends Person{
}

//也可以直接interface擴充type
type beauty = string

interface Guy extends X{
}

//不可以多或少屬性
let tom: Person = {
    name: 'Tom'
};

// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

//自定義Property
interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

建立型別：Type

//用Type建立型別的別名


//用type也可以擴充

type X = {
}

type Y = X & {
}

Interface & Type混用

interface Alarm {
    alert();
}

class Door {
}

class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}

class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

這一章提取自：TS新手指南：類別與介面

3. TS其他知識點

? 問號 ! 驚嘆號

? >可選屬性
!>必須屬性
readonly

//任意屬性
interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

//唯讀屬性
interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

以上！

目前待補：
Class
Module
Utility Types
型別斷言
宣告檔案

環遊非洲第10天：盧安達 --非洲新加坡

你也許聽過看過: 盧安達飯店的電影，
也許你的印象還停留在影片中可怕的種族屠殺，
但盧安達早就遠遠超越了電影裡混亂的景象。

現在的盧安達有非洲新加之稱，
大屠殺後的1995年，盧安達總統宣布要效法新加坡成為一個先進國家，確保社會政治的安定以及提高在國內做生意的容易度，並提供企業家簽證、免費工作空間、穩定的法治和快速的企業註冊程式

盧安達想要打造一個創新的城市（Innovation city）東非共同體地區的ICT技術服務中心。
除了在2018年與阿里巴巴合作簽署合作，
更打造出了完全在非洲生產的馬拉手機，並積極在境內部署免費的4G網路。

除了商業上複製新加坡外，盧安達還複製了新加坡對環境治安的重視。
首都基加利（Kigali）的街道非常乾淨、沒有垃圾，亂丟垃圾如果被警察看到，那麽馬上就會被拘留。
並且在2018年嚴格禁止塑膠袋，旅客入境盧旺達時，每一件行李每一個背包都得打開接受檢查。

對盧安達有興趣的話，也可以去Netflix看：戀愛巴士非洲之旅，
裡面就有提到盧安達目前的狀況：包括小朋友都使用平板上課、
醫院使用無人機運送血袋......等等

參考

-TS Docs
-TS 新手指南