UMD的包导出TS 类型方法示例

目录
  • TypeScript 里声明模块
  • 类型提示检查
  • UMD 的 global 类型
  • 总结

TypeScript 里声明模块

在 TypeScript 里声明模块，最早是用 namespace 和 module 的语法，后来支持了 es module，类型和变量会用 import 来导入、用 export 导出。

比如你写了一个库，导出的变量叫 Guang，它下面有 name 和 age 两个属性，所以你是这样声明类型的：

export default Guang;
declare namespace Guang {
    export const name = 'guang';
    export const age = '20';
}

使用的时候用 import 来导入：

import Guang from 'xxx';
console.log(Guang.name, Guang.age);

这样是没啥问题。

但如果这个库除了支持 es module 的方式使用，还支持 umd 呢？

UMD 规范想必大家很熟悉了，就是判断是 CMD、AMD 还是全局变量的方式，然后用合适的模块规范导出模块的值：

但这里面不包含 es module，因为它不是 api 而是语法。

那如果你构建出了 umd 规范的代码，使用者用 script 的方式给引入了：

这样还能做类型提示和检查么？

不能了，因为你导出是用的 esm 的 export，只有 import 引入才会有类型提示和对应的检查。

那怎么办呢？

类型提示检查

用 declare global 声明为全局类型？

declare global {
    namespace Guang {
        export const name = 'guang';
        export const age = '20';
    }
}

这样是能解决问题，但这样在 esm 模块里也不用 import 就可以直接用了，而我们想在 esm 里用 import，其他情况才用全局类型。

有啥方式能约束在 esm 里只能 import 用，但是其他地方可以做为全局类型呢？

TypeScript 专门为这种情况设计个了语法，叫 export as namespace xxx；

比如上面的代码可以这样写：

export = Guang;
export as namespace Guang;
declare namespace Guang {
    export const name = 'guang';
    export const age = '20';
}

export = Guang 是兼容老的 ts import 语法的，支持 umd 得加上这一行，然后加上 export as namespace Guang;

UMD 的 global 类型

这样你在非 esm 里就可以通过全局类型的方式使用它了：

而在 esm 里，如果也是这样用的，它会报错：

说是你在 esm 模块里用了一个 UMD 的 global 类型，建议用 import 的方式代替。

如果你用 import 的方式引入了这个类型，就不报错了：

这就是它比 declare global 好的地方，可以约束在 esm 里用 import 引入，非 es module 可以作为全局类型。

这样就完美兼容了 esm 和 umd 两种模块引入方式。

而且如果你不想要这种限制，也可以在 tsconfig.json 里关掉。

有个 allowUmdGlobalAccess 的编译选项就是控制是否支持在 es module 里使用 UMD 全局类型的：

默认是 false，开启以后在 es module 里使用 UMD 全局类型就不报错了：

很多库都需要兼容 esm 和 umd 的使用方式都会这样用，比如 react：

所以，如果你开发的库需要支持 esm 和 umd 的话，可以用 export namespace as xxx 来导出，会比 declare global 更好。

总结

现在 TypeScript 的模块都是 es module 的方式引入的，但有一些包是支持 umd 的，它们可能用各种方式引入模块，为了实现 umd 模块的类型检查，可以用 declare global 把导出的变量变为全局的。

但是在 es module 里还是希望使用 import 引入，非 es module 才用全局类型，所以更好的方式是使用 export as namespace xxx。

用这种方式声明的类型，当在非 esm 中使用时，会作为全局类型，而在 esm 中如果直接引用全局类型会报错，建议用 import 引入。这是它比 declare global 更好的地方。

当然，也可以把 allowUmdGlobalAccess 的编译选项设置为 true 来放开这种约束。

像 react 这种支持 umd 的库都是用这种方式导出类型的，如果你也要开发一个支持 umd 的库，不妨也试试 export as namespace 吧。

