如何分享自己项目/包的 类型定义 给第三方使用？

[yazoox]

现在有一个第三方的脚本，比如 https://www.sample.com/files/3rdparty.js ，我们需要动态的下载并运行它。已经定义好，该脚本有一个 entryPoint 方法，我们调用它的时候，会传一个定义好的 object/instance 进去。

e.g. 3rdparty.js

entryPoint(obj) {
 const db = obj.getDatabase();
 if (db) {
   // ...
 }
}

但现在，这个第三方的脚本，想用 Typescript 写，希望使用我们的 type definition

我想了想，直接发一个 @types/mypackage 好像不行，因为需要在 3rdpary.js 里面 import * as a from "mypackage" 才能够自动匹配找到 @types/mypackage ，而第三方，并不需要 import 我们的 mypackage

这个情况下，我们要怎么分享我们的类型定义给他们？

p.s.

我们现在做的，就是把所有的 interface 放到一个文件里面，比如 interface.ts ，然后把这个文件做成一个新的包，mypackage-common ，然后我们自己的 mypacakge 里面 import * as a from "mypackage-comm"，再把这个 mypackage-common 包分享给第三方。

[Envov]

1 、首先在你的 tsconfig.json 定义 d.ts 的路径，目的是让编辑器读取自定义的类型声明文件
{
"compilerOptions": {
"typeRoots": [ "./your-types-path", "./node_modules/@types"]
}
}
2 、在你的 types 文件夹中建立一个 d.ts 文件，例如 your-types-path/3rdparty-types.d.ts

3 、在该 d.ts 文件中声明 https://www.sample.com/files/3rdparty.js 这个脚本的类型，你可以先将类型发布到 npm 然后在这里引入申明

import type {someTypes} from "@types/mypackage"

declare global {
namespace Thirdparty {
const entryPoint: someTypes;
}
}

4 、如果你配置了 eslint ，还需要在 eslint 编辑全局变量的类型 .eslintrc

"globals": {
"Thirdparty": "writable"
},

5 、你现在可以在任何地方写 Thirdparty.entryPoint 它追踪 @types/mypackage 中的类型

[yazoox]

@Envov 兄弟，谢谢先。
```
import type (someTypes) from "@types/mypackage"
```
这个给了我很大的提示。
p.s.
不过，看你的描述，好像是我们在使用 3rdparyty 的 types
我们的需求是，我们提供 types ，3rdparty.js 使用我们提供的 types

[Envov]

@yazoox 是的，上面的步骤就是在项目中描述 3rdparty.js 的类型，一句话就是把自己写的类型发布到 "@types/mypackage" 然后在项目里面把 3rdparty.js 的类型链接到"@types/mypackage"

[yazoox]

@Envov thx.
这一句是啥意思，主要是这个 Thirdpary ？这里没有一个项目或者文件叫 Thirdpary 呢。
```
"globals": {
"Thirdparty": "writable"
},
```

[Envov]

@yazoox 目的是在全局中使用 Thirdparty 变量不报错，这个名字你可以随便取，表示的是 https://www.sample.com/files/3rdparty.js 这个 js 中使用的 window 下的命名空间，https://www.sample.com/files/3rdparty.js 不是通过 script 引入的吗和 jquery 或者$符号类似

[yazoox]

@Envov
所以,
```
declare global {
namespace Thirdparty {
const entryPoint: someTypes;
}
}
```
是和
```
"globals": {
"Thirdparty": "writable"
},
```
配套的

不过，我的 entryPoint 不是挂在 window 下面的（或者说，Thirdpary 不是挂在 window 下面的）是 dynamic import 直接下载然后引用方法的。e.g.
```
export async function loadJS(url: string) {
const actions = await import(/* webpackIgnore: true */ url);
return actions;
}

...

const module = await loadJS("https://www.sample.com/files/3rdparty.js");
if (module.entryPoint) {
module.entryPoint(...);
}

```

[Envov]




[Envov]

npm install envov-test-types --save-dev
在 ts 文件中写这个：
import "envov-test-types"
import('https://code.jquery.com/jquery-3.6.0.js').then(module=>{/** 这里就获得了类型提示 */})

[yazoox]

@Envov
不过，为什么你要 declare 并且 import 这个 jquery 的 js 地址呢？( https://code.jquery.com/jquery-3.6.0.js)