iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
Modern Web

Angular10 實作教學系列 第 8

NG10鐵人賽 - 8 - 型別介紹 - type

  • 分享至 

  • xImage
  •  

type

功能一、定義純文字

ts

AnimalStrings 是 型別

export enum AnimalEnum {
  Dog,
  Cat,
  Pig
}

type AnimalStrings = keyof typeof AnimalEnum;
// const a: AnimalStrings = 'Cat';

功能二、定義 new 型別

ts

// TypeScript 官網寫法,但 VS Code 給我毛毛蟲
interface AnimalConstructor {
    new(hp: number): AnimalInterface;
}

ts

// 無毛毛蟲版本
export type AnimalConstructor = new(hp: number) => AnimalInterface;

改寫自 TypeScript 範本 - 綜合版本

ts

interface AnimalInterface {
    call(): void;
}

interface AnimalConstructor {
    new(hp: number): AnimalInterface;
}

function createAnimal(ani: AnimalConstructor, hp: number): AnimalInterface {
    return new ani(hp);
}

class Human implements AnimalInterface {
    constructor(hp: number) {}
    call() {
        console.log("水之呼吸");
    }
}

class Dog implements AnimalInterface {
    constructor(hp: number) {}
    call() {
        console.log("旺旺");
    }
}

let human = creatAnimal(Human, 100);
let dog = creatAnimal(Dog, 30);

改寫來源 https://www.typescriptlang.org/docs/handbook/interfaces.html#class-types


上一篇
NG10鐵人賽 - 7 - 型別介紹 - interface、class、enum
下一篇
NG10鐵人賽 - 9 - 型別實作(1) - 物件實體化實作
系列文
Angular10 實作教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言