Typescript Note 2 - OOP / class / interface

物件導向 OOP / class 設計圖

在物件導向的架構中，每個物件都具有接收訊息，處理資料以及發送訊息給其他物件的能力。

一個簡易的會員資料集

屬性：

• name
• age
• address

  功能：

• 新增資料
• 更新資料
• 刪除資料

// 會員資料物件的設計圖
class User {
  constructor(name: string, age: number) {
    console.log('物件建立之前回執行的內容');
    this.name = name
    this.age = age
  }
  // 屬性
  name: string
  age: number
  address: string

  // 功能
  add() {}
  update() {}
  delete() {}
}

const user1 = new User('Tom', 19) //user1.name = Tom
const user2 = new User('Amy', 22) //user2.age = 22
const user3 = new User('John', 50)

interface implements

在class類別 使用implements interface

interface UserInterface {
  id: number
  name: string
  age: number
  address: string
  // 功能
  add: (data: any) => void
  update: (id: number) => boolean
  delete: (id: number) => boolean
}

class LiveUser implements UserInterface {
  id: number
  name: string
  age: number
  address: string

  add(data: any) {}
  update(id: number) {
    // ...
    return true
  }
  delete(id: number) {
    // ...
    return true
  }

  // 額外新增的功能
  startLive() {}
  endLive() {}
}

class VideoUser implements UserInterface {
  id: number
  name: string
  age: number
  address: string

  add(data: any) {}
  update(id: number) {
    // ...
    return true
  }
  delete(id: number) {
    // ...
    return true
  }

  // 額外新增的功能
  postVideo() {}
  deleteVideo() {}
}

extends 類別繼承

//  constructor super

class Animal {
  name: string
  constructor (name: string) {
    this.name = name
  }
  run() {
    console.log('run....', this.name);
  }
}

class Dog extends Animal {
  run() {  //複寫父層的run();
    super.run() //使用super呼叫父層的run();
    console.log('dog run....', this.name);
  }
}

const dog1 = new Dog('狗狗1')
d1.run() //run....狗狗1  //dog run....狗狗1 

abstract 抽象類別

abstract class Animal {
  run() {
    console.log('run....');
  }
  abstract hello(): void 
}

// 抽象類別無法實體化 所以底下使用new會報錯
// const a1 = new Animal()

class Dog extends Animal {
  hello() {
    console.log('hello...')
  }
}

class Cat extends Animal {
  hello() {
    console.log('hello...')
  }
}

const d1 = new Dog()
d1.run()
d1.hello()

Access Modifiers (public, private, protected, readonly)

修飾詞（公開，私有，受保護的, 唯讀）

• public 可以被修改，可以在任何地方存取修改該屬性的值或是使用該函式(預設值)
• private 私有的，只能在在該類別才能存取修改該屬性的值或是使用該函式，外部無法使用，可使用function在原類別調用出來
• protected 受保護的，在該類別或是子類別裡才能存取修改該屬性的值或是使用該函式
• readonly 無法被修改的

//public
class Animal {
    public name: string;
    public constructor(name: string) {
        this.name = name;
    }
}

let dog = new Animal('Dog');
console.log(dog.name); // Dog
dog.name = 'DogDog';
console.log(dog.name); // DogDog

//private
class Animal {
    private name: string;
    public constructor(name: string) {
        this.name = name;
    }

    getName() {
      return this.name
    }
}

let dog = new Animal('Dog');
console.log(dog.name); // 外部無法調用與修改 但主要用在開發階段 在瀏覽器還是可以調用得到
console.log(dog.getName()); // 可調用

class Cat extends Animal {
    constructor(name) {
        super(name);
        console.log(this.name);  // 外部無法調用與修改
    }
}


//protected
class Animal {
  protected name:string;
  public constructor(name:string) {
      this.name = name;
  }
}

class Cat extends Animal {
  constructor(name:string) {
      super(name);
      console.log(this.name); // 外部可以調用和修改
  }
}

//readonly
class Animal {
    readonly name:string;
    public constructor(name:string) {
        this.name = name;
    }
}

let a = new Animal('Jack');
console.log(a.name); // 可讀取
a.name = 'Tom'; //無法修改

JS 原生私有成員寫法（ES6）

加上# 代表private
需在 tsconfig.json 配置檔 指定target es6以上版本 才有支援
"target": "es6",

class UserInformation {
  #name: string = 'Kim'
  getName() {
    return this.#name
  }
}

