Glint是一组工具，可帮助使用ember.js和Glimmerx等项目的项目进行打字。本指南将向您展示如何在ember.js项目中安装和使用GLINT。

步骤1：安装

创建一个新的Ember应用程序：

ember new my-app --typescript
cd my-app

安装闪光依赖性：

npm install -D @glint/core @glint/template @glint/environment-ember-loose

更新tsconfig.json：

// tsconfig.json

{
  "compilerOptions": {
    ...
  },
+ "glint": {
+   "environment": "ember-loose"
+ }
}

创建一个名为types/glint.d.ts的新文件：

// types/glint.d.ts

import '@glint/environment-ember-loose';

步骤2：在模板注册表中添加签名

将以下声明添加到您的组件中，以在模板注册表中索引其签名。例如：

// app/components/avatar.ts

import Component from '@glimmer/component';

export default class Avatar extends Component {}
+
+ declare module '@glint/environment-ember-loose/registry' {
+   export default interface Registry {
+     Avatar: typeof Avatar;
+   }
+ }

与您的帮助者和修饰符同样。例如：

// app/helpers/sum.ts

import { helper } from '@ember/component/helper';

const sum = helper((values: Array<number>) => {
  return values.reduce((sum, next) => sum + next, 0);
});

export default sum;
+
+ declare module '@glint/environment-ember-loose/registry' {
+   export default interface Registry {
+     sum: typeof sum;
+   }
+ }

您也可以使用{{! @glint-ignore }}，{{! @glint-nocheck }}和{{! @glint-expect-error }}忽略模板中的代码。

步骤3：添加依赖性签名

对于不提供闪光类型的插件，手动将其组件/助手/修饰符签名添加到注册表中：

// types/glint.d.ts

import '@glint/environment-ember-loose';
+ import { ComponentLike, HelperLike } from '@glint/template';
+
+ declare module '@glint/environment-ember-loose/registry' {
+   export default interface Registry {
+     WelcomePage: ComponentLike;
+     'page-title': HelperLike<{
+       Args: { Positional: [title: string] };
+       Return: void;
+     }>;
+   }
+ }

步骤4：运行可执行文件

运行glint命令以打字您的项目。该命令可以在您的绒毛脚本中使用，例如：

//  package.json

{
  ...
  "scripts": {
    "build": "ember build --environment=production",
    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
+   "lint:glint": "glint",
    "lint:hbs": "ember-template-lint .",
    "lint:hbs:fix": "ember-template-lint . --fix",
    "lint:js": "eslint . --cache",
    "lint:js:fix": "eslint . --fix",
    "start": "ember serve",
    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
    "test:ember": "ember test"
  },
  ...
}

结论

使用Glint和typeScript，您现在应该在ember.js项目模板中具有端到端的打字。