Validation error when specifying Element Attributes

[BwehaaFox]

After installing glint in our project, generally valid vscode works well, except for one thing. If I import a component and try to give it, for example, a class attribute, it is flagged as an error:

Argument of type 'unknown' is not assignable to parameter of type 'Element'.glint(2345)

This works with any attribute without @ on using ...attributes I saw in examples that there should be no errors with this, so I don’t understand where it comes from

If you disable the vscode plugin, there is no error, no validation, so I assumed it was related to this addon

"@glint/core": "^1.4.0",
"@glint/environment-ember-loose": "^1.4.0",
"@glint/environment-ember-template-imports": "^1.4.0",
"@glint/template": "^1.4.0",
"ember-template-imports": "^4.1.1",

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": [
      "es2016",
      "dom"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noEmitOnError": false,
    "noEmit": true,
    "inlineSourceMap": true,
    "inlineSources": true,
    "baseUrl": ".",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "experimentalDecorators": true,
    "types": ["ember-source/types"],
    "paths": {
      "*": [
        "types/*"
      ],
      "@glimmer/tracking": [
        "node_modules/ember-cached-decorator-polyfill",
        "node_modules/@glimmer/tracking/dist/types"
      ],
    }
  },
  "exclude": ["node_modules", "dist", "lib"],
  "include": [
    "app/**/*",
    "tests/**/*",
    "types/**/*"
  ],
  "glint": {
    "environment": [
      "ember-loose",
      "ember-template-imports"
    ]
  }
}

[NullVoxPopuli]

The signature for ui container probably needs to be an HTMLElement, rather than just Element.

[BwehaaFox]

That is, for components of the old format, instead of the optional Args interface like:

interface Args {
  name: string;
}

export default class extends Component<Args>

Do I need to declaratively specify a signature like this for validation to work correctly?

interface Signature {
  Args: {
    name: string;
  };
  Element: HTMLElement;
}

export default class extends Component<Signature>

[NullVoxPopuli]

Yes, you need the full signature, as in your second code snippet.

Also, this Android feature is amazing!

[BwehaaFox]

Sorry, I forgot to translate the text in advance 😅. English is not at a sufficient level to formulate the primary thought in it, I’ll correct it now

I agree, built-in translation is indispensable

[NullVoxPopuli]

no worries!! I meant for the other non-russian-speaking folks -- glad you're problem is solved!