当前位置: 首页 > news >正文

【制作npm包3】了解 tsconfig.json 相关配置

制作npm包目录

本文是系列文章, 作者一个橙子pro,本系列文章大纲如下。转载或者商业修改必须注明文章出处

一、申请npm账号、个人包和组织包区别
二、了解 package.json 相关配置
三、 了解 tsconfig.json 相关配置
四、 api-extractor 学习
五、npm包制作完整教程,我的第一个npm包


在最早的typescript官方表述当中说,typescript1是一个JavaScript超集,当时有一些代替JavaScript的內味在里面,并且发布了像接口、枚举这些JavaScript不存在的类型。但是随着时间的推移,这个表述发生了变化,typescript是一个JavaScript类型标注语言。可以看得出,typescript对于自己的定位是类型推断,而不是替代JavaScript

常见的文件末尾.d.ts结尾的文件,我们的代码工具会识别他是一个typescript类型文件。而项目根目录存在tsconfig.json则表示他是一个可以支持typescript的项目。对于编译器和编辑器而言,正是因为这个文件的存在,它们才能识别这是一个ts项目,并且给与完整的typescript语法识别。事实上,在项目根目录创建jsconfig.json,同样获得大部分ts开发上的一些体验。

一个例子

本示例完整代码发布在这里:https://github.com/vue3plugin/npm-pkg-by-vite,有devmain两个分支提供参考。

对于这个例子而言,可能好多配置没有,同样下面示例涉及的配置我也不会逐个介绍,只介绍一些特别常用到的,完整配置参见2。由于打包工具的存在,我们的ts通常只用于开发阶段的类型检查,以及对外输出的类型文件。对于它打包ts代码的能力,我们通常直接使用打包工具代替了。

文件tsconfig.json

{"compilerOptions": {"target": "ESNext", "module": "ESNext","lib": ["ESNext","DOM","DOM.Iterable",], "moduleResolution": "Bundler", "sourceMap": true,  "skipLibCheck": true,"inlineSources": false,"allowUnreachableCode": false,"allowUnusedLabels": false,"emitDecoratorMetadata": true,"experimentalDecorators": true,"allowSyntheticDefaultImports": true,"removeComments": true,"alwaysStrict": true,"noImplicitUseStrict": false,"strictBindCallApply": true,"strictFunctionTypes": true,"strictPropertyInitialization": false,"strictNullChecks": false,"forceConsistentCasingInFileNames": true,"checkJs": false,"allowJs": true,"esModuleInterop": true,"importHelpers": false},"include": ["./src/**/*", "env.d.ts", ],"exclude": ["node_modules/**/*"]
}

对于每一个typescript版本而言,配置上多是增加或减少了一些配置项,其余或是一些typescript类型推断的新支持,大多数常见的配置,还是不变的。

compilerOptions 选项,中文名编译器选项

target

这个设置是表示typescript在打包编译的时候,编译的目标版本。例如这个值是ES5,则ts编译之后会是ES5的代码。实际上在真正的工程当中我们用不到他,无论是webpackrollupvite 编译目标ts的时候,会直接借用插件移除ts相关类型,经过自己加工,根据打包工具的内置方法去做一些编译目标。目前大多借用core.js这个polyfill仓库去做一些代码降级,例如把ES6降级为ES5

module

当前编辑器内写代码所使用的代码规范,还有好多AMDCommonJS等其他规范,目前一致推崇的是ES相关的语法,我可能比较激进,直接ESNext,以便于体验最新的ES语法

lib

这个就比较更加常用了,我们在写ts代码的时候,通常会有若干原生代码的提示。我们写constlet这些声明,或者一个for...of...语法的提示,这些都来自这里的设置。这个参数的值是一个数组,像上边的例子ESNext表示导入可ES相关语法,DOM表示导入了浏览器一些相关的Api,例如常见的documentwindow等。我们开发vue这种web项目的时候,这两个都是必选的。不过通常脚手架都已经帮我们设置好了。

moduleResolution

这个表示模块解析策略,这个值大白话使用node的解析方式,区别在于使用的是哪个版本的node

classic 仅在ts 1.6版本之前使用,当前可以完全被忽略

node10表示一个旧的版本,只可以使用CommonJS的语法

node16nodeNext:由于node12+的版本早已同时支持 ECMAScript 导入和 CommonJS ,当他的值是node16nodeNext时,我们大可以在代码当中同时使用两种语法,import ... from ... 或者 require('xxx')

bundler:bundlernode16nodeNext是相似的配置,这个值我在5.1.6版本看到,大致是个新的配置,这个配置项在任何时候不需要文件后缀名的声明。

