使用Typescript进行接口类型检查


290

这个问题是使用TypeScript进行类类型检查的直接类比

我需要在运行时找出类型为any的变量是否实现了接口。这是我的代码:

interface A{
    member:string;
}

var a:any={member:"foobar"};

if(a instanceof A) alert(a.member);

如果在打字稿游乐场输入此代码,则最后一行将被标记为错误,“名称A在当前作用域中不存在”。但这不是事实,该名称确实存在于当前作用域中。我什至可以将变量声明更改为var a:A={member:"foobar"};无编辑者的抱怨。浏览完网络并在SO上找到另一个问题后,我将接口更改为一个类,但是后来我无法使用对象文字来创建实例。

我想知道类型A如何会消失,但是查看生成的javascript可以解释问题:

var a = {
    member: "foobar"
};
if(a instanceof A) {
    alert(a.member);
}

没有将A表示为接口,因此无法进行运行时类型检查。

我知道javascript作为一种动态语言没有接口的概念。有什么方法可以对接口进行类型检查吗?

打字稿操场的自动补全表明,打字稿甚至提供了一种方法implements。如何使用?


4
JavaScript没有接口的概念,但这不是因为它是一种动态语言。这是因为尚未实现接口。
trusktr '17

是的,但是您可以使用类代替接口。请参阅示例。
阿列克谢·巴拉诺什尼科夫

显然不是在2017年。现在是超级相关的问题。
doublejosh

Answers:


219

您可以在不使用instanceof关键字的情况下实现所需的功能,因为您现在可以编写自定义类型防护:

interface A{
    member:string;
}

function instanceOfA(object: any): object is A {
    return 'member' in object;
}

var a:any={member:"foobar"};

if (instanceOfA(a)) {
    alert(a.member);
}

很多成员

如果需要检查很多成员以确定对象是否与您的类型匹配,则可以添加一个鉴别器。以下是最基本的示例,它要求您管理自己的区分符...您需要更深入地研究模式,以确保避免重复的区分符。

interface A{
    discriminator: 'I-AM-A';
    member:string;
}

function instanceOfA(object: any): object is A {
    return object.discriminator === 'I-AM-A';
}

var a:any = {discriminator: 'I-AM-A', member:"foobar"};

if (instanceOfA(a)) {
    alert(a.member);
}

84
“没有办法在运行时检查接口。” 是的,无论出于什么原因,他们都还没有实施。
trusktr '17

16
如果接口有100个成员,则需要检查所有100个成员?Foobar。
珍妮·奥雷利

4
您可以向对象添加鉴别器,而不是全部选中100 ...
Fenton

7
这种鉴别器范式(如此处所述)不支持扩展接口。如果检查派生接口是否是基接口的instanceOf,则它将返回false。
亚伦

1
@Fenton也许我对此了解不多,但是假设您有一个扩展了接口A的接口B,则想isInstanceOfA(instantiatedB)返回true,但是想isInstanceOfB(instantiatedA)返回false。要使后者发生,B的鉴别者是否不必不是'I-AM-A'?
亚伦

85

在TypeScript 1.6中,用户定义的类型防护将完成这项工作。

interface Foo {
    fooProperty: string;
}

interface Bar {
    barProperty: string;
}

function isFoo(object: any): object is Foo {
    return 'fooProperty' in object;
}

let object: Foo | Bar;

if (isFoo(object)) {
    // `object` has type `Foo`.
    object.fooProperty;
} else {
    // `object` has type `Bar`.
    object.barProperty;
}

正如Joe Yang提到的那样:从TypeScript 2.0开始,您甚至可以利用带标记的联合类型的优势。

interface Foo {
    type: 'foo';
    fooProperty: string;
}

interface Bar {
    type: 'bar';
    barProperty: number;
}

let object: Foo | Bar;

// You will see errors if `strictNullChecks` is enabled.
if (object.type === 'foo') {
    // object has type `Foo`.
    object.fooProperty;
} else {
    // object has type `Bar`.
    object.barProperty;
}

它也可以使用switch


1
这看起来很奇怪。显然有某种元信息可用。为什么要使用这种类型保护语法来公开它。由于isinstanceof的原因,函数旁边的“对象是接口”起作用的原因是什么?更准确地说,您可以直接在if语句中使用“ object is interface”吗?但是无论如何,非常有趣的语法是我+1。
lhk 2015年

