TS类型声明文件(一)如何在ts npm包项目中生成 d.ts 文件

现在TS项目很多,如果你开发的npm包不支持类型声明文件,对使用ts的开发者不太友好,开发者无法获得ts类型提示。如何在自己的 npm 包中自带 .d.ts 文件,以确保使用者不需要额外配置 tsconfig.json 就能获得类型提示,以下是完整操作步骤记录:

1. 编写 TypeScript 代码

首先,用 TypeScript 编写你的 npm 包。假设你的包名为 my-ts-test,项目结构如下:

my-ts-test/
├── src/
│   ├── index.ts
│   └── utils.ts
├── package.json
├── tsconfig.json

2. 配置 tsconfig.json

在项目根目录下创建或编辑 tsconfig.json 文件,确保它配置正确,能够生成 .d.ts 文件:

{"compilerOptions": {"target": "ES6","module": "commonjs","declaration": true,"outDir": "./dist","strict": true},"include": ["src"]
}

关键配置项说明:

  • declaration: true,生成 .d.ts 文件。

  • outDir: "./dist",编译输出目录。

3. 构建项目

使用 TypeScript 编译器进行构建,生成 .js.d.ts 文件:

tsc

构建后,项目结构如下:

my-ts-test/
├── dist/
│   ├── index.js
│   ├── index.d.ts
│   ├── utils.js
│   └── utils.d.ts
├── src/
│   ├── index.ts
│   └── utils.ts
├── package.json
├── tsconfig.json

4. 配置 package.json

package.json 文件中,指定 maintypes 字段:

{"name": "my-library","version": "1.0.0","main": "dist/index.js","types": "dist/index.d.ts","scripts": {"build": "tsc"},"devDependencies": {"typescript": "^4.0.0"}
}
  • main: 指定主入口文件。

  • types: 指定类型声明文件的入口。

5. 发布包

在发布包之前,确保 dist 目录包含在发布包中,可以在 package.json 中配置 files 字段:

{"files": ["dist"]
}

发布包:

npm publish

6. 使用者角度体验

当使用者安装并使用你的包时,他们不需要任何额外的配置,就能自动获得类型提示。例如:

npm install my-ts-test

在 TypeScript 项目中:

import { someFunction } from 'my-ts-test';someFunction();

因为在 package.json 中指定了 types 字段,TypeScript 编译器会自动找到并加载 dist/index.d.ts 文件,从而提供类型提示和类型检查功能。

通过以上步骤,可以在 npm 包在使用时能够自动提供类型提示,而不需要使用者进行额外的 tsconfig.json 配置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/45732.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python练习题(3)

1.使用requests模块获取这个json文件http://java-api.super-yx.com/html/hello.json 2.将获取到的json转为dict 3.将dict保存为hello.json文件 4.用文件流写一个copy(src,dst)函数,复制hello.json到C:\hello.json import requests import jsondef copy(src, dst):read_file o…

【typedb】例子:药物发现 1: 模式导入

typedb-examples/drug-discovery/ Drug discovery监听0.0.0.0:1729 但这么连接肯定不行: localhost:1729 可以: 一直无法点击schema图标:先创建一个数据库 选中数据库: 选中后就可以了:

我的第128天创作纪念日

🌈个人主页:是店小二呀 🌈C语言笔记专栏:C语言笔记 🌈C笔记专栏: C笔记 🌈初阶数据结构笔记专栏: 初阶数据结构笔记 🌈喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章…

演示:【Avalonia-Controls】Avalonia皮肤,主题,自定义控件,数据库,系统模块资源库

一、目的:分享一个Avalonia皮肤,主题,自定义控件,数据库,系统模块资源库 开源地址: GitHub - HeBianGu/Avalonia-Controls: Avalonia控件库 Nuget包地址: NuGet Gallery | Packages matchin…

02MFC画笔/画刷/画椭圆/圆/(延时)文字

文章目录 画实心矩形自定义画布设计及使用连续画线及自定义定义变量扇形画椭圆/圆输出颜色文本定时器与定时事件 画实心矩形 自定义画布设计及使用 连续画线及自定义定义变量 扇形 画椭圆/圆 输出颜色文本 定时器与定时事件

大模型时代的目标检测

https://zhuanlan.zhihu.com/p/663703934https://zhuanlan.zhihu.com/p/6637039341.open set/open word/ood 这个任务是指在实际应用上可以检测任何前景物体,但是有些不需要预测类别,只要检测出框就行。在很多场合也有应用场景,有点像类无关…

Memcached vs Redis——Java项目缓存选择

在Java项目开发中,缓存系统作为提升性能、优化资源利用的关键技术之一,扮演着至关重要的角色。Memcached和Redis作为两种流行的缓存解决方案,各有其独特的优势和应用场景。本文旨在通过分析项目大小、用户访问量、业务复杂度以及服务器部署情…

Chubby VS Zookeeper