当然这个配置是有坑在里面的,我们知道,package.json有个type的参数,详见【制作npm包2】了解 package.json 相关配置 里面的介绍。当我们设置值为module时,实际上我们的代码是就不会支持require的导入,尤其是我们在使用诸如viterollup这类只支持es的打包方式,尽管typescript语法上支持是没有用的。

checkJs

表示当前支持js文件的类型检查

allowJs

允许代码当中出现js代码的导入

noImplicitAny

代码当中对于无法推断的配置项,将用any类型替代。

suppressImplicitAnyIndexErrors

禁止在索引到对象时报告有关隐式 any 的错误,一个对象使用索引的方式去取值,在默认ts配置当中是不允许的。实际上,这个配置也不是建议的。

例如:

const obj = { name :  '一个橙子pro' }
// Element implicitly has an 'any' type because expression of type '"obj "' can't be used to index type '{ name : string; }'.
obj['name'] // 当开启 suppressImplicitAnyIndexErrors 配置,才可以这样取值obj.a //正确的写法

对于开启noImplicitAny来说,suppressImplicitAnyIndexErrors这个配置也就默认开启了。一般而言,不开启这些有些反类型的开关,对后期代码维护更加友好一些。

include

表示ts项目包含哪些目录,只有当前目录都包含在这个选项当中,我们的代码提示才会生效。

包含一些通配符的语法:

  • * 匹配零个或多个字符(不包括目录分隔符)
  • ? 匹配任何一个字符(不包括目录分隔符)
  • **/ 匹配嵌套到任何级别的任何目录

exclude

表示ts项目需要排除哪些目录,一般排除node_modules就行,通配符语法和include完全相同。


下面是介绍一些和类型打包有关的配置,简略介绍了。一般打包的时候,我们会专门写一个打包类型的文件。

文件tsconfig.types.json

{"extends": "./tsconfig.json","compilerOptions": {"declaration": true, /* 生成相关的 '.d.ts' 文件。 */"declarationDir": "./dist/types", /* '.d.ts' 文件输出目录 */"emitDeclarationOnly": true, /* 只生成声明文件,不生成 js 文件*/"rootDir": "./src", /* 指定需要编译的文件目录(用于输出),用于控制输出目录结构 */},"include": ["src"],
}

emitDeclarationOnly这个配置项设置为true,正好接应上边的描述,我们的ts配置只进行代码提示,以及类型文件打包的工作。
由于大多数配置和上面相同,这里用到了extends这个参数,extends字如其名,表示继承一个ts的配置文件。


  1. typeScript 英文文档, 中文文档 ↩︎

  2. https://ts.nodejs.cn/tsconfig ↩︎

相关文章:

【制作npm包3】了解 tsconfig.json 相关配置

制作npm包目录 本文是系列文章, 作者一个橙子pro,本系列文章大纲如下。转载或者商业修改必须注明文章出处 一、申请npm账号、个人包和组织包区别 二、了解 package.json 相关配置 三、 了解 tsconfig.json 相关配置 四、 api-extractor 学习 五、npm包…...

【0基础入门Python笔记】一、python 之基础语法、基础数据类型、复合数据类型及基本操作

一、python 之基础语法、基础数据类型、复合数据类型及基本操作 基础语法规则基础数据类型数字类型(Numbers)字符串类型(String)布尔类型(Boolean) 复合数据类型List(列表)Tuple&…...

2023-08-18力扣每日一题

链接: 1388. 3n 块披萨 题意: 一个长度3n的环,选n次数字,每次选完以后相邻的数字会消失,求选取结果最大值 解: 这波是~~(ctrl)CV工程师了~~ 核心思想是选取n个不相邻的元素一定…...

mac M1安装opencv方法及类型报错解决

安装opencv: pip install opencv-python pip install --user opencv-contrib-python pip install opencv-python 4.5.2.54 numpy 1.25.2 安装过程中报错如下: python-类型错误:“numpy._DTypeMeta”对象不可下标 TypeError: ‘numpy._DTypeMeta’ obje…...

Screen终端管理工具

文章目录 Screen终端管理工具背景nohup介绍screen介绍安装screen查看终端新建终端退出终端进入终端删除会话帮助命令 总结 Screen终端管理工具 背景 对大佬只有膜拜,可能永远无法超越,在工作交接中大佬用到了一个screen启动了程序,这是什么…...

【python自动化办公】PysimpleGUI官网案例全部项目代码文件及运行截图

PysimpleGUI官网案例全部项目代码文件及运行截图 0 项目文件整体预览窗口1 pysimpleGUI下面所有元素2 pysimpleGUI下面所有元素示例3 加载多GIF图片4 使用PIL进行动态图片加载5 自动保存关闭时窗口位置信息6 绘制柱状图7 图像编码18 图像编码29 无边界窗口10 设置图片按钮11 按…...

9.处理this和防抖、节流