1
@lhk不,没有这样的声明,它更像是一个特殊类型,它告诉如何在条件分支内缩小类型。由于TypeScript的“范围”,我相信即使在将来也不会有这样的声明。之间的另一个不同object is typeobject instanceof class是,类型打字稿是结构性的,它关心的只是,而不是哪里的对象得到的形状“形”:一个普通的对象或一个类的实例,也没关系。
vilicvane 2015年

2
只是为了消除一个误解,这个答案可能会造成:在运行时没有元信息可以推断对象类型或其接口。
mostruash

@mostruash是的,答案的后半部分即使在编译时也无法在运行时运行。
trusktr '17

4
哦,但是,这必须假定在运行时这些对象将使用type属性创建。在这种情况下,它可以工作。该示例未显示此事实。
trusktr

40

打字稿2.0引入标记的联合

Typescript 2.0功能

interface Square {
    kind: "square";
    size: number;
}

interface Rectangle {
    kind: "rectangle";
    width: number;
    height: number;
}

interface Circle {
    kind: "circle";
    radius: number;
}

type Shape = Square | Rectangle | Circle;

function area(s: Shape) {
    // In the following switch statement, the type of s is narrowed in each case clause
    // according to the value of the discriminant property, thus allowing the other properties
    // of that variant to be accessed without a type assertion.
    switch (s.kind) {
        case "square": return s.size * s.size;
        case "rectangle": return s.width * s.height;
        case "circle": return Math.PI * s.radius * s.radius;
    }
}

我正在使用2.0 Beta,但标记为Union无效。<TypeScriptToolsVersion> 2.0 </ TypeScriptToolsVersion>
Makla's

每晚编译一次,但是intellisense不起作用。它还列出了错误:类型'Square |类型上不存在属性宽度/大小/...。矩形| 圈出以防万一。但是可以编译。
玛卡拉

22
这实际上只是在使用鉴别器。
Erik Philips

32

用户定义的类型防护怎么样?https://www.typescriptlang.org/docs/handbook/advanced-types.html

interface Bird {
    fly();
    layEggs();
}

interface Fish {
    swim();
    layEggs();
}

function isFish(pet: Fish | Bird): pet is Fish { //magic happens here
    return (<Fish>pet).swim !== undefined;
}

// Both calls to 'swim' and 'fly' are now okay.

if (isFish(pet)) {
    pet.swim();
}
else {
    pet.fly();
}

3
这是我最喜欢的答案-类似于stackoverflow.com/a/33733258/469777,但没有魔术字符串可能会由于缩小而中断。
Stafford Williams

1
由于某种原因,这对我不起作用,但(pet as Fish).swim !== undefined;确实如此。
Cyber​​Mew '19

18

现在有可能,我刚刚发布了增强的TypeScript编译器版本,可提供完整的反射功能。您可以从其元数据对象实例化类,从类构造函数中检索元数据,并在运行时检查接口/类。你可以在这里查看

用法示例:

在一个打字稿文件中,创建一个接口和一个实现它的类,如下所示:

interface MyInterface {
    doSomething(what: string): number;
}

class MyClass implements MyInterface {
    counter = 0;

    doSomething(what: string): number {
        console.log('Doing ' + what);
        return this.counter++;
    }
}

现在让我们打印一些已实现接口的列表。

for (let classInterface of MyClass.getClass().implements) {
    console.log('Implemented interface: ' + classInterface.name)
}

用反射编译并启动它:

$ node main.js
Implemented interface: MyInterface
Member name: counter - member kind: number
Member name: doSomething - member kind: function

有关Interface元类型的详细信息,请参见reflect.d.ts。

更新: 您可以在此处找到完整的工作示例


8
我认为这很愚蠢,但是停顿了一秒钟,看了一下您的github页面,发现它保持最新状态并有据可查,所以被否决了:-)我仍然不能为自己现在就使用它辩解implements但想承认自己的承诺,但又不想刻薄:-)
Simon_Weaver

5
实际上,我看到的这种反射功能的主要目的是创建更好的IoC框架,就像Java世界早已存在的框架一样(Spring是第一个也是最重要的一个)。我坚信TypeScript可以成为将来最好的开发工具之一,而反射是它真正需要的功能之一。
pcan

