时间戳

首页 > 解决方案 > Typescript如何处理本机接口

typescript - Typescript如何处理本机接口

问题描述

File打字稿中 有一个本机接口在此处输入图像描述

假设我有一个名为的自定义类/接口File

class File {
  read(input: File) {}
}

我如何告诉 typescriptinput参数的类型是本机 typescript 的File实现而不是我自己的？

标签： typescript

解决方案

如果您的类在全局范围内，您将在尝试重新定义名为的类型时遇到编译器错误File：

class File { } // error!
//    ~~~~ <--- Duplicate identifier 'File'.

这是有道理的，因为您已经有一个构造函数值和一个File在范围内命名的接口。

所以我假设你的类是在它自己的模块中，比如在一个名为的文件中myModule.ts：

// myModule.ts
export class File {
  read(input: File) { // does not work yet
  }
}

但是，当然，myModule.ts命名的类型内部File是指您的新类的实例，而不是全局File接口。我们怎样才能解决这个问题？

如果您使用的是 TypeScript 3.4 或更高版本，则可以使用globalThis命名空间：

// myModule.ts
export class File {
  read(input: globalThis.File) { // okay now
  }
}

让我们确保它有效：

const file = new File();
const globalFile = document.getElementsByTagName("input")[0].files!.item(0)!

file.read(file); // error!
file.read(globalFile); // okay!

看起来不错！

Playground 代码链接

如果您因为使用的是旧版本的 TypeScript 而没有globalThis命名空间，那么我能想到的唯一方法是添加一个名为的新全局类型，例如，GlobalFile它是全局File接口的类型别名。而且您必须在全局范围内的模块外部的文件中执行此操作，例如在名为的文件中outsideMyModule.ts：

// outsideMyModule.ts
type GlobalFile = File; // no export, so not a module

然后，在里面myModule.ts你可以使用类型别名：

export class File {
  read(input: GlobalFile) { // okay now
  }
}

这应该和以前一样工作：

const file = new File();
const globalFile = document.getElementsByTagName("input")[0].files!.item(0)!

file.read(file); // error!
file.read(globalFile); // okay!

好的，希望这会有所帮助；祝你好运！

推荐阅读