9.1 this指向-普通函数 普通函数的调用方式决定了this的值,即【谁调用this的值 指向谁】 普通函数没有明确调用者时this值为window,严格模式下没有调用者时this的值为undefined 9.2 this指向-箭头函数 箭头函数中的this与普通函数完全不同&#xff0…...

Spark操作Hive表幂等性探索

前言 旁边的实习生一边敲着键盘一边很不开心的说:做数据开发真麻烦,数据bug排查太繁琐了,我今天数据跑的有问题,等我处理完问题重新跑了代码,发现报表的数据很多重复,准备全部删了重新跑。 我:你的数据操作具备幂等性吗? 实习生:啥是幂等性?数仓中的表还要考虑幂等…...

【可变形卷积3】 DCNv2 安装

使用RTM3D 代码,CenterTrack代码需要用DCN 1、安装DCNv2 (1)github上最新版的DCNv2源码在"https://github.com/CharlesShang/DCNv2",但是该版本源码不支持PyTorch1.7,如果使其支持PyTorch1.7需要做以下修改…...

归并排序 与 计数排序

目录 1.归并排序 1.1 递归实现归并排序: 1.2 非递归实现归并排序 1.3 归并排序的特性总结: 1.4 外部排序 2.计数排序 2.1 操作步骤: 2.2 计数排序的特性总结: 3. 7种常见比较排序比较 1.归并排序 基本思想: 归并排序(MERGE-SORT)是建立在归并操作上的一种…...

机器学习之逻辑回归

import numpy as np import pandas as pd from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler from sklearn.linear_model import LogisticRegression # 获得数据 names[Sample code number,Clump Thickness,Uniformity…...

操作符详解上(非常详细)

目录 二进制介绍二进制2进制转10进制10进制转2进制数字2进制转8进制和16进制2进制转8进制2进制转16进制 原码、反码、补码移位操作符左移操作符右移操作符 位操作符:&、|、^逗号表达式 二进制介绍 在初学计算机时我们常常会听到2进制、8进制、10进制、16进制……...

React 高阶组件(HOC)

React 高阶组件(HOC) 高阶组件不是 React API 的一部分,而是一种用来复用组件逻辑而衍生出来的一种技术。 什么是高阶组件 高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。基本上,这是从 React 的组成…...

【NepCTF2023】复现

文章目录 【NepCTF2023】复现MISC与AI共舞的哈夫曼codesc语言获取环境变量 小叮弹钢琴陌生的语言你也喜欢三月七么Ez_BASIC_IImisc参考 WEBez_java_checkinPost Crad For You独步天下配置环境独步天下-镜花水月环境变量提权 独步天下-破除虚妄总结 独步天下-破除试炼_加冕成王知…...

大文件切片上传

创建组件&#xff1a;创建一个组件用于处理文件上传&#xff0c;命名为Upload.vue。 <template><div><input type"file" change"handleFileChange" /><button click"startUpload">开始上传</button></div> …...

ubuntu切换python版本

在没有安装类似anoconda的管理工具的时候&#xff0c;我们常常会被Ubuntu下的Python版本切换问题所头疼。 可以使用update-alternatives工具进行python版本的任意切换 当使用update-alternatives工具来切换Ubuntu系统上的Python版本时&#xff0c;您实际上是在系统范围内选择…...

docker 安装 elasticsearch、kibana 7.4.2

切换root 用户 su root 拉起镜像 docker pull elasticsearch:7.4.2 docker pull kibana:7.4.2 #1、创建Elasticsearch配置文件夹 mkdir -p /mydata/elasticsearch/config ​ #2、创建Elasticsearch数据文件夹 mkdir -p /mydata/elasticsearch/data #3、创建Elasticsearch插件…...

【es6】函数参数设置默认值

1、es6之前的函数参数默认值写法 1.1、使用短路或||的写法 当y为空时&#xff0c;y判断为false &#xff0c;走||右边的&#xff0c;所以y world;当y不为空时&#xff0c;y判断为true&#xff0c;不需要再运行||右边的&#xff0c;所以 y y function log(x, y) {y y || W…...

Pytest和Unittest测试框架的区别?

如何区分这两者&#xff0c;很简单unittest作为官方的测试框架&#xff0c;在测试方面更加基础&#xff0c;并且可以再次基础上进行二次开发&#xff0c;同时在用法上格式会更加复杂&#xff1b;而pytest框架作为第三方框架&#xff0c;方便的地方就在于使用更加灵活&#xff0…...

C#基础知识(一)

一、C#程序结构 《1》命名空间的声明&#xff08;namespace declaration&#xff09; 《2》一个class 《3》class方法 《4》class属性 《5》一个main方法 《6》语句&#xff08;statements&#xff09;&表达式&#xff08;Expressions&#xff09; 《7》注释 注&#xff1a…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...