zoukankan      html  css  js  c++  java
  • ts 模块

    简介

    TypeScript 模块的设计理念是可以更换的组织代码。

    模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。

    两个模块之间的关系是通过在文件级别上使用 importexport 建立的。

    模块使用模块加载器去导入其它的模块。 在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js

    此外还有有 SystemJsWebpack

    模块导入导出语法

    模块导出使用关键字 export 关键字,语法格式如下:

    // 文件名 : SomeInterface.ts 
    export interface SomeInterface { 
       // 代码部分
    }
    

    要在另外一个文件使用该模块就需要使用 import 关键字来导入:

    import someInterfaceRef = require("./SomeInterface");
    

    示例

    IShape.ts 文件代码

    /// <reference path = "IShape.ts" /> 
    export interface IShape { 
       draw(); 
    }
    

    Circle.ts 文件代码

    import shape = require("./IShape"); 
    export class Circle implements shape.IShape { 
       public draw() { 
          console.log("Cirlce is drawn (external module)"); 
       } 
    }
    

    Triangle.ts 文件代码

    import shape = require("./IShape"); 
    export class Triangle implements shape.IShape { 
       public draw() { 
          console.log("Triangle is drawn (external module)"); 
       } 
    }
    

    TestShape.ts 文件代码

    import shape = require("./IShape"); 
    import circle = require("./Circle"); 
    import triangle = require("./Triangle");  
     
    function drawAllShapes(shapeToDraw: shape.IShape) {
       shapeToDraw.draw(); 
    } 
     
    drawAllShapes(new circle.Circle()); 
    drawAllShapes(new triangle.Triangle());
    

    使用 tsc 命令编译以上代码(AMD):

    tsc --module amd TestShape.ts 
    

    或者编译成commonjs

    tsc --module commonjs TestShape.ts
    

    具体编译结果,可去原文看

    转载自:https://www.runoob.com/typescript/ts-module.html

  • 相关阅读:
    直接报错了:无法加载文件 C:UsersAdministratorAppDataRoaming pmvue.ps1,因为在此系统中禁止执行脚本
    [vue系列]-vue+vue-i18n+elementUI 国际化
    new vue 实例发生了什么呢?
    vue引用外部JS的两种方案
    web轻量级富文本框编辑
    Cannot read property '_withTask' of undefined
    element 动态合并表格
    前端如何获取原始图片大小
    ASP.Net Core使用Ajax局部更新
    ASP.NET Core中的jQuery Unobtrusive Ajax帮助器
  • 原文地址:https://www.cnblogs.com/makalochen/p/14515968.html
Copyright © 2011-2022 走看看