TS 导入导出那些事

前言

最近用 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 }; // 正确

星号导入搭配默认导出,可以达到默认导出即为星号导出的效果

/* mod.ts */

import * as Self from './mod';
export default Self;
// 或者
export * as default from './mod';

/* others.ts */

import * as Mod from './mod';
import ModDef from './mod';
console.log(Mod === ModDef); // true

星号导出

星号导出可以导出其他模块里的东西。一般有两种用法。

第一种是全导出到自己里头,就像

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

使用全局定义

全局定义一般有三种:

  1. 内置在 TS 中的全局定义。比如 setTimeoutError 等。
    对于这种全局定义,直接拿来用就可以了。

  2. 位于环境模块中的全局定义。比如 NodeJS.Process 等。

    包括位于 node_modules/@types 文件夹中的自动引入的环境模块,都可以通过三斜杠注释来引入。

    你可以通过 path 直接指定文件路径

    /// <reference path="./types.d.ts" />
    
  3. 位于模块中的全局定义。

    这种全局定义只需要引入一下模块,表示你已经运行此模块,即可

    import '@babel/core';
    

    或者你也可以通过三斜杠注释,通过 types 指定模块

    /// <reference types="@babel/core" />
    

    需要注意的是,不论你采用 import 还是三斜杠注释,甚至只是在类型中使用了一个 typeof import('xxx') ,只要你在一个 TS 文件中引入了这个模块所定义的全局类型,那这个类型就会永远存在下去,污染你的 globalThis
    唯一在不污染全局域的情况下运行模块的方法是使用 import() 函数动态引入,但这样子你也拿不到你需要的类型。

进行全局定义

进行全局定义一般有三种方法。

第一种是直接写环境模块。不带任何 importexport 一般就会让编译器把这当成一个环境模块。所以,如果你需要防止一个 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')

原文链接:https://www.cnblogs.com/QiFande/p/ts-about-export.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:TS 导入导出那些事 - Python技术站

(0)
上一篇 2023年4月17日
下一篇 2023年4月17日

相关文章

  • JQuery将字符串转为json对象的四种方法

    下面是详细的讲解: 背景 在开发过程中,我们经常需要将字符串转换成 JSON 对象,然后进行操作。而 JQuery 提供了四种方法来完成这项任务。下面我们逐一来了解这四种方法。 方法一:$.parseJSON() 这是最常用的方法,直接调用这个方法即可将字符串转换为 JSON 对象。 var str = ‘{"name": "张…

    JavaScript 2023年5月27日
    00
  • 浅谈 Webpack 如何处理图片(开发、打包、优化)

    浅谈 Webpack 如何处理图片(开发、打包、优化) 在Web开发中,图片作为Web页面重要的组成部分,在Webpack中如何处理图片是一个必须要掌握的技能。常见的处理方式包括以下几种: 1. 在代码中使用 import 或 require 导入图片 Webpack支持将图片(包括PNG、JPG、GIF、SVG等格式)作为模块来处理,并通过模块化的方式导入…

    JavaScript 2023年5月19日
    00
  • 文件上传插件SWFUpload的使用指南

    文件上传插件SWFUpload的使用指南 SWFUpload是一款基于Flash技术的文件上传插件,具备多文件同时上传、文件类型限制、进度条显示等功能。下面将为你详细介绍SWFUpload的使用指南。 步骤一:下载SWFUpload文件 SWFUpload的下载地址为:https://github.com/jacksbox/SWFUpload/release…

    JavaScript 2023年6月10日
    00
  • js实现一个逐步递增的数字动画

    JS实现逐步递增数字动画的完整攻略示例: 步骤一: HTML结构首先,我们需要在HTML中创建一个目标容器来显示数字动画的值,如 ,这是一个示例结构,可以根据实际情况进行修改。 步骤二: CSS样式可以根据自己的需求进行样式设计,这里建议将目标容器与数字本身分离,用一个样式来设置它们的样式。如: .num { font-size: 40px; color: …

    JavaScript 2023年6月10日
    00
  • 微信小程序如何在页面跳转时进行页面导航

    微信小程序的页面开发,需要进行页面间的跳转和导航。下面是在微信小程序中进行页面导航的完整攻略。 一、使用 Navigator 组件进行页面跳转 使用 Navigator 组件 进行页面跳转是微信小程序中最基础的导航方式。其使用方式如下: <navigator url="/pages/index/index"> 跳转到首页 &l…

    JavaScript 2023年6月11日
    00
  • 28个JavaScript常用字符串方法以及使用技巧总结

    28个JavaScript常用字符串方法以及使用技巧总结 1. 字符串长度 通过 length 属性可以获取字符串的长度。 const str = ‘Hello World’; console.log(str.length); // 11 2. 字符串截取 常见的字符串截取方式为 substring 和 slice,两者用法类似,都是根据起始位置和结束位置截…

    JavaScript 2023年5月18日
    00
  • 向JavaScript的数组中添加元素的方法小结

    向JavaScript的数组中添加元素的方法小结 在JavaScript中,可以使用多种方法向数组中添加元素。下面将对常用的5种方法进行详细讲解。 方法1:使用push()方法 push()方法可以向数组末尾添加一个或多个元素,并返回添加新元素后数组的长度。示例如下: let arr = ["apple", "banana&qu…

    JavaScript 2023年5月27日
    00
  • JavaScript实现的encode64加密算法实例分析

    JavaScript实现的encode64加密算法实例分析 简介 encode64是一种基于64个可打印字符来表示二进制数据的编码方式。相比于普通的ASCII码编码而言,它可以更加节约空间。这种编码方式常用于在网络传输中对一些隐私数据进行加密保护。 实现原理 encode64算法的实现原理如下: 将原始数据(二进制)每6位一组,转换成相应的十进制数。 根据以…

    JavaScript 2023年6月1日
    00
合作推广
合作推广
分享本页
返回顶部