5
...呃,那又怎样,我们必须将这些编译器的“增强功能”引入未来的Typescript版本中?这实际上是Typescript的分支,而不是Typescript本身,对吧?如果是这样,这不是可行的长期解决方案。
dudewad

1
正如许多其他主题中所述,@ dudewad是一个临时解决方案。我们正在等待通过转换器的编译器可扩展性。请在官方TypeScript存储库中查看相关问题。此外,所有被广泛采用的强类型语言都具有反射性,我认为TypeScript也应该具有反射性。和我一样,许多其他用户也这样认为。
pcan

是的,不是我不同意-我也想要这个。只是,旋转一个自定义的编译器...这是否意味着需要移植Typescript的下一个补丁?如果您要维护它,那就很赞。看起来好像很多工作。不敲它。
dudewad

9

与上面使用用户定义的防护的情况相同,但是这次带有箭头功能谓词

interface A {
  member:string;
}

const check = (p: any): p is A => p.hasOwnProperty('member');

var foo: any = { member: "foobar" };
if (check(foo))
    alert(foo.member);

8

这是另一个选择:ts-interface-builder模块提供了一个构建时工具,可以将TypeScript接口转换为运行时描述符,而ts-interface-checker可以检查对象是否满足要求。

以OP为例

interface A {
  member: string;
}

您将首先运行ts-interface-builder,它会生成一个带有描述符的新简洁文件,例如,foo-ti.ts您可以像这样使用它:

import fooDesc from './foo-ti.ts';
import {createCheckers} from "ts-interface-checker";
const {A} = createCheckers(fooDesc);

A.check({member: "hello"});           // OK
A.check({member: 17});                // Fails with ".member is not a string" 

您可以创建一个单行类型保护功能:

function isA(value: any): value is A { return A.test(value); }

6

我想指出,TypeScript没有提供直接机制来动态测试对象是否实现了特定的接口。

相反,TypeScript代码可以使用JavaScript技术检查对象上是否存在适当的成员集。例如:

var obj : any = new Foo();

if (obj.someInterfaceMethod) {
    ...
}

4
如果形状复杂怎么办?您不希望对每个深度的每个属性进行硬编码
Tom

@Tom我猜您可以(作为检查器函数的第二个参数)传递运行时值或示例/示例-即您想要的接口的对象。然后,代替硬编码代码,而是编写所需的任何接口示例,并编写一些一次性的对象比较代码(使用例如for (element in obj) {}),以验证两个对象具有相似类型的相似元素。
ChrisW

3

TypeGuard

interface MyInterfaced {
    x: number
}

function isMyInterfaced(arg: any): arg is MyInterfaced {
    return arg.x !== undefined;
}

if (isMyInterfaced(obj)) {
    (obj as MyInterfaced ).x;
}

2
“ arg是MyInterfaced”是一个有趣的注释。如果失败了怎么办?看起来像一个编译时接口检查-刚好是我想要的。但是,如果编译器检查参数,那么为什么根本没有函数体。如果可以进行这种检查,为什么还要将其移至单独的功能。
lhk

1
@lhk刚刚阅读了有关类型防护的打字稿文档... typescriptlang.org/docs/handbook/advanced-types.html
Dmitry Matveev

3

根据Fenton的回答,这是我对某个功能的实现,以验证给定objectinterface全部或部分键是否具有。

根据您的用例,您可能还需要检查每个接口属性的类型。下面的代码不这样做。

function implementsTKeys<T>(obj: any, keys: (keyof T)[]): obj is T {
    if (!obj || !Array.isArray(keys)) {
        return false;
    }

    const implementKeys = keys.reduce((impl, key) => impl && key in obj, true);

    return implementKeys;
}

用法示例:

interface A {
    propOfA: string;
    methodOfA: Function;
}

let objectA: any = { propOfA: '' };

// Check if objectA partially implements A
let implementsA = implementsTKeys<A>(objectA, ['propOfA']);

console.log(implementsA); // true

objectA.methodOfA = () => true;

// Check if objectA fully implements A
implementsA = implementsTKeys<A>(objectA, ['propOfA', 'methodOfA']);

