typescriptモジュール化、名前空間

フロントエンドの開発とエンジニアリング、モジュール化は不可欠であり、typescriptもそれをサポートしています。

エクスポートまたはエクスポートのデフォルトでエクスポート

// 导出 type 
export type testType = {
    
    
a: number;
b: string;
}

// 导出 interface
export interface testInterface {
    
    
	a: number;
	b: string;
}

// 默认导出同样支持
// inerface 支持同时声明，默认导出 而type必须先声明后导出
export default interface Config {
    
    
  name: string;
}
// 同一个js模块只能存在一个默认导出哦
 type Config2 = {
    
    name: string}
  export default Config2

インポートとインポート

import {
    
    testInterface, testType }, Config from 'xxxxx.ts';

const test1:testInterface = {
    
    
	a: 18,
	b: 'dx'
}

名前空間

// 命名空间 A
namespace A {
    
    
 export class Animals {
    
    
    name: string;
    constructor(name:string) {
    
    
      this.name = name    
    }
    eat(food: string) {
    
    
      console.log(`${
      
      this.name}正在吃${
      
      food}`)
    }
  }
}

// 只要命名空间内的被导出，外部或其他命名空间就可以使用
const Dog1 = new  A.Animals('小汪')

// 命名空间B
namespace B {
    
    

// 不同命名空间的命名可以重复
const Dog1 = new A.Animals('小明');

  // 不同命名空间的类容，只要导出，就可以使用
 export const Cat = new A.Animals('小喵');
} 

console.log(B.Cat.eat('猫粮'))  // 小喵正在吃猫粮


// 命名空间同样可以当作变量导出
export namespace C {
    
    
  export const Pig = new A.Animals('小花')
}

es5は名前空間を実装します

各名前空間は自己実行関数であり、各エクスポートによってエクスポートされたコンテンツは、returnの関数returnになります。

"use strict";
Object.defineProperty(exports, "__esModule", {
    
     value: true });
// 命名空间 A
var A;
(function (A) {
    
    
    var Animals = /** @class */ (function () {
    
    
        function Animals(name) {
    
    
            this.name = name;
        }
        Animals.prototype.eat = function (food) {
    
    
            console.log(this.name + "\u6B63\u5728\u5403" + food);
        };
        return Animals;
    }());
    A.Animals = Animals;
})(A || (A = {
    
    }));
// 只要命名空间内的被导出，外部或其他命名空间就可以使用
var Dog1 = new A.Animals('小汪');
// 命名空间B
var B;
(function (B) {
    
    
    // 不同命名空间的命名可以重复
    var Dog1 = new A.Animals('小明');
    // 不同命名空间的类容，只要导出，就可以使用
    B.Cat = new A.Animals('小喵');
})(B || (B = {
    
    }));
console.log(B.Cat.eat('猫粮')); // 小喵正在吃猫粮
var C;
(function (C) {
    
    
    C.Pig = new A.Animals('小花');
})(C = exports.C || (exports.C = {
    
    }));