关于TypeScript模块导入的那些事

前言

模块在其自身的作用域里执行，而不是在全局作用域里；这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用export之一导出它们。 相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你必须要导入它们，可以使用import之一。

模块是自声明的。在TypeScript里，两个模块之间的关系是通过在文件级别上使用import和export建立的。

下面话不多说了，来一起看看详细的介绍吧

ES6 模块导入的限制

我们先来看一个具体的例子：

在 Node 项目里，使用 CommonJS 规范引入一个模块：

const koa = require('koa')

改写为 TypeScript（1.5+ 版本）时，通常有两种方式：

使用 ES6 模块导入方式：

// allowSyntheticDefaultImports: false
import * as koa from 'koa'

使用 TypeScript 模块导入语法：

import koa = require('koa')

两者大部分是等价的，但 ES6 规范对 import * as 创建出的模块对象有一点限制。

根据该规范，该模块对象不可被调用，也不可被实例化，它只具有属性。

因此，如果你想调用该对象，或者使用 new 方法，在 allowSyntheticDefaultImports: false 的配置下，应该使用例子中的第二种方式。

2.7 版本对 CommonJs/AMD/UMD 模块导入的增强

在之前的版本，TypeScript 对 CommonJs/AMD/UMD 模块的处理方式与 ES6 模块相同，这会导致一些问题：

  • 如前文所提到的，当导入一个 CommonJs/AMD/UMD 模块时，TypeScript 视 import * as koa from 'koa' 与 const koa = require('koa') 等价，但使用 import * as 创建的模块对象实际上不可被调用以及被实例化。
  • 类似的，当导入一个 CommonJs/AMD/UMD 模块时，TypeScript 视 import foo from 'foo' 与 const koa = require('koa').default 等价，但在大部分 CommonJs/AMD/UMD 模块里，它们并没有默认导出。

在 2.7 的版本里，TypeScript 提供了一个新选项 --esModuleInterop，旨在解决上述问题，
当使用该选项，且模块为 CommonJs/AMD/UMD 时，它会导入一个可调用或是可实例化的模块，同时它规定该模块必须作为默认导入：

import koa from 'koa'
const app = new koa()

模块导入仅仅是一些声明类型

在以非相对路径导入一个模块时，你可能会看到 Could not find a declaration file for module 'someModule' 的错误， 此时你可以安装对应模块的声明文件或者写一个包含 declare module 'someModule' 的声明文件。
实际上，当我们导入一个模块时：

import koa from 'koa'
// import koa = require('koa')

它所做的事情只有两个：

  • 导入模块的所有类型信息；
  • 确定运行时的依赖关系。

当你加载此模块，但并没有使用，或仅当作类型来使用时，编译后，此模块将会被移除。

当不使用时；

import koa from 'koa'

编译后：

仅当做类型使用时：

import koa from 'koa'
let k: koa

编译后：

var k

做为值使用时，编译后，此模块将会被保留：

import koa from 'koa'
const app = new koa()

编译后（假设使用 commonjs）：

var __importDefault = (this && this.__importDefault) || function (mod) {
 return (mod && mod.__esModule) ? mod : { "default": mod };
};
var koa_1 = __importDefault(require("koa"));
var k = new koa_1.default();

注： __importDefault 为使用 --esModuleInterop 选项时产生的方法。

参考

