键入安全的胡子模板

Posted 2023-03-13

【中文标题】键入安全的胡子模板

【英文标题】：type safe mustache templates

【发布时间】：2018-03-03 10:04:05

【问题描述】：

有没有可以执行以下操作的解决方案？：

my-template.mustache

Hello name!

index.ts

import  readFileSync, writeFileSync  from 'fs';
import * as Mustache from 'mustache';

export interface Person 
    name: string;


const hash: Person = 
    name: 'Jon'
;

const template = readFileSync('my-template.mustache', 'utf-8');

// somehow let the IDE know the hash type
const result = Mustache.render(template, hash);

writeFileSync('my-template.html', result, 'utf-8');

如果你这样做了：

my-template.mustache

Hello name, age <!-- red squiggles under age -->

所以age 不是Person 类型的属性，而哈希类型是Person，所以age 下会出现红色曲线。最好是可以在 Visual Studio Code 中工作的机制。

更新： 要清楚Hello name, age <!-- red squiggles under age --> 是我想要完成的，而不是我遇到的问题。

【参考方案1】：

没有简单的方法可以做到这一点；但是，有一些复杂的。我想到的最简单的方法是创建一个工具，将您的*.mustache 模板编译成打字稿模块，然后您只需将这些模块作为常规打字稿文件导入，而不是fs.readFileSync 输入它们。下面是一个示例，说明您的模板与年龄的编译结果可能是什么样的：

import * as Mustache from 'mustache';

const template = 'Hello name, age <!-- red squiggles under age -->';
export interface TemplateParams 
    name: string;
    age: string;

export default function render(params: TemplateParams): string 
    return Mustache.render(template, params);

此工具还需要插入到您用于构建应用并在观察模式下逐步构建的脚本中。

【参考方案2】：

作为Nikita mentioned，没有任何工具可以使用Mustache 完成此任务，您需要编写一个编译器。如果您愿意摆脱小胡子，可以使用template literals。

我写了embedded-typescript，它使用编译器生成具有ejs 启发语法的类型安全模板。它是开源的，因此您可以使用该代码作为基础，为受小胡子启发的语法构建类似的东西。

【参考方案3】：

一种方法是声明类型而不是使用接口。类型声明有点像 Traits。在下面，它允许您将任何 JS 对象映射到具有新属性的类型，但是如果您尝试为给定属性使用错误的类型，它将失败。

import  readFileSync, writeFileSync  from 'fs';
import * as Mustache from 'mustache';

export interface PersonWithName 
    name: string;


export declare type Person = PersonWithName | any;

const hash: Person = 
    name: 'Jon'
;

const hashWithAge: Person = 
    name: 'Jon',
    age: 10,
    newAge: 20
;

const template = readFileSync('my-template.mustache', 'utf-8');

【讨论】：

这个人只是一个例子。 “年龄以下的红色曲线”是我想要完成的（类型安全），而不是我遇到的问题。