iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
自我挑戰組

從新手開始TypeScript系列 第 30

Day30-TypeScript(TS)的模組(Modules) Part2

今天是最後一天了,
但該講的還是要講完,
所以我們就接續上一篇的TypeScript(TS)的模組(Modules)吧。

那麼今天就帶範例來吧,
接續上篇的範例,
要匯出成員如下,
匯出檔案名稱為export.ts
程式碼內容如下,

export class Employee {
    constructor(public empId: number, public empName: string) {
    }
    getInfo() {
        return ` ${this.empId} , ${this.empName} `;
    }
}
export let projectName = "HR Management";

那麼這邊我樣介紹三種引用成員的方式,如下。

引用方式一

第一種就是昨天的最基本的,
將要引用的成員逐一打出來做引用。

import { Employee, projectName } from "./export";

//使用
let emp = new Employee(1, "Mary");
console.log(emp.getInfo());// 1,Mary
引用方式二

第二種就是把原來的成員重新命名,
用新的命名來做使用,
重新命名的方式就是在原來的成員名稱後加上as後面再接新的命名。

import { Employee as newEmployee } from "./export";

//使用
let emp = new newEmployee(1, "Mary");
console.log(emp.getInfo());// 1,Mary
引用方式三

第三種方式就是不管匯出的成員有多少,
總之全部都引用,
那就在import與from之間寫上 * as all
就會得到所有的匯出成員。

import * as all from "./export";

//使用
let emp = new all.Employee(1, "Mary");
console.log(emp.getInfo());
console.log(all.projectName);

模組預設匯出項目(Default Export)

每個模組可以選擇性的匯出一個預設項目。
可以利用default關鍵字設定模組預設匯出項目(Default Exports),
適用於模組中只匯出一個項目時,
且一個模組只有一個預設匯出項目。

讓我們看看範例吧。
首先跟之前一樣,
先建立一個檔案,
匯出檔案名稱為export.ts
程式碼內容如下,

export default class Employee {
    constructor(public empId: number, public empName: string) {
    }
    getInfo() {
        return ` ${this.empId} , ${this.empName} `;
    }
}
export let projectName = "HR Management";

要引用預設匯出的項目成員用法也有些不同,

import Employee, { projectName } from "./export";

//使用
let emp = new Employee(1, "Mary");
console.log(emp.getInfo());// 1,Mary
console.log(projectName);// HR Management

引用預設匯出的項目成員不需要用 **{}**將名稱刮起來,
直接打上名稱就可以引用了。

今日結語

今天是鐵人的第三十天,
希望大家都有了解並懂得使用這些TypeScript(TS),
TS還有很多很多東西可以玩的,
我只能說讀完這三十天只能算是基礎吧,
最後,
就算結束了鐵人賽,
大家依然還是要加油啦~
加油加油!


上一篇
Day29-TypeScript(TS)的模組(Modules) Part1
系列文
從新手開始TypeScript30

尚未有邦友留言

立即登入留言