怎么在ts文件中导入全局js的typescript声明文件

4 篇文章 0 订阅
3 篇文章 0 订阅

问题

我写了一个js文件: fabric.ext.js, 并且在 html直接包含它:

<head>
  <script src="fabric.min.js"></script>
  <script src="fabric.ext.js"></script>
</head>

我又为它写了一个ts声明文件 (rightHand.d.ts):

// eslint-disable-next-line @typescript-eslint/no-namespace
declare namespace rightHand {
  interface Point {
    x: number;
    y: number;
  }
  function loadObjects(ar: any[]): any[]; // fabric.Object[]
  function makeLine(points: number[], options: object): any; // fabric.Line2
  function makePolyline(points: Point[], options: object): any; // fabric.Polyline2
  function makePolygon(points: Point[], options: object): any; // fabric.Polygon2
  function makeText(text: string, options: object): any; // fabric.Text2
}

在某个.vue 文件, 在脚本部分

我只能把rightHand.d.ts的内容复制进去, 这样才可以成功编译.但是这样意味着太多重复代码。

搞了一天,尝试修改tsconfig.json, package.json, 没有成功。希望有大牛指点迷津。

解决方案

把rightHand.d.ts文件放在src或者src/types目录下就可以,也可以命名为global.d.ts文件。放在src/typings目录下不可用。

注意声明文件中不要使用export,否则该文件就是一个模块(文件模块),而不是一个脚本(全局模块)了。

手动编写TypeScript类型定义(.d.ts 文件),也称为“声明文件”,是为了给现有的JavaScript库或模块添加类型注解,使得TypeScript能够在编译期间检测出潜在的问题。以下是编写基本类型定义的基本步骤: 1. 创建.d.ts 文件:在项目目录下创建一个文件,通常命名为库名加上`.d.ts` 的后缀,例如 `myLibrary.d.ts`。 2. 导入或导出模块:在文件顶部,首先使用 `export` 关键字导入你想要类型化的模块,如果是全局变量,则不需要导入。例如: ```typescript export interface MyLibrary { // ... } ``` 3. 定义接口、类或类型:对于模块的函数、对象或枚举,创建相应的类型声明。例如,如果`Recast`是一个对象,可以这样定义: ```typescript declare class Recast { analyze(code: string): any; // 这里只是一个示例,实际应有详细的类型 } ``` 4. 添加属性和方法:为每个函数或对象添加详细的参数类型和返回类型。如果你知道它们的具体类型,尽可能精确。 5. 提供必要的类型约束:使用 TypeScript 的类型关键字如 `number`, `string`, 或自定义类型约束 (`extends` 和 `implements`) 来限制参数和返回值的类型。 6. 异常和静态成员:若有必要,声明可能出现的异常类型,以及静态成员的类型。 7. 使用 `any` 或 `unknown`:对于未知或不可信的部分,你可以标记为 `any` 或 `unknown`,但这会影响TypeScript的类型检查。 完成上述步骤后,TypeScript将能够识别并使用你在.d.ts文件定义的类型。记得在项目引入这个定义文件,让TypeScript在编译时使用它。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值