成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

為 Vue3 學(xué)點(diǎn) TypeScript, 什么是命名空間(namespace)

greatwhole / 2813人閱讀

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

往期目錄

第一課, 體驗(yàn)typescript

第二課, 基礎(chǔ)類型和入門高級類型

第三課, 什么是泛型?

第四課, 解讀高級類型

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

什么時(shí)候要用命名空間?

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

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");
    }
}

仔細(xì)看你會(huì)發(fā)現(xiàn)namespace下還有export, export在這里用來表示哪些功能是可以外部訪問的:

Tools.TIMEOUT // 報(bào)錯(cuò), Tools上沒有這個(gè)屬性
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代碼能發(fā)現(xiàn), 在js中命名空間其實(shí)就是一個(gè)全局對象. 如果你開發(fā)的程序想要暴露一個(gè)全局變量就可以用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:/// " 導(dǎo)入

通過reference進(jìn)行導(dǎo)入相當(dāng)于xxx.ts文件內(nèi)的命名空間和當(dāng)前文件進(jìn)行了合并:

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;

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

通過import導(dǎo)入

如果命名空間是用export導(dǎo)出的, 那么使用的時(shí)候就不可以用/// 了, 要用import導(dǎo)入:

xxx.ts
// xxx.ts
// 使用export導(dǎo)出
export interface Fruits{
    taste: string;
    hardness: number;
}

export interface Meat{
    taste: string;
    heat: number;
}
yyy.ts
// yyy.ts
import {Food} from "./xxx"; // 使用import導(dǎo)入
let meat: Food.Meat;
let fruits: Food.Fruits;
如何合并多個(gè)命名空間

我們知道接口是可以合并的, 命名空間也是可以的, 下面我們把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中設(shè)置了"module": "umd",, 那么export = Food等價(jià)于export default Food, export=常見于支持umd的插件的聲明文件.

命名空間在lodash里的應(yīng)用

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

關(guān)于聲明文件

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

總結(jié)

其實(shí)如果你的項(xiàng)目直接是用ts寫的可能用不上namespace, 畢竟export就可以產(chǎn)生模塊, 模塊天然就有隔離分組作用.

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

最后建議大家多寫多練, 祝大家早日上手ts, 放幾個(gè)我用ts寫的項(xiàng)目當(dāng)做參考, 拋磚引玉, 加油!

手勢庫, 支持點(diǎn)擊/拖拽/旋轉(zhuǎn)/縮放: https://github.com/any86/any-...

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110065.html

相關(guān)文章

  • 為vue3學(xué)點(diǎn)typescript, 解讀高級類型

    摘要：直達(dá)第一課體驗(yàn)第二課基礎(chǔ)類型和入門高級類型第三課泛型第四課解讀高級類型第五課什么是命名空間回顧第二課的時(shí)候?yàn)榱烁玫闹v解基礎(chǔ)類型所以我們講解了一部分高級類型比如接口聯(lián)合類型交叉類型本節(jié)課我會(huì)把剩余高級類型都講完知識點(diǎn)摘要本節(jié)課主要關(guān)鍵詞為自 直達(dá) 第一課, 體驗(yàn)typescript 第二課, 基礎(chǔ)類型和入門高級類型 第三課, 泛型 第四課, 解讀高級類型 第五課, 什么是命名空間(na...

    chuyao 評論0 收藏0

  • 為vue3學(xué)點(diǎn)typescript(1), 體驗(yàn)typescript

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

    Batkid 評論0 收藏0

  • 為vue3學(xué)點(diǎn)typescript, 基礎(chǔ)類型和入門高級類型

    摘要：導(dǎo)航第一課體驗(yàn)第二課基礎(chǔ)類型和入門高級類型第三課泛型第四課解讀高級類型很重要這一節(jié)很重要可以說是的最核心部分這一節(jié)學(xué)完其實(shí)就可以開始用寫代碼了想想中的再看看標(biāo)題中的類型字所以請大家務(wù)必認(rèn)真什么是入門高級類型因?yàn)楦呒夘愋偷膬?nèi)容比較多但是有些基 導(dǎo)航 第一課, 體驗(yàn)typescript 第二課, 基礎(chǔ)類型和入門高級類型 第三課, 泛型 第四課, 解讀高級類型 很重要 這一節(jié)很重要, 可以說...

    Songlcy 評論0 收藏0

  • 為vue3學(xué)點(diǎn)typescript, 泛型

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

    tianlai 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<