const u = new UserInformation()
console.log(u.#name); //外部呼叫不到
console.log(u.getName()); //需用內部function調用

Access Modifiers (readonly)

class Animal {
    readonly name:string;
    public constructor(name:string) {
        this.name = name;
    }
}

let a = new Animal('Jack');
console.log(a.name); // 可讀取
a.name = 'Tom'; //無法修改

Access Modifiers (static) 靜態屬性 (es7)

static 可以直接被取用的 用於全局、可共用的大項目中

//共用的金庫 取錢 withdraw 和 查看 getBalance 皆可以直接被取用
class Bank {
  private static balance: number = 1000
  static withdraw(money: number) {
    if (this.balance <= 0) return
    this.balance -= money
  }
  static getBalance() {
    return this.balance
  }
}

// const bb1 = new Bank() static 不用使用new 即可取得
Bank.balance = 99999  // 設為private 無法修改
console.log(Bank.balance); // 設為private 無法被取用

//可以在不用new實體或是extends 直接被取用
function userAWithdraw(money: number) {
  Bank.withdraw(money) 
  console.log(Bank.getBalance())
}

function userBWithdraw(money: number) {
  Bank.withdraw(money) 
  console.log(Bank.getBalance()) 
}

userAWithdraw(200) //800
userAWithdraw(500) //300

override 多型

class SomeComponent {
  //當show(), hide()在原始類別被刪除時， SpecializedComponent繼承的不會跳錯，會被當成是新的function
-    show() {
-        // ...
-    }
-    hide() {
-        // ...
-    }
}
class SpecializedComponent extends SomeComponent {
  show() {
    // ...
  }
  hide() {
    // ...
  }
}

使用override來避免這個情況

class SpecializedComponent extends SomeComponent {
    override show() {
        // ...
    }
    override hide() {
        // ...
    }
}

泛型 <>

function hello<T, U>(text: T, text2: U): U {
  console.log(text, text2);
  return text2;
}

hello<string, number>('abc', 123)
hello<number, boolean>(123, true)

interface Card<T> {
  title: string
  desc: T
}

function printCardInfo<U> (desc: U): Card<U> {
  const data: Card<U> = {
    title: 'ABC',
    desc
  }
  return data
}

console.log(printCardInfo<number>(9999)) 
//U變成number 再傳入Card<T> T也變成number

//class 寫法
interface CarProps<T> {
  name: T
}

class Car<U> implements CarProps<U> {
  name: U
  constructor(name: U) {
    this.name = name
  }
}

const car = new Car<string>('Toyota')
console.log(car);

interface / type extends 條件判斷

//type 
type T1 = string extends string ? string : number  //T1判斷為string
type T1 = string extends boolean ? string : number  //T1則判斷為number

//interface有繼承關係的A, B
interface A {
  name: string
}
interface B extends A {}
type T2 = B extends A ? string : number //T2判斷為string

//interface無繼承關係的C, D 但C的條件滿足D 因此 D extends C 判斷為 true
interface C { name: string }
interface D { name: string, age: number }
type T3 = D extends C ? string : number //T3判斷為string

// T肯定會是array 用extends去指定
function sliceArr<T extends Array<T>>(a: T) {
  console.log(a.length)
}

基本泛型用法

type T4 = 'abc' extends 'abc' ? string : number //T4判斷為string

type T5<T> = T extends 'abc' ? string : number  //T5判斷為string
type Res = T5<'abc'>

Union

type T6 = 'abc' extends 'abc' | 'abc2' ? string : number //T6判斷為string
type T7 = 'abc' | 'abc2' extends 'abc' ? string : number //T7判斷為number

type T8<T> = T extends 'abc' ? string : number
type Res = T8<'abc' | 'abc2'>  // res 會判斷成 string | number
// 步驟會是
// 1. 'abc' -> T = string
// 2. 'abc2' -> T = number

type TT7<T> = [T] extends ['abc'] ? string : number
type Res = TT7<'abc' | 'abc2'> //與T7相同 []內的整個union視為一體 則被判斷成number

never

// never 是所有類型的子類別 N1判斷成string
type N1 = never extends 'abc' ? string : number

type N2<T> = T extends 'abc' ? string : number
type Res = N2<never>  // 被當成一個空的union res判斷成never

infer

// infer用法 類似 var,let  如果T extends Array<infer P>成立 則宣告P
type TT1<T> = T extends Array<infer P> ? P : never;
type R1 = TT1<[123, 'abc']> //符合array 則宣告P為 123, 'abc'
type R2 = TT1<number> //不符合 則不會宣告P 直接進入判斷為never

// function用法
type TT2<T> = T extends (param: infer P) => any ? P : never
type R3 = TT2<(a: number) => void> //符合(param: infer P) => any 則宣告P爲 number

interface UserCard { name: string }
type R4 = TT2<(a: UserCard) => void> //符合(param: infer P) => any 則宣告P爲 UserCard

type R5 = TT2<[]> //不符合 則不會宣告P 直接進入判斷為never

keyof 用法

interface UserCard {
  name: string
  age: number
  cardTitle: string
  cardDesc: string
}

type T1 = keyof UserCard
// T1 會被推斷成union類型 內容有 'name' | 'age' | 'cardTitle' | 'cardDesc'
const a: T1 = 'name'


// 泛型 K去繼承T的key值
function getValue<T, K extends keyof T> (obj: T, key: K): T[K] {
  return obj[key]
}

typescript module 模組

假設環境內不同ts檔案有相同名命，ts會視為同一個模組便會跳錯，避免這種情形可以在個別ts設定 export 讓ts視為分開的模組

module 模組 與 tsconfig.json 配置檔

• https://aka.ms/tsconfig

上一篇有紀錄一些配置檔的設定，這邊會主要針對模組化的部分

• 如果使用webpack的ts loader，官方文件不建議module設定為CommonJS，會失去tree shaking的功能。只有在es6/es2015以上才有tree shaking的效果。

“module”: “es6”
“target”: “es6”

• 輸出的版本

“moduleResolution”: “node”

• 用node的方式去解析import路徑

“esModuleInterop”: true

• 可以引入較舊的CommonJS pkg

“allowSyntheticDefaultImports”: true

• 假設設定false 當引入沒有設定export default檔案時，是無法給予別名 可用 import * as webpack from ‘webpack’; 替代或是設定為true

• 設定根目錄
  例如引入時 import abc from '../utils/abc.ts' 可以設定成 import abc from '@/utils/abc.ts' @代表 ./src底下

“baseUrl”: “./src”,
“paths”: {
“@/“: [““]
}

若有使用webpack打包，也須在webpack.config.js下設定

resolve: {
  extensions: ['.tsx', '.ts', '.js'],
  alias: {
    '@': path.resolve(__dirname, 'src'),
  }
},

相關學習資料：

• 布魯斯的 TypeScript + React 全攻略
• Typescript Cheat Sheets
• 理解TypeScript中的infer关键字
• TypeHero