以上就是UMD的包导出TS 类型方法示例的详细内容，更多关于UMD包导出TS类型的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 前端React Nextjs中的TS类型过滤实用技巧

    前端React Nextjs中的TS类型过滤实用技巧

    目录 自我介绍 分步介绍 开胃小菜 keyof in Conditional 泛型 正餐开始 实战应用例子 最后 大家好,我是零一,相信大家在阅读同事写的代码或者优秀的开源库的代码时,一定见过各种各样的风骚的TS写法,不花点时间下去根本看不懂,换作是我们,可能就直接一个 any 完事了,但是真正当项目体积变大后,你会发现这些 TS骚操作真的很重要,因为它能很好地帮助你做静态类型校验 自我介绍 TS类型过滤,英文名(我自己取的)叫 FilterConditionally,这是它完整的样子 type

  • vue3+ts中ref与reactive指定类型实现示例

    目录 ref 的基础特性 如何在ref中指定类型 reactive isRef.isReactive toRef.toRefs.toRaw ref 的基础特性 ref 约等于 reactive({ value: x }) ref() 可以定义时无参数,第一次赋值任意类型,然后就不能增加属性 const refa = ref(6) const rcta = reactive({ value: 12 }) console.log('refa:', refa) //RefImpl{...} conso

  • javascript中UMD规范的代码推演

    javascript中UMD规范的代码推演

    1. UMD规范 地址:https://github.com/umdjs/umd UMD规范,就是所有规范里长得最丑的那个,没有之一!!!它是为了让模块同时兼容AMD和CommonJs规范而出现的,多被一些需要同时支持浏览器端和服务端引用的第三方库所使用.UMD是一个时代的产物,当各种环境最终实现ES harmony的统一的规范后,它也将退出历史舞台. UMD规范的结构乍一看非常复杂,主要是因为想要看懂这段范式需要一些javascript基础知识,它的基本结构是这样的: (function (r

  • node中modules.exports与exports导出的区别

    一:node是什么? node只是平台,或者说是环境,其实用的还是js语法 主要框架express以及koa,两个框架是同一个团队开发,node中也有类似于php的Ci框架的MVC模式 M->model数据层的增删改差操作 V->view视图层 C->controller路由控制,主要起到转发工作 一个完整的node构成:node.js+express+mysql 二:工作代码的顺序: app.js为node的入口文件, 在view写好html文件,模板可以任意, rouer负责路由跳转

  • 为Vue3 组件标注 TS 类型实例详解

    目录 为 props 标注类型 使用 <script setup> 非 <script setup> 为 emits 标注类型 使用 <script setup> 非 <script setup> 为 ref() 标注类型 默认推导类型 通过接口指定类型 通过泛型指定类型 为 reactive() 标注类型 默认推导类型 通过接口指定类型 为 computed() 标注类型 默认推导类型 通过泛型指定类型 为事件处理函数标注类型 为 provide / in

  • UMD的包导出TS 类型方法示例

    UMD的包导出TS 类型方法示例

    目录 TypeScript 里声明模块 类型提示检查 UMD 的 global 类型 总结 TypeScript 里声明模块 在 TypeScript 里声明模块,最早是用 namespace 和 module 的语法,后来支持了 es module,类型和变量会用 import 来导入.用 export 导出. 比如你写了一个库,导出的变量叫 Guang,它下面有 name 和 age 两个属性,所以你是这样声明类型的: export default Guang; declare namesp

  • C#实现Json转DataTable并导出Excel的方法示例

    本文实例讲述了C#实现Json转DataTable并导出Excel的方法.分享给大家供大家参考,具体如下: 需求:有一个log文件,需要整理成Excel,日志文件里面的数据都是json字符串 思路是,把Json字符串转换成DataTable,然后导出到Excel 在网上找了一些资料,整理了以下三种类型的Json 一.Json转换DataTable 1.处理简单Json: [{"mac":"20:f1:7c:c5:cd:80","rssi":&qu

  • Java实现Excel导入导出数据库的方法示例

    本文实例讲述了Java实现Excel导入导出数据库的方法.分享给大家供大家参考,具体如下: 由于公司需求,想通过Excel导入数据添加到数据库中,而导入的Excel的字段是不固定的,使用得通过动态创建数据表,每个Excel对应一张数据表,怎么动态创建数据表,可以参考前面一篇<java使用JDBC动态创建数据表及SQL预处理的方法>. 下面主要讲讲怎么将Excel导入到数据库中,直接上代码:干货走起~~ ExcellToObjectUtil 类 主要功能是讲Excel中的数据导入到数据库中,有几

  • java使用common-httpclient包实现post请求方法示例

    前言 项目中需要请求第三方接口,而且要求请求参数数据为json类型的.本来首先使用的是httpclient的jar包,但是因为项目中已经使用了common-httpclient的jar包,引起了冲突,所以不得不使用common-httpclient来实现. 示例代码: import java.io.BufferedReader; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStr

  • Go语言使用sort包对任意类型元素的集合进行排序的方法

    本文实例讲述了Go语言使用sort包对任意类型元素的集合进行排序的方法.分享给大家供大家参考.具体如下: 使用sort包的函数进行排序时,集合需要实现sort.Inteface接口,该接口中有三个方法: 复制代码 代码如下: // Len is the number of elements in the collection.  Len() int  // Less reports whether the element with  // index i should sort before t

  • SpringBoot整合POI导出通用Excel的方法示例

    一.准备工作 1.pom依赖 在pom.xml中加入POI的依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>3.11-beta1</version> </dependency> <dependency> <groupId>org.apache.poi

  • Go语言反射获取类型属性和方法示例

    本系列文章,我将会进一步加深对 Go 语言的讲解,更一步介绍 Go 中的包管理.反射和并发等高级特性. 前面一篇文章主要介绍了 reflect.Type 类型对象.本文将会继续介绍 Go 反射 reflect.StructField 和 reflect.Method 相关的内容. reflect.StructField 和 reflect.Method 如果变量是一个结构体,我们还可以通过结构体域类型对象 reflect.StructField 来获取结构体下字段的类型属性.Type 接口下提供

  • ts 类型体操 Chainable Options 可链式选项示例详解

    ts 类型体操 Chainable Options 可链式选项示例详解

    目录 问题 答案 传参 option部分 get 问题 在JavaScript我们通常会使用到可串联(Chainable/Pipline)的函数构造一个对象,但是在Typescript中,你能合理地给它赋上类型吗? 题目是: 可以使用任何你喜欢的方式实现这个类型 - interface, type, 或者 class 都行.你需要提供两个函数option(key, value) 和 get() 在 option 中你需要使用提供的key和value来扩展当前的对象类型,通过 get()获取最终结

  • ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】

    本文实例讲述了ThinkPHP框架实现导出excel数据的方法.分享给大家供大家参考,具体如下: 在ThinkPHP框架下,导出excel数据的方法示例: 在操作前,应该在系统框架的扩展目录中添加ORG库,即要包含ThinkPHP\Extend\Library\ORG\Util\PHPExcel.class.php文件及其相关支持文件. <?php header("Content-type: text/html; charset=utf-8"); class MesTestAct

随机推荐