Handbook Note : EveryDay Type

tags: Language-ts

(一) Basic Type

1. Type Delcaration : 包含bool、string、number。

• Delaration type not init : 第一行。
• Delaration type with init : 第二行。
• Delaration type with given value : 第三行。

let num : number ;
let num : number = 9 ;
let num = 9 ;

2. Array Delcaration :

• Delaration type not init : 第一行、第二行。
• Delaration type with init : 第三行。

let arr : number[];
let arr : Array<number>;
let arr = [1,2,3,4]

3. any型別 : 變回JS的使用。

• 可以執行任何行為 ： 不會做compile time的檢查。
• 可以指定給任何的變數，也可能改變變數的type。

// 1. 可以過tsc
let variable : any = 1 ;
variable.toLowerCase(); 
// 2. error when tsc
let str : string = 1;
str.toLowerCase(); 

(二). Function

1. 預備知識 ： function Decleration、function implement。

int test(int num) {cout << num;}
/*****************/
int test(int); 
int test(int num){cout <<num;}

2. TS 的 Function Decleration :

• 需要設定para的type :
  • 可以編譯成功，但變回JS的模式。
  • 沒有設定type的參數自行變成any type。
• 不一定需要定義return type :
  • 沒有定義下，tsc會自動依照回傳的資料定義。
  • 有定義的形況下，會限制可以回傳的。若不相同，tsc會有error

function test():string{
    return 1  ;  // error when tsc
}
function test(){ // tsc 定義回傳type為 number
    return 1;
}

3. TS 的匿名function

• 有些匿名函式已經知道type，不用再指定arg type

[1,2,3].map(n => n+1); // number[].map()必為number type。

(三). Type 和 interface

1. TS 的 Object Type : 指定Object需要的屬性。

type Account ={
   name : string ,
   memony : number,
}
let a : Account = {
   name : "steven",
   memony : 100 
}

2. TS 的 Object interface : 指定Object需要的屬性。

interface Account {
   name : string ,
   memony : number,
}
let a : Account = {
   name : "steven",
   memony : 100 
}

3. Object Type 和 Object interface 的不同

• Type 不可以重新定義。

type Mytype ={
  name : string 
}
type Mytype ={  // Error 
    name : string ,
    age : number
}
let arg01 : Mytype = {
   name : "test"
}

• interface可以重新定義，

interface Myinterface{
  name : string 
}
interface Myinterface{ // 後面定義覆蓋前面
    name : string,
    age : 10
}
let arg02 : Myinterface ={
   name : "test",
   age : 10 ,
}

• 但兩個都可以定義extend。

interface father{
    name : string 
}
interface child extends father{
    age : number
}
let obj : child ={
    name : "steven",
    age : 10
}

type father= {
    name : string 
}
type child = father & {
    age : number
}
let obj : child ={
    name : "steven",
    age : 10
}

4. 都有duck type的性質 : 只要符合定義的都是一樣的型別

• 可以fit進去其他可能的物件。

interface Mytype{
    name : string
}
let template = {
    name : "Steven"
    age : 10
} 
let obj : Mytype = template ;

• 但在init時不可以多加入屬性。

interface Mytype{
    name : string
}
let obj : Mytype = {
    name : "steven",
    age : 10 //error
} ;

(四) . Optional Properity

1. 功用 ： Object的屬性和function的參數可以Optional。

• Object屬性的optional : 定義時可以不一定需要。
• function參數的optional : 傳入時可以不一定需要。

2. 使用注意 ：使用? operator

• 函示使用時 : 代表『如果存在下執行』。
• 但若不是存取必須type-bind的行為，ts不會檔(例如只有log出來)。

function test(arg?: string){
    console.log(arg) // 可以過
    console.log(arg?.toLowerCase());
}
test();     // undefined
test("LL"); // "ll"

• 物件使用時 : 也代表『如果存在下執行』。
• 但若不是存取必須type-bind的行為，ts不會檔(例如只有log出來)。

interface Test{
    name? : string ,
    age : number
}
let obj : Test = { name : "STEVEN" ,age: 10 }
console.log(obj.name?.toLowerCase());
console.log(obj.name); // 可以過

(五) . Union Type

1. 功用 ： 可以一次讓一個變數接受多種不同的型別。

• 可以對一般的變數宣告、函式參數、物件屬性使用。
• 不限可以union多少個。

let variable : number | string ;
function testFun(arg : number| string){ ...}
interface Test{
    data : number | string
}

2. 使用注意 ： narrowing的使用，或是用as。

• narrowing : 下一篇。
• as : 可以讓tsc過，但runtime可能有錯誤。

function testFun(arg : number| string){ 
    console.log((arg as string).toLowerCase())
}