- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
最近用 TypeScript 写 npm 包,各种模块、命名空间、全局定义等等扰得我睡不着觉.
我便苦心研究,总结了几个比较冷门的,国内貌似基本上找不到资料的导入导出用法,顺便在其中又插入一些不那么冷门的用法,于是本篇文章来了.
因为一开始也没想做成大全,可能之后还会继续更新吧.
导入模块中的东西相信大家都不陌生。唯一需要注意的便是默认导出与“星号”导出的区别.
import * as Mod from './mod';
// 类似于
const Mod = require('./mod');
import ModDef from './mod';
// 类似于
const { default: ModDef } = require('./mod');
import ModDef, { a, b } from './mod';
// 类似于
const {
default: ModDef,
a, b
} = require('./mod');
在模块中导出东西相信大家也不陌生,不过这里还是详细讲解一下.
在模块中导出东西有很多种方法。导出总共可分为 4 类:
命名导出有两种方法,一种是声明着导出 。
export namespace A { }
export function b() { }
export class C { }
export const d = 123;
export let { e } = { e: 'hh' };
一种是声明后导出 。
namespace A { }
function b() { }
class C { }
const d = 123;
let { e } = { e: 'hh' };
export { A, b, C, d, e };
声明后导出比声明着导出更灵活,能合并,也能重命名 。
namespace A { }
export { A };
function b() { }
export { b as c };
class C { }
export { C as B };
const d = 123;
let { e } = { e: 'hh' };
export { d, e };
命名导出编译成 Common JS 后类似这样 。
exports.xxx = xxx;
需要注意的是其他人无法修改任何你导出的东西。即使是使用 let 声明也一样 。
/* mod.ts */
export let a = 123;
/* others.ts */
import { a } from './mod';
a = 321; // 报错:ts(2632)
不过对于上面的代码,你可以随便修改所导出的 a 。因为其他人每次读取 a 时都会重新从你的导出对象上访问一次 a 属性,不用担心其他人无法接收到你的修改。具体可以查看编译后的 JS 文件 。
/* others.ts */
import { a } from './mod';
const b = a + 123;
console.log(a);
/* others.js */
var mod_1 = require("./mod");
var b = mod_1.a + 123;
console.log(mod_1.a);
默认导出可以理解为一种特殊的命名导出.
默认导出的名字是 default 。但是你不能搞个名字叫 default 的变量然后导出,你必须得用 export default 或者在导出时重命名 。
export let default = 123; // 报错:ts(1389)
export default 123; // 正确
export let a = 123;
export { a as default }; // 正确
星号导出可以导出其他模块里的东西。一般有两种用法.
第一种是全导出到自己里头,就像 。
export * from './xxx'
具体效果是 xxx 中导出的东西,也可以通过你访问到.
/* xxx.ts */
export let a = { hh: 'hh' };
/* mod.ts */
export * from './xxx.ts';
/* others.ts */
import { a } from './xxx';
import { a } from './mod';
console.log(a === a); // true
第二种是挂到自己模块下面,就像 。
export * as xxx from './xxx';
// 等价于
import * as xxx from './xxx';
export { xxx };
导出分配就是把 Common JS 的导出搬到了 TS 中。写法也差不多 。
export = 'hh';
// 相当于
module.export = 'hh';
导出分配也可以指定默认导出,只需要有 default 属性就可以 。
/* mod.ts */
export = { default: 123 };
/* others.ts */
import mod from './mod';
console.log(mod); // 123
需要注意的是采用了导出分配后便不能再使用其他导出方法.
虽然现在命名空间相较于模块并不是特别常用,但它还是有比较完整的导入导出功能的.
导入命名空间中的东西很简单,像这样 。
import xxx = Space.xxx;
不论你是在模块中导入全局命名空间,还是在命名空间中导入其他命名空间,都是适用的.
import Err = globalThis.Error;
throw Err('hh');
namespace A {
import Process = NodeJS.Process;
let proce: Process;
}
较为可惜的是命名空间貌似没有星号导入,也不支持解构导入.
在一般 TS 中,命名空间只有两种方法导出.
第一种方法是声明着导出,类似于模块 。
namespace A {
export const a = 123;
}
第二种方法是导入着导出,可以用来导出其他命名空间的东西 。
namespace A {
export import Err = globalThis.Error;
}
而对于不一般的 TS ——也就是类型声明中,命名空间还可以采用像模块一样的导出对象 。
declare namespace A {
const a = 123;
const b = 'hh';
export { a, b };
}
全局定义一般有三种:
内置在 TS 中的全局定义。比如 setTimeout 、 Error 等。 对于这种全局定义,直接拿来用就可以了.
位于环境模块中的全局定义。比如 NodeJS.Process 等.
包括位于 node_modules/@types 文件夹中的自动引入的环境模块,都可以通过三斜杠注释来引入.
你可以通过 path 直接指定文件路径 。
/// <reference path="./types.d.ts" />
位于模块中的全局定义.
这种全局定义只需要引入一下模块,表示你已经运行此模块,即可 。
import '@babel/core';
或者你也可以通过三斜杠注释,通过 types 指定模块 。
/// <reference types="@babel/core" />
需要注意的是,不论你采用 import 还是三斜杠注释,甚至只是在类型中使用了一个 typeof import('xxx') ,只要你在一个 TS 文件中引入了这个模块所定义的全局类型,那这个类型就会永远存在下去,污染你的 globalThis 。 唯一在不污染全局域的情况下运行模块的方法是使用 import() 函数动态引入,但这样子你也拿不到你需要的类型.
进行全局定义一般有三种方法.
第一种是直接写环境模块。不带任何 import 和 export 一般就会让编译器把这当成一个环境模块。所以,如果你需要防止一个 TS 文件变成环境模块导致类型泄露的话,你可以加一个安全无公害的 export { }; .
第二种是在模块中定义,只需要把类型定义写到 declare global 里头就行 。
declare global {
const a = 123;
let b: {};
}
a; // 123
b; // {}
第三种是通过合并 globalThis 命名空间来定义,好处是可以使用命名空间的“导入着导出”方法,将模块或者其他命名空间的局部变量变成全局变量 。
import _Mod from './mod';
declare global {
namespace globalThis {
const a = 123;
export import Mod = _Mod;
}
}
a; // 123
Mod; // typeof import('./mod')
最后此篇关于TS导入导出那些事的文章就讲到这里了,如果你想了解更多关于TS导入导出那些事的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
是否可以调整此代码以导出foreach循环外的所有行: 这工作正常(内部循环): $vms = Get-VM | Where { $_.State –eq ‘Running’ } | Select-
我试图将我的 bundle.js 引入我的 Node 服务器,但显然 webpack 包在顶部的所有包代码之前缺少一个 module.exports =。 我可以手动将 module.exports
我有一个 android 项目,其中包含一个库项目。在这个库项目中,我包含了许多可绘制对象和动画。 问题是,当我将主项目导出为 .apk 时,它包括所有可绘制对象和动画,甚至是主项目中未使用的对象。
我的一个 mysql 用户以这种方式耗尽了他的生产数据库: 他将所有数据导出到转储文件,然后删除所有内容,然后将数据导入回数据库。他从 Innodb 大表空间中保存了一些 Gig(我不知道他为什么这样
我正在 pimcore 中创建一个新站点。有没有办法导出/导入 pimcore 站点的完整数据,以便我可以导出 xml/csv 格式的 pimcore 数据进行必要的更改,然后将其导入回来? 最佳答案
我有以下静态函数: static inline HandVal StdDeck_StdRules_EVAL_N( StdDeck_CardMask cards, int n
因为我更新了 angular cli 和 nestjs 版本,所以我收到了数百条警告,提示我无法找到我的自定义类型定义和接口(interface)。但是我的nestjs api仍然可以正常工作。 我正
Eclipse 的搜索结果 View 以其树状结构非常方便。有没有办法将这些结果导出为可读的文本格式或将它们保存到文件中以备后用? 我试过使用复制和粘贴,但生成的文本格式远不可读。 最佳答案 不,我认
我想在用户在 Chrome 中打开页面时使用 WebP否则它应该是 png。 我找到了这段代码: var isChrome = !!window.chrome && !!window.chrome.w
您好,我正在尝试根据“上次登录”导出 AD 用户列表 我已经使用基本 powershell 编写了脚本,但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案,我会很感兴趣
有没有办法启用 Stockchart 的导出?我知道这对于普通图表是可行的,但对于股票图表,当尝试启用导出模式时,我得到了未定义, 我尝试过:chart.export.enabled=true;和ch
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,因为
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现,看起来我应该使用 sqlldr.exe 文件来导入和导出,但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
您好,我正在尝试根据“上次登录”导出 AD 用户列表 我已经使用基本 powershell 编写了脚本,但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案,我会很感兴趣
我想生成一个 PDF,它将以表格格式显示查询集的输出,例如: query = ModelA.objects.filter(p_id=100) class ModelA(models.Model):
我有一个数据库代理,可以从 IBM Notes 数据生成 Word 文档。我正在使用 Java2Word API 来实现此目的,但不幸的是,该 API 几乎没有文档,而且我找不到任何有关表格格式(大小
我尝试将 Java 程序从 Eclipse 导出到 .jar 文件,但遇到了问题。它运行良好,但由于某种原因它没有找到它应该从中获取数据的文本文件。如果有人能帮忙解决这个问题,我将非常感激。 最佳答案
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现,看起来我应该使用 sqlldr.exe 文件来导入和导出,但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
使用LLVM / Clang编译到WebAssembly的默认代码生成将导出内存,并完全忽略表。 使用clang(--target=wasm32-unknown-unknown-wasm)定位Web组
我正在尝试在 HSQL 数据库中重新创建一个 oracle 数据库。 这是为了在本地开发人员系统上进行更好的单元测试。 我需要知道的是,是否有任何我可以在 oracle 服务器/客户端中使用的工具/命
我是一名优秀的程序员,十分优秀!