為 Vue3 學點 TypeScript, 什么是命名空間(namespace)

greatwhole 發布于2019-08-26 14:06 / 2800人閱讀

摘要：往期目錄第一課體驗第二課基礎類型和入門高級類型第三課什么是泛型第四課解讀高級類型第五課什么是命名空間什么時候要用命名空間如果你發現自己寫的功能函數類接口等越來越多你想對他們進行分組管理就可以用命名空間下面先用類舉例仔細看你會發現下還有在這里

往期目錄

第一課, 體驗typescript

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

第三課, 什么是泛型?

第四課, 解讀高級類型

第五課, 什么是命名空間(namespace)?

什么時候要用命名空間?

如果你發現自己寫的功能(函數/類/接口等...)越來越多, 你想對他們進行分組管理就可以用命名空間, 下面先用"類"舉例:

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在這里用來表示哪些功能是可以外部訪問的:

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;

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

命名空間不僅可以用在邏輯代碼中, 也可以用在類型, 用來給類型分組:

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種方式, 一種/// , 還有就是import:

通過 "http:/// " 導入

通過reference進行導入相當于xxx.ts文件內的命名空間和當前文件進行了合并:

xxx.ts

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

yyy.ts

// yyy.ts


let meat: Food.Meat;
let fruits: Food.Fruits;

現在在yyy.ts中我們就可以直接使用xxx.ts中的Food類型了, 而不需要使用import.

通過import導入

如果命名空間是用export導出的, 那么使用的時候就不可以用/// 了, 要用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

namespace Food {
    export interface Vegetables{
        title: string;
        heat: number;
    }
}

type Vh = Food.Vegetables["heat"] // number;

export=

如果你的tsconfig中設置了"module": "umd",, 那么export = Food等價于export default Food, export=常見于支持umd的插件的聲明文件.

命名空間在lodash里的應用

其實我們看下那些老牌插件(jq/lodash)里使用namespace特性的代碼, 可以發現主要是在聲明文件中(xxx.d.ts), 用來表示暴露出來的全局變量(比如lodash的"_").

關于聲明文件

上面為了解釋命名空間提及了聲明文件(xxx.d.ts), 但由于聲明(declare)的內容很多, 所以我會在下一節詳細介紹.

總結

其實如果你的項目直接是用ts寫的可能用不上namespace, 畢竟export就可以產生模塊, 模塊天然就有隔離分組作用.

能力有限, 如果路過大神看到不對的地方還請多多指點, 我必虛心接受.

最后建議大家多寫多練, 祝大家早日上手ts, 放幾個我用ts寫的項目當做參考, 拋磚引玉, 加油!

手勢庫, 支持點擊/拖拽/旋轉/縮放: https://github.com/any86/any-...

為vue組件生成this.$xxx的命令: https://github.com/any86/vue-...

云服務器 GPU云服務器命名空間namespace js里命名空間是什么云空間是什么空間域名是什么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110065.html

為vue3學點typescript, 解讀高級類型

摘要：直達第一課體驗第二課基礎類型和入門高級類型第三課泛型第四課解讀高級類型第五課什么是命名空間回顧第二課的時候為了更好的講解基礎類型所以我們講解了一部分高級類型比如接口聯合類型交叉類型本節課我會把剩余高級類型都講完知識點摘要本節課主要關鍵詞為自直達第一課, 體驗typescript 第二課, 基礎類型和入門高級類型第三課, 泛型第四課, 解讀高級類型第五課, 什么是命名空間(na...

chuyao 2019-08-26 10:28 評論0 收藏0
為vue3學點typescript(1), 體驗typescript

摘要：更新啦第一課體驗第二課基礎類型和入門高級類型第三課泛型第四課解讀高級類型要來了看了的視頻特別興奮要來了是用開發的我揣測在的帶領下會成為主流呢要不先學點年最酷的前端技術我是年初開始使用的自從開始用上了就喜歡上了真的愛不釋手最愛他幾點很多小錯誤更新啦第一課, 體驗typescript 第二課, 基礎類型和入門高級類型第三課, 泛型第四課, 解讀高級類型 vue3要來了看了vue ...

Batkid 2019-08-23 18:26 評論0 收藏0
為vue3學點typescript, 基礎類型和入門高級類型

摘要：導航第一課體驗第二課基礎類型和入門高級類型第三課泛型第四課解讀高級類型很重要這一節很重要可以說是的最核心部分這一節學完其實就可以開始用寫代碼了想想中的再看看標題中的類型字所以請大家務必認真什么是入門高級類型因為高級類型的內容比較多但是有些基導航第一課, 體驗typescript 第二課, 基礎類型和入門高級類型第三課, 泛型第四課, 解讀高級類型很重要這一節很重要, 可以說...

Songlcy 2019-08-23 18:27 評論0 收藏0
為vue3學點typescript, 泛型

摘要：往期第一課體驗第二課基礎類型和入門高級類型第三課泛型第四課解讀高級類型插一課本來打算接著上節課把高級類型都講完但是寫著寫著我發現高級類型中有很多地方都需要泛型的知識那么先插一節泛型什么是類型變量和泛型變量的概念我們都知道可以表示任意數據類型往期第一課, 體驗typescript 第二課, 基礎類型和入門高級類型第三課, 泛型第四課, 解讀高級類型插一課本來打算接著上節課, ...

tianlai 2019-08-23 18:41 評論0 收藏0