TypeScript instanceof无法正常工作

时间:2017-08-30 15:10:06

标签: javascript typescript types casting instanceof

我在使用instanceof运算符时遇到问题,但它似乎无法正常工作。这是我的代码的一部分:

        const results = _.map(items, function(item: Goal|Note|Task, index: number) { 
            let result = {};
            if (item instanceof Goal) {
                result = { id: index, title: item.name };
            } else if (item instanceof Note) {
                result = { id: index, title: item.content.text };
            } else if (item instanceof Task) {
                result = { id: index, title: item.name };
            }

            console.log(item);
            console.log(item instanceof Goal);
            console.log(item instanceof Note);
            console.log(item instanceof Task);

            return result; 
        });

我的所有日​​志都显示为false,这是控制台的样子:

No type matched

尽管明确只有3种类型是可能的,但它们都没有匹配。您还可以看到对象本身的类型名称为Goal,因此我不明白为什么它与目标的实例不匹配。

有什么想法吗?

4 个答案:

答案 0 :(得分:11)

instanceof只有在匹配构造它的函数或类时才会返回true。这里的item是普通的Object

const a = { a: 1 } // plain object
console.log(a);

// {a:1}                 <-- the constructor type is empty
//   a: 1
//   __proto__: Object   <-- inherited from

a instanceof A         // false because it is a plain object
a instanceof Object    // true because all object are inherited from Object

如果使用构造函数或类构造它,则instanceof将按预期工作:

function A(a) {
    this.a = a;
}

const a = new A(1);    // create new "instance of" A
console.log(a);

// A {a:1}               <-- the constructor type is `A`

a instanceof A         // true because it is constructed from A
a instanceof Object    // true

如果GoalInterface,它只会检查对象的结构而不是其类型。如果Goal是构造函数,则它应该为instanceof检查返回true。

尝试类似:

// interface Goal {...}
class Goal {...}        // you will have to change the way it works.

items = [
   new Goal()
];

答案 1 :(得分:1)

您也可以使用型号防护装置:

https://basarat.gitbooks.io/typescript/docs/types/typeGuard.html

https://www.typescriptlang.org/docs/handbook/advanced-types.html

例如,如果您在班级中使用文字类型后卫:

class Goal {
 type: 'goal'
...
}

然后检查就像:

if (item.type === 'goal') {
}

或者您可以编写自己的类型警卫:

function isNote(arg: any): arg is Note {
    // because only your Note class has "content" property?
    return arg.content !== undefined;
}

if (isNote(item)) {
    result = { id: index, title: item.content.text };
}

答案 2 :(得分:0)

尝试使用构造函数实例化对象。它发生在我身上,因为我手动模拟对象以进行测试。如果您创建项目,如下面的示例,它应该工作:

function rot13(str) { // LBH QVQ VG!

  var strArray = '';

  for(var i = 0; i < str.length; i++){
    //console.log(str.charCodeAt(i));
    if(str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 77) {
      strArray = strArray.concat(str.charCodeAt(i) + 13, ' ');
    } else if(str.charCodeAt(i) >= 78) {
      strArray = strArray.concat(str.charCodeAt(i) - 13, ' ');
    } else {
      strArray = strArray.concat(str.charCodeAt(i), ' ');
    }

  }
  var correct = strArray.split(' ');
  console.log(correct);
  return String.fromCharCode.apply(null, correct);
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");

答案 3 :(得分:0)

正如@Gopikrishna 指出的那样,从 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="foo.png" class="Myimage"> <img src="bar.png" class="Myimage"> <br> <button id="button">Click</button> 解析或从 API 接收的对象将与您的自定义 JSON.parse 不匹配,因为它不是通过所需类的 Class 运算符创建的。

一种解决方法是首先将对象强制转换为所需的类,然后根据 new 检查属性。

undefined