成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

greatwhole / 2889人閱讀

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

往期目錄

第一課, 體驗typescript

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

第三課, 什么是泛型?

第四課, 解讀高級類型

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

什么時候要用命名空間?

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

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

仔細看你會發(fā)現(xiàn)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代碼能發(fā)現(xiàn), 在js中命名空間其實就是一個全局對象. 如果你開發(fā)的程序想要暴露一個全局變量就可以用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文件內(nèi)的命名空間和當前文件進行了合并:

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導入

如果命名空間是用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特性的代碼, 可以發(fā)現(xiàn)主要是在聲明文件中(xxx.d.ts), 用來表示暴露出來的全局變量(比如lodash的"_").

關(guān)于聲明文件

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

總結(jié)

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

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

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

手勢庫, 支持點擊/拖拽/旋轉(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://m.hztianpu.com/yun/110065.html

相關(guān)文章

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

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

    chuyao 評論0 收藏0

  • 為vue3學點typescript(1), 體驗typescript

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

    Batkid 評論0 收藏0

  • 為vue3學點typescript, 基礎類型和入門高級類型

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

    Songlcy 評論0 收藏0

  • 為vue3學點typescript, 泛型

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

    tianlai 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<