template-lint icon indicating copy to clipboard operation
template-lint copied to clipboard

Optional properties inherited from interface not detected

Open gronostajo opened this issue 7 years ago • 1 comments

Here's an example:

model.ts

export interface Entity {
    pending?: boolean; // note the question mark!
}

export class Language implements Entity {
    name: string;
}

app.ts

import {Language} from "./model";

export class App {
    languages: Language[];

    constructor() {
        this.languages = [
            {name: 'foo'},
            {name: 'bar', pending: false},
            {name: 'baz', pending: true},
        ];
    }
}

app.html

<template>
    <h1>Hello world!</h1>
    <ul>
        <li repeat.for="language of languages">
            ${language.name}
            <button type="button" disabled.bind="language.pending">choose</button>
        </li>
    </ul>
</template>

Results of linting via gulp-aurelia-template-lint:

[12:27:20] WARNING: cannot find 'pending' in type 'Language' Ln 6 Col 13 \src\app.html

Here's the code in an app, complete with gulp and gulp-aurelia-template-lint: gronostajo/aurelia-template-lint-bug

gronostajo avatar Aug 14 '17 10:08 gronostajo

Some thoughts on this:

  1. Actually, new Language().pending is an error because Language doesn't redeclare pending. But unless you try to access .pending in TS code, TS compiler won't warn you about it. Should linter do that?
  2. Also consider the case where Entity is a class.

gronostajo avatar Aug 16 '17 07:08 gronostajo