爲 Vue3 學點 TypeScript, 命名空間(namespace)是什麼?

時間 2019-11-05

標籤 vue3 vue typescript 命名空間 namespace 什麼简体版

原文原文鏈接

往期目錄

第一課, 體驗typescriptjavascript

第二課, 基礎類型和入門高級類型前端

第三課, 泛型vue

第四課, 解讀高級類型java

第五課, 命名空間(namespace)是什麼git

何時要用命名空間?

若是你發現本身寫的功能(函數/類/接口等...)愈來愈多, 你想對他們進行分組管理就能夠用命名空間, 下面先用"類"舉例:github

namespace Tools {
    const TIMEOUT = 100;

    export class Ftp {
        constructor() {
            setTimeout(() => {
                console.log('Ftp');
            }, TIMEOUT)
        }
    }

    export class Http {
        constructor() {
            console.log('Http');
        }
    }

    export function parseURL(){
        console.log('parseURL');
    }
}
複製代碼

仔細看你會發現namespace下還有export, export在這裏用來表示哪些功能是能夠外部訪問的:typescript

Tools.TIMEOUT // 報錯, Tools上沒有這個屬性
Tools.parseURL() // 'parseURL'
複製代碼

最後咱們看下編譯成js後的代碼:微信

"use strict";
var Tools;
(function (Tools) {
    const TIMEOUT = 100;
    class Ftp {
        constructor() {
            setTimeout(() => {
                console.log('Ftp');
            }, TIMEOUT);
        }
    }
    Tools.Ftp = Ftp;
    class Http {
        constructor() {
            console.log('Http');
        }
    }
    Tools.Http = Http;
    function parseURL() {
        console.log('parseURL');
    }
    Tools.parseURL = parseURL;
})(Tools || (Tools = {}));
複製代碼

看js代碼能發現, 在js中命名空間其實就是一個全局對象. 若是你開發的程序想要暴露一個全局變量就能夠用namespace;函數

如何用命名空間來管理類型?

命名空間不只能夠用在邏輯代碼中, 也能夠用在類型, 用來給類型分組:post

namespace Food {
    export type A = Window;
    export interface Fruits{
        taste: string;
        hardness: number;
    }

    export interface Meat{
        taste: string;
        heat: number;
    }
}

let meat: Food.Meat;
let fruits: Food.Fruits;
複製代碼

如何引入寫好的命名空間?

有2種方式, 一種/// <reference path="xxx.ts" />, 還有就是import:

經過 "/// <reference path='xxx.ts'/>" 導入

經過reference進行導入至關於xxx.ts文件內的命名空間和當前文件進行了合併:

xxx.ts

// xxx.ts
namespace Food {
    export interface Fruits{
        taste: string;
        hardness: number;
    }
}
複製代碼

yyy.ts

// yyy.ts
<reference path="xxx.ts" />

let meat: Food.Meat;
let fruits: Food.Fruits;
複製代碼

如今在yyy.ts中咱們就能夠直接使用xxx.ts中的Food類型了, 而不須要使用import.

經過import導入

若是命名空間是用export導出的, 那麼使用的時候就不能夠用/// <reference/>了, 要用import導入:

xxx.ts

// xxx.ts
// 使用export導出
export interface Fruits{
    taste: string;
    hardness: number;
}

export interface Meat{
    taste: string;
    heat: number;
}
複製代碼

yyy.ts

// yyy.ts
import {Food} from './xxx'; // 使用import導入
let meat: Food.Meat;
let fruits: Food.Fruits;
複製代碼

如何合併多個命名空間

咱們知道接口是能夠合併的, 命名空間也是能夠的, 下面咱們把Vegetables類型合併到Food類型中:

xxx.ts

// xxx.ts
namespace Food {
    export interface Fruits{
        taste: string;
        hardness: number;
    }
}
複製代碼

yyy.ts

// yyy.ts
<reference path="xxx.ts" />
namespace Food {
    export interface Vegetables{
        title: string;
        heat: number;
    }
}

type Vh = Food.Vegetables['heat'] // number;
複製代碼