console.log(implementsA); // true

objectA = {};

// Check again if objectA fully implements A
implementsA = implementsTKeys<A>(objectA, ['propOfA', 'methodOfA']);

console.log(implementsA); // false, as objectA now is an empty object

2
export interface ConfSteps {
    group: string;
    key: string;
    steps: string[];
}
private verify(): void {
    const obj = `{
      "group": "group",
      "key": "key",
      "steps": [],
      "stepsPlus": []
    } `;
    if (this.implementsObject<ConfSteps>(obj, ['group', 'key', 'steps'])) {
      console.log(`Implements ConfSteps: ${obj}`);
    }
  }
private objProperties: Array<string> = [];

private implementsObject<T>(obj: any, keys: (keyof T)[]): boolean {
    JSON.parse(JSON.stringify(obj), (key, value) => {
      this.objProperties.push(key);
    });
    for (const key of keys) {
      if (!this.objProperties.includes(key.toString())) {
        return false;
      }
    }
    this.objProperties = null;
    return true;
  }

1
尽管此代码可以回答问题,但提供有关此代码为何和/或如何回答问题的其他上下文,可以提高其长期价值。
xiawi

0

因为类型在运行时是未知的,所以我编写了以下代码来比较未知对象,而不是将其与类型进行比较,而是与已知类型的对象进行比较:

  1. 创建正确类型的样本对象
  2. 指定其哪些元素是可选的
  3. 对未知对象与此样本对象进行深入比较

这是我用于深度比较的(与接口无关的)代码:

function assertTypeT<T>(loaded: any, wanted: T, optional?: Set<string>): T {
  // this is called recursively to compare each element
  function assertType(found: any, wanted: any, keyNames?: string): void {
    if (typeof wanted !== typeof found) {
      throw new Error(`assertType expected ${typeof wanted} but found ${typeof found}`);
    }
    switch (typeof wanted) {
      case "boolean":
      case "number":
      case "string":
        return; // primitive value type -- done checking
      case "object":
        break; // more to check
      case "undefined":
      case "symbol":
      case "function":
      default:
        throw new Error(`assertType does not support ${typeof wanted}`);
    }
    if (Array.isArray(wanted)) {
      if (!Array.isArray(found)) {
        throw new Error(`assertType expected an array but found ${found}`);
      }
      if (wanted.length === 1) {
        // assume we want a homogenous array with all elements the same type
        for (const element of found) {
          assertType(element, wanted[0]);
        }
      } else {
        // assume we want a tuple
        if (found.length !== wanted.length) {
          throw new Error(
            `assertType expected tuple length ${wanted.length} found ${found.length}`);
        }
        for (let i = 0; i < wanted.length; ++i) {
          assertType(found[i], wanted[i]);
        }
      }
      return;
    }
    for (const key in wanted) {
      const expectedKey = keyNames ? keyNames + "." + key : key;
      if (typeof found[key] === 'undefined') {
        if (!optional || !optional.has(expectedKey)) {
          throw new Error(`assertType expected key ${expectedKey}`);
        }
      } else {
        assertType(found[key], wanted[key], expectedKey);
      }
    }
  }

  assertType(loaded, wanted);
  return loaded as T;
}

以下是我如何使用它的示例。

在此示例中,我希望JSON包含一个元组数组,其中的第二个元素是一个名为User(具有两个可选元素)的接口的实例。

TypeScript的类型检查将确保我的样本对象正确,然后assertTypeT函数检查未知(从JSON加载)的对象是否与样本对象匹配。

export function loadUsers(): Map<number, User> {
  const found = require("./users.json");
  const sample: [number, User] = [
    49942,
    {
      "name": "ChrisW",
      "email": "example@example.com",
      "gravatarHash": "75bfdecf63c3495489123fe9c0b833e1",
      "profile": {
        "location": "Normandy",
        "aboutMe": "I wrote this!\n\nFurther details are to be supplied ..."
      },
      "favourites": []
    }
  ];
  const optional: Set<string> = new Set<string>(["profile.aboutMe", "profile.location"]);
  const loaded: [number, User][] = assertTypeT(found, [sample], optional);
  return new Map<number, User>(loaded);
}

您可以在用户定义类型防护的实现中调用这样的检查。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.