TypeScript如何单行调用导入类静态方法供HTML属性使用

不需要额外写包装函数，直接在TS类的属性定义区写一行代码，把模板要调用的方法名指向导入的静态工具方法即可：

getString = BlahUtils.getString.bind(BlahUtils);

细节说明 #

• 末尾的.bind(BlahUtils)用于固定方法的执行上下文，避免工具方法内部用到this引用类内其他静态成员时出现指向错误。如果确定getString方法内部永远不会用到this，可以省略bind，写法更精简：

  getString = BlahUtils.getString;
  

• 你之前用的两行方案里，第二行getString(string)是完全多余的：模板解析{{getString(string)}}绑定表达式时，会自动传入参数触发方法执行，你只需要在当前模板对应的作用域上，暴露同名的方法引用即可，不需要手动提前调用。
• 你最初尝试的getString(string).BlahUtils、getString(string) = new BlahUtils都存在逻辑错误：前者是读取getString执行后返回值上的BlahUtils属性，后者是给函数调用结果赋值，语法和执行逻辑都不成立。

可直接运行的完整示例 #

blahUtils.ts #

export class BlahUtils {
  public static getString(string: string): string {
    return string.split('.').pop();
  }
}

sample.ts #

import { BlahUtils } from './blahUtils.ts';

class ViewComponent {
  // 仅需这一行即可完成绑定，无额外冗余代码
  getString = BlahUtils.getString.bind(BlahUtils);

  // 其他业务逻辑...
}

sample.html #

原有绑定写法完全不需要修改：

<blah class="{{getString(targetString)}}"></blah>

内容的提问来源于stack exchange，提问作者CoderKoz