Chubby 和 Zookeeper 是两种分布式协调服务,主要用于管理分布式系统中的配置、同步和命名等任务。以下是对这两种系统的比较: Chubby 开发者:由 Google 开发和使用,作为其内部服务的一部分。 设计目标:为 Google 的…

ABAP中将采购订单的预制发票过账的BAPI的使用方法

在ABAP中,将采购订单的预制发票过账的BAPI主要是BAPI_INCOMINGINVOICE_POST。这个BAPI用于将之前通过BAPI_INCOMINGINVOICE_PARK等函数创建的预制发票过账到SAP系统中,生成相应的会计凭证。 使用方法 以下是使用BAPI_INCOMINGINVOICE_POST的基本步骤&a…

力扣 爬楼梯

动态规划算法基础篇。 class Solution {public int climbStairs(int n) {int[] f new int[n 1];f[0] 1;f[1] 1;//当爬到n阶楼梯时&#xff0c;可知是由n-1阶或n-2阶楼梯而来for(int i 2; i < n; i) {f[i] f[i - 1] f[i - 2];//后面的每一阶种数由前两个状态得到}ret…

Milvus 核心设计 (3) ---- metric及index原理详解与示例(1)

目录 背景 Floating point embeddings 特点 适用场景 丈量方式 Euclidean distance (L2) Inner product (IP) Cosine similarity (COSINE) 代码写法 索引类型 In-Memory FLAT 索引 IVF_FLAT IVF_FLAT的工作流程 平衡准确性与速度 性能考虑 代码写法 IVF_SQ8 …

栈和队列 OJ (一)

括号匹配问题 题目链接&#xff1a; https://leetcode.cn/problems/valid-parentheses/ 遇到左括号入栈&#xff0c;遇到右括号&#xff0c;我们就出栈看看括号是否匹配 这里要注意如果左括号多于右括号的情况下&#xff0c;字符串循环遍历结束时&#xff0c;栈不为空&#x…

Android --- Kotlin学习之路:自己写一个SDK给别的APP用(暴漏一个接口,提供学生的身高数据)

今天又来肝kotlin了&#xff0c;主题是&#xff1a;用kt写一个SDK给其他人用&#xff0c;这个小技能在项目中会经常用到&#xff0c;应该有很多小伙伴还不会用&#xff0c;不会的请往下看—⬇ 在项目里面新建一个module 选择Android library&#xff0c;然后点击finish就行了 …

React有哪些优点和缺点

React 作为一个广泛使用的 JavaScript 库&#xff0c;在前端开发领域具有显著的优点&#xff0c;但同时也存在一些缺点。以下是对 React 的一些主要优点和缺点的概述&#xff1a; 优点 组件化开发&#xff1a; React 鼓励将 UI 分解为小的、独立的、可复用的组件。这种方式使得…

PostgreSQL UPDATE 命令

PostgreSQL UPDATE 命令 PostgreSQL 是一种功能强大的开源对象关系型数据库管理系统(ORDBMS),它使用并扩展了SQL语言。在处理数据库时,我们经常需要更新现有的记录。在PostgreSQL中,UPDATE命令用于修改表中的现有记录。 基本语法 UPDATE命令的基本语法如下: UPDATE t…

常用的内部排序算法

常用的内部排序算法 简单选择排序、直接插入排序和冒泡排序、折半插入排序、希尔排序算法、快速排序算法&#xff08;递归和非递归&#xff09;、堆排序 运行结果&#xff1a; python 输入数据15,5,6,7,8,9,10 [外链图片转存中…(img-60STknHj-1720750359076)] [外链图片转…

【Java】二维数组

文章目录 一、什么是二维数组二、二维数组的声明形式三、二维数组的创建(1)静态初始化(2)动态初始化 四、二维数组的输入五、二维数组在内存中的存储方式 一、什么是二维数组 一维数组的声明是int[] arr&#xff0c;int[] arr {0,1,2,3,…};通过一维数组的形式和表达式 我们…

使用Nginx实现高效负载均衡

概述 Nginx是一款高性能的HTTP和反向代理服务器&#xff0c;广泛用于Web服务的负载均衡。它能有效分发流量至多个后端服务器&#xff0c;提高网站的可用性和响应速度&#xff0c;同时增强系统的可扩展性和安全性。本文将介绍如何配置Nginx进行负载均衡&#xff0c;并提供具体的…

FPGA设计中的流水线 -分割大的计算电路可以更快的处理数据。

FPGA&#xff08;现场可编程门阵列&#xff09;设计中的流水线优化是一种提高设计性能的技术&#xff0c;它通过将设计分解为多个阶段或步骤来实现。每个阶段可以并行执行&#xff0c;从而提高整体的吞吐量和效率。以下是流水线优化的一些关键概念和作用&#xff1a; 意思&…

window下tqdm进度条

原代码是linux下运行&#xff0c;修改后可在window下运行。 #ifndef TQDM_H #define TQDM_H#include <chrono> #include <ctime> #include <numeric> #include <ios> #include <string> #include <cstdlib> #include <iostream> #i…