出口接口SuperTableSignature<T>｛//我们有一个'  '作为根元素元素：HTMLTableElement；//接受一个数组，每行一个arg游戏：｛项目：数组<T>；｝；//我们接受两个命名块:可选的' header '和必选的//`row`，它将与每个项及其索引一起调用。产量：｛头吗?［］；行：［项目：T，指数：数量］；｝；｝
然后像这样应用到组件类:

               
出口默认的类超级表<T>扩展组件<SuperTableSignature<T>>｛｝
              
目前只有使用特殊的闪烁版本的@glimmer/component才能正确输入:

               
进口组件从…起“@glint / environment-ember-loose / glimmer-component”；
              
总的来说，这看起来像：

               
进口组件从…起“@glint / environment-ember-loose / glimmer-component”；出口接口SuperTableSignature<T>｛//我们有一个' 
 '作为根元素元素：HTMLTableElement；//接受一个数组，每行一个arg游戏：｛项目：数组<T>；｝；//我们接受两个命名块:可选的' header '和必选的//`row`，它将与每个项及其索引一起调用。产量：｛头吗?［］；行：［项目：T，指数：数量］；｝；｝出口默认的类超级表<T>扩展组件<SuperTableSignature<T>>｛｝
此组件的模板可能如下所示：

               
{{！app/components/super-table.hbs}<表格…属性>{{#如果（has-block＂头＂）}}<泰德> <tr>{{收益率来＝＂头＂}}tr> 泰德>{{/如果}}<tbody>{{#各@items作为|项目指数|}}<tr>{{收益率项目指数来＝＂行＂}}tr>{{/每个}}tbody> 表格>
              
您会注意到上面的组件示例实际上应该是一个只包含模板的组件，因为组件类实际上不做任何事情。Glint还不完全支持模板组件，所以现在需要定义一个空的组件类。
余烬成分
如果你的应用程序不是完全的辛烷，你也可以为Ember组件提供类型信息。Ember组件也需要自定义导入。因为他们没有这个。arg游戏，they also need to use a specialArgsFor导入更多的样板文件:

               
/ / app /组件/ greeting.ts进口组件，｛
ArgsFor
｝从…起“@glint / environment-ember-loose / ember-component”；进口｛计算｝从…起“@ember /对象”；出口接口GreetingSignature｛arg游戏：｛消息：一串；目标吗?一串；｝；产量：｛默认的：［问候：一串］；｝；｝//这一行声明我们的组件的参数将被' splsplted '
//实例:出口默认的接口问候扩展ArgsFor<GreetingSignature>｛｝出口默认的类问候扩展组件<GreetingSignature>｛＠计算（“目标”）私人得到greetingTarget（）｛//因此使' this。目标｀a legal `string | undefined`
/ /属性访问:返回这．目标？?“世界”；｝｝
              

               
{{！app/components/greeting.hbs}{{收益率（concat＠消息＂，＂this.greetingTarget＂！＂）}}
              
模板注册表
如今，Ember在运行时动态解析模板中调用的内容（尽管这将最终改变）.由于这种动态特性，我们必须帮助Glint(和TypeScript)做一些改进。我们需要一种方法来告诉lint我们在模板中调用的这些东西实际上是在哪里定义的。我们通过“类型注册表”来做到这一点。如果您使用过Ember Data和TypeScript，那么您可能熟悉在每个模型的底部添加模型到类型注册表model.ts文件。闪烁模板类型注册表的工作原理完全相同。例如:

               
/ / app /组件/ greeting.ts进口组件从…起“@glint / environment-ember-loose / glimmer-component”；出口默认的类问候扩展组件｛⋮｝声明模块“@glint / environment-ember-loose /注册表”｛出口默认的接口登记处｛问候：typeof问候；｝｝
              
只需添加这一点，就可以告诉闪烁如何找到您的组件。我们正在寻找可能自动生成这个注册表的方法，或者可能提供一个代码演示程序，将它自动添加到你所有的TypeScript可调用对象中。UELS -addon-typed-templates插件使用自动发现方法。我们担心这种方法在大型应用程序中的性能影响，并且，由于模板严格模式即将到来，我们现在选择只支持类型注册中心方法。
助手
到目前为止，我们只关注组件，但helper是另一种类型的可调用对象，我们可以键入检入模板。函数helper只需要使用临时自定义的Glint导入并添加到注册表中:

               
进口｛助手｝从…起“@glint / environment-ember-loose / ember-component /助手”；函数重复（参数个数：［一串，数量］）｛返回参数个数［0］．重复（参数个数［1］）；｝常数repeatHelper＝助手（重复）；出口默认的repeatHelper；声明模块“@glint / environment-ember-loose /注册表”｛出口默认的接口登记处｛“重复”：typeofrepeatHelper；｝｝
              

               
{{!应用程序/组件/一些组件。哈佛商学院}}{{重复＂你好＂3.}}
              
基于类的helper需要自定义导入，但也需要提供类似组件的类型签名:

               
进口帮手从…起“@glint / environment-ember-loose / ember-component /助手”；出口接口附签｛纳米达斯：｛前缀吗?一串，后缀吗?一串｝；位置参数：［一串］；返回：一串；｝类阿菲克斯助手扩展帮手<附签>｛// TypeScript要求你为被覆盖的方法提供类型。这//表示必须提供与签名匹配的方法类型。//最好的方法是直接引用它们，如下所示。计算（参数个数：附签［“PositionalArgs”］，｛前缀，后缀｝：附签［“NamedArgs”］）：附签［“返回”］｛返回｀$ {前缀｝$ {参数个数［0］｝$ {后缀｝｀；｝｝出口默认的阿菲克斯助手；声明模块“@glint / environment-ember-loose /注册表”｛出口默认的接口登记处｛“词缀”：typeof阿菲克斯助手；｝｝
              

               
{{!应用程序/组件/一些组件。哈佛商学院}}{{词缀＂友善的＂前缀＝＂联合国＂}}{{词缀＂友善的＂后缀＝＂洛克＂}}{{词缀＂信任＂前缀＝＂在＂后缀＝＂艾德＂}}
              
修饰符
现在我们有了第三种可以在模板中调用的东西，那就是修饰符。与函数式helper一样，函数式修饰符只需要自定义的Glint导入和添加到注册表中。考虑一下这个{{在}}克隆:

               
/ /应用程序/修饰符/ when.ts进口｛修饰符｝从…起“@glint / environment-ember-loose / ember-modifier”；常数whenModifier＝修饰符（（元素：HTMLElement，［eventName，处理程序］：［一串，（）=>未知的］）=>｛元素．addEventListener（eventName，处理程序）；返回（）=>｛元素．removeEventListener（eventName，处理程序）；｝；｝）；出口默认的whenModifier；声明模块“@glint / environment-ember-loose /注册表”｛出口默认的接口登记处｛什么时候：typeofwhenModifier；｝｝
              

               
{{!应用程序/组件/一些组件。哈佛商学院}}<按钮类型＝＂按钮＂{{什么时候＂点击＂这个.onClick}}>点击我!按钮>
              
基于类的修饰符需要额外的类型签名样板，如组件:

               
/ /应用程序/修饰符/ say.ts进口修饰符从…起“@glint / environment-ember-loose / ember-modifier”；出口接口SayModifierSignature｛纳米达斯：｛乘数吗?数量｝；位置参数：［输入：一串］；元素：HTMLDivElement；｝类SayModifier扩展修饰符<SayModifierSignature>｛didReceiveArguments（）：无效｛这．元素．innerText＝这．arg游戏．位置［0］．重复（这．arg游戏．命名．乘数？?1）；｝毁灭（）：无效｛这．元素．innerText＝＇＇；｝｝出口默认的SayModifier；声明模块“@glint / environment-ember-loose /注册表”｛出口默认的接口登记处｛说：typeofSayModifier；｝｝
              

               
{{!应用程序/组件/一些组件。哈佛商学院}}<div{{说＂你好＂乘数＝2}}> div>
              
引擎盖下的秘密
那么闪闪到底是怎么做到的呢?TypeScript不理解模板语法，所以我们必须把模板转换成TypeScript的东西做理解。Glint使用一个转换，将模板语法转换为TypeScript，并将其注入组件类。这一切都发生在闪烁内部的内存中，因此您永远不会在文件中实际看到转换后的模板。扩展后的组件类通过编程方式提供给TypeScript编译器TypeScript语言服务API，设计用于按需处理和快速反馈。Glint接收来自TypeScript编译器的反馈，并将增强组件类中的位置映射回模板中的原始位置。它之所以能够做到这一点，是因为它在转换模板时跟踪位置。在编辑器中使用时，映射的反馈随后提供给Glint语言服务器，该服务器将其发送到编辑器的LSP客户端进行显示。Glint CLI的工作原理类似，使用相同的转换模块，但使用打印稿编译器API处理所有文件并提供适合终端显示的输出。
Glint由几个软件包组成：

               
@glint /配置-用于定位和加载Glint配置文件
               
@闪烁/核心—Glint命令行和语言服务器
               
@闪烁/模板-环境之间共享的类型声明
               
@闪烁/变换-将Glimmer模板重写为近似其语义的TypeScript工具
              
加上两个环境包:

               
@glint / environment-ember-loose-标准的类型声明和自定义导入（非-严格模式)Ember.js项目
               
@闪烁/环境闪烁-类型声明和自定义导入微光实验项目
              
以及为闪烁语言服务器的Visual Studio Code扩展:

               
typed-ember.glint-vscode
              
我们正在计划后续深入到闪烁内部，所以期待更多的细节即将到来!
JavaScript支持
所以，Glint适用于使用TypeScript的项目，但如果你不是呢?好吧，我们正在努力!闪烁是动力通过，但是TypeScript有能力从JavaScript文件提取类型信息@ts-check还有JSDoc，我们很幸运艾琳的歌手LinkedIn加入我们，致力于支持闪烁JavaScript。这方面的工作才刚刚开始，请继续关注!
下一步是什么
闪烁，就像今天存在的一样，仍然是非常实验性的。我们强烈建议您尝试一下，但目前不建议将其用于生产应用程序和插件。同样，Alex Kanunikov的不稳定的余烬语言服务器（UELS）插件els-addon-typed-templates是现在去灰烬模板类型检查。作为的一部分官方打印稿的支持谈到Ember，我们计划更新Glimmer组件类型签名，以支持类型化模板所需的所有类型信息（可能是我们上面描述的签名）。一旦实现了这一点，您就不需要使用定制的Glint导入，而将Glint用于生产项目将变得更加合理。我们也希望与亚历克斯·卡努尼科夫合作(@生活艺术)将Glint集成到Ember语言服务器中。现在，请尝试Glint模板类型检查，并让我们知道您的想法！新的#st编辑器支持频道安贝社会不和谐是讨论闪烁的好地方。希望在那里见到你!
主题:GlimmerX，Ember.js，线，打印稿，typed-templates，模板，类型检查，typechecking
评论的Disqus

       

        

         

          

           
            

             
最近的职位
             

              

             
            
          
          
         
         
        
        
       
       
      

   

    

     

      

       

        
婆罗门参家
工程的博客