随手记录d.ts文件打包问题

在TS项目中,有太多一样的类型声明,重复声明显然是最不明智的选择。还有一种方式就是采用export,import方式。但是每个使用的文件都需要imort,或者一个文件需要import多个类型声明,都会显得代码冗杂。所以我们可以在项目中采用在d.ts文件中声明全局声明命名空间的方式。

但是在组件库项目中,就会遇到打包后找不到命名空间的问题。

一、全局命名空间使用

声明

declare namespace Feature {
  export type BreadcrumbItem = {
    id: string;
    label: string;
  }
}

使用

type IProps = {
  data: Feature.BreadcrumbItem[];
}
const Breadcrumb: React.FC<IProps> = (props) => {
    return <div>{props.id}</div>
}

二、 解决打包后命名空间失效问题

问题一:打包后d.ts文件丢失

原因:.d.ts文件被视为编译器进行类型检查的不可修改的输入。它们不用于任何输出生成,这也意味着它们不会被复制到build

The .d.ts files you use are an input to the build system but not an output. It’s perfectly reasonable to consume some types from a .d.ts but have your output not use those types, so there’d be no reason to distribute the input .d.ts with your build results. […] It sounds like you’ll want a post-build step in your build tool to copy the relevant .d.ts files wherever you need them.The .d.ts files are considered “references” the compiler will not touch them, not move them, or recreate them. An easy way to think of the .d.ts files is that they go along with your .js files. if you are copying the .js files, you should copy the matching .d.ts.

解决:通过手动构建步骤复制d.ts文件。

我构建工具用的是gulp,其他构建工具操作类似:

gulp.task('copy', done => {
    return gulp.src('src/typings/*')//需要被复制的文件夹
      .pipe(gulp.dest('lib/typings'));//复制后输出位置
});

问题二:d.ts文件打包输出后,全局命名未生效

原因一:打包后的d.ts文件未编译

解决:修改tsconfig.json文件

{
  "compilerOptions": {
    "module": "commonjs",
    "lib": [
      "es6"
    ],
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "baseUrl": "../",
    "typeRoots": [
      "../"
    ],
    "types": [],
    "noEmit": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "./lib" //需要ts编译的文件夹
  ],
}

原因二:打包后的d.ts文件未引入

1. package.json 中的 types 或 typings 字段指定一个类型声明文件地址。比如:

{
    "name": "foo",
    "version": "1.0.0",
    "main": "lib/index.js",
    "types": "index.d.ts",
}

2. 打包前,在指定的类型声明文件中采用三斜线指令引入命名文件feature.d.ts

/// <reference types="./typings/feature" />

随手纪录,希望能帮到正在被此问题困扰的你。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 随手记录d.ts文件打包问题

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们