http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html
https://stackoverflow.com/questions/35706164/typescript-import-as-vs-import-require?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
https://basarat.gitbooks.io/typescript/content/docs/project/external-modules.html

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • TypeScript中的方法重载详解

    TypeScript中的方法重载详解

    前言 方法重载(overload)在传统的静态类型语言中是很常见的.JavaScript 作为动态语言, 是没有重载这一说的.一是它的参数没有类型的区分,二是对参数个数也没有检查.虽然语言层面无法自动进行重载,但借助其动态的特性,我们可以在代码中手动检查入参的类型,或者通过 arguments 获取到参数个数,从而实现根据不同的入参做不同的操作. 比如有一个获取聊天消息的方法,根据传入的参数从数组中查找数据.如果入参为数字,则认为是 id,然后从数据源中找对应 id 的数据并返回,否则当成类型,

  • 使用TypeScript开发微信小程序的方法

    使用TypeScript开发微信小程序的方法

    TypeScript简介: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发. TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性.

  • 关于TypeScript中import JSON的正确姿势详解

    前言 Typescript是微软内部出品的,用actionscript的语法在写js的一门新语言,最近 TypeScript 中毒,想想我一个弱类型出身的人,怎么就喜欢上了类型约束--当然这不是重点,重点可能还是 JS 没有接口,我没法靠 class 语法糖写的非常 OO--下面这篇文章想说的其实是在 ts 中如何正确的 import json 格式. 首先我使用了基本姿势 import * as variable from './fooooooo.json' 结果发现他提示我并没有这个 mod

  • TypeScript 中接口详解

    在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念. 先看看一个简单的例子: function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } var myObj = { size: 10, label: "Size 10 Object" }; printLabel

  • TypeScript入门-基本数据类型

    TypeScript入门-基本数据类型

    大致介绍 TypeScript是由C#语言之父Anders Hejlsberg主导开发的一门编程语言,TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的面向对象编程,它相当于是JavaScript的超集 ES5.ES6和TypeScript的关系: 安装 首先需要安装npm,然后在输入 npm install -g typescript 安装完成后,因为TypeScript是以.ts结尾的,要想运行就得把他编译js文件,编译的方法特别简单就是使用tsc命令 ts

  • TypeScript学习之强制类型的转换

    前言 使用强类型变量常常需要从一种类型向另一种类型转换,通常使用ToString或ParseInt可以来实现一些简单的转换,但是有时候需要像.NET语言中那样将一种类型显示的转换为另一种类型,在TypeScript规范中,被称为"类型断言",它仍然是类型转换,只是语法是有些不同.下面来详细看看TypeScript的强制类型转换. TypeScript强制类型转换 在 TypeScript 中将一个 number 转换成 string ,这样做会报错: var a:number = 12

  • 关于TypeScript模块导入的那些事

    前言 模块在其自身的作用域里执行,而不是在全局作用域里:这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export之一导出它们. 相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import之一. 模块是自声明的.在TypeScript里,两个模块之间的关系是通过在文件级别上使用import和export建立的. 下面话不多说了,来一起看看详细的介绍吧 ES6 模块导入的限制 我们先来看一个具体的例子: 在 Node 项目

  • 详解Typescript 内置的模块导入兼容方式

    一.前言 前端的模块化规范包括 commonJS.AMD.CMD 和 ES6.其中 AMD 和 CMD 可以说是过渡期的产物,目前较为常见的是commonJS 和 ES6.在 TS 中这两种模块化方案的混用,往往会出现一些意想不到的问题. 二.import * as 考虑到兼容性,我们一般会将代码编译为 es5 标准,于是 tsconfig.json 会有以下配置: { "compilerOptions": { "module": "commonjs&qu

  • python 中的列表生成式、生成器表达式、模块导入

    5.16 列表生成式 l=[] for i in range(100): l.append('egg%s' %i) print(l) ​ l=['egg%s' %i for i in range(100)] l=['egg%s' %i for i in range(1000) if i > 10] print(l) 5.17 列表生成式与生成器表达式的应用 names=['egon','alex_sb','wupeiqi','yuanhao','lxx'] res=map(lambda x:x.

  • python模块导入方式浅析步骤

    目录 1.模块的使用 2.导入模块并使用 3.模块的导入方式之from-import 语句 4.__all__变量用来控制* 5.总结 首先啊,在python中我们熟知的py文件就是一个模块,也就是换言之以py结尾的Python源代码文件都是一个模块我就简单概括一下了直接上代码 1.模块的使用 使用模块里的工具前需要导入模块, 模块的导入方式之import······· 单个:import 模块名多个:import 模块1import 模块2import 模块1,模块2(一般不推荐使用)(多个)

  • python 环境变量和import模块导入方法(详解)

    1.定义 模块:本质就是.py结尾的文件(逻辑上组织python代码)模块的本质就是实现一个功能 文件名就是模块名称 包: 一个有__init__.py的文件夹:用来存放模块文件 2.导入模块 import 模块名 form 模块名 import * from 模块名 import 模块名 as 新名称 3. 导入模块本质 import 模块名 ===> 将模块中所有的数据赋值给模块名,调用时需要模块名.方法名() from 模块名 import 方法名 ==>将该方法单独放到当前文件运行一遍

  • Python创建模块及模块导入的方法

    本文实例讲述了Python创建模块及模块导入的方法.分享给大家供大家参考.具体分析如下: python学习手册中写道: 定义模块,只要使用文本编辑器,把一些python代码输入到文本中,然后以.py为后缀名进行保存,任何此类文件都会被认为是python模块. 比如说,下面的代码输入到一个文件中,就可以看作是一个模块: def printme(var): print var if __name__ == '__main__': printme(1) 假设说输入到a.py中,那么import a就可

  • Python中的模块导入和读取键盘输入的方法

    导入模块 import 语句 想使用Python源文件,只需在另一个源文件里执行import语句,语法如下: import module1[, module2[,... moduleN] 当解释器遇到import语句,如果模块在当前的搜索路径就会被导入. 搜索路径是一个解释器会先进行搜索的所有目录的列表.如想要导入模块hello.py,需要把命令放在脚本的顶端: #!/usr/bin/python # -*- coding: UTF-8 -*- # 导入模块 import support # 现

  • three.js中文文档学习之通过模块导入

    前言 本文主要给大家介绍了关于three.js通过模块导入的相关内容,通过 script 标签导入 three.js 是很好的入门并快速运行的方式,对于长期更新的项目有些不足,比如: 你需要手动调用和引入库里的副本,作为你项目源码的一部分. 更新库的版本是手动的过程 当引入新版本库,你的版本管理差异会与源文件混乱 使用像 NPM 这样的依赖管理能避免这些版本问题的不足. 通过 NPM 安装 three.js 已作为 npm 模块发布,详见:npm.关于npm的卸载与安装大家可以参考这篇文章:ht

  • 对Python模块导入时全局变量__all__的作用详解

    Python中一个py文件就是一个模块,"__all__"变量是一个特殊的变量,可以在py文件中,也可以在包的__init__.py中出现. 1.在普通模块中使用时,表示一个模块中允许哪些属性可以被导入到别的模块中, 如:全局变量,函数,类.如下,test1.py和main.py test1.py __all__=["test"] def test(): print('----test-----') def test1(): print('----test1----

  • python模块导入的细节详解

    python模块导入细节 本文主要介绍了关于python模块导入的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 官方手册:https://docs.python.org/3/tutorial/modules.html 可执行文件和模块 python源代码文件按照功能可以分为两种类型: 用于执行的可执行程序文件 不用与执行,仅用于被其它python源码文件导入的模块文件 例如文件a.py和b.py在同一目录下,它们的内容分别是: # b.py x="var x in m

随机推荐