JavaScript type hinting & validation (typescript)

Документация Руководства для разработчиков
1

Discourse ships type information for its JavaScript code. This can provide inline documentation, autocomplete, and other useful IDE features. It can also be used for some basic type validation, using the @ts-check directive.

Much of this will be automatically consumed by IDEs with TypeScript/JavaScript support. But for functionality in .gjs files, you’ll need some specific configuration and/or IDE plugins.

Writing TypeScript

Core, themes and plugins can be authored directly in TypeScript. Use a .ts extension for plain modules, or .gts for Glimmer components with a <template> tag. Type syntax is stripped at build time, so no separate compilation step is required. Linting (@discourse/lint-configs) and type-checking (pnpm lint:types) both understand these files.

Usage

  • CLI: Run pnpm lint:types

  • VSCode: Install the Glint v2 extension. This is part of our recommended config, so you may already have it. If anything isn’t working, you may need to trigger “Restart extension host” from VSCode’s command palette, or restart the IDE.

  • JetBrains (RubyMine, WebStorm, Intellij, etc.): Install the EmberExperimental plugin.

Troubleshooting

Ensure that you’ve run pnpm install recently

Enabling for a theme or plugin

Official themes/plugins, and the official skeletons, are all wired up for types. To enable it for your own plugin/theme, pull in the latest changes from the relevant skeleton (package.json, tsconfig.json)

Live type updates for bundled plugins and themes

If you’re adding or changing core types and need to use those changes immediately in a bundled plugin or theme, use live type updates.

To do so, temporarily change the plugin or theme’s package.json to:

{
  "private": true,
  "dependencies": {
    "discourse": "workspace:@discourse/types@*"
  }
}

Then run pnpm install and start the type watcher with pnpm types:watch.

Enable checking for a file

.ts and .gts files are always type-checked. For .js / .gjs files, type-checking is opt-in: add /** @ts-check */ at the top. For some examples, search Discourse core for @ts-check.

Limitations

We do not provide any guarantees about the accuracy of the types - they’re provided on a best-effort basis. PRs to improve the type documentation in core are welcome.

Known Issues

  • Autocomplete inside <template> tags requires complete syntax. For example, if you start typing:

    <DBu

    This will not autocomplete to DButton, because the template syntax cannot be parsed. The workaround is to close the brackets, and then go back to the variable you’d like to autocomplete:

    <DBu />

    Upstream issue here

This document is version controlled - suggest changes on github.

8 лайков