时间戳

首页 > 解决方案 > 如何配置模板使生成的 ts 文件不带双引号

html - 如何配置模板使生成的 ts 文件不带双引号

问题描述

现在每当我运行命令时stencil build --docs，它都会生成components.d.ts以下内容

/* eslint-disable */
/* tslint:disable */
/**
 * This is an autogenerated file created by the Stencil compiler.
 * It contains typing information for all components that exist in this project.
 */
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
export namespace Components {
    interface MyButton {
        /**
          * Button text
         */
        "text": string;
    }
    interface MyTab {
        /**
          * Tab active
         */
        "active": boolean;

如果您注意到，所有属性实际上都带有双引号，我想知道我该怎么做才能删除引号，因为我们知道对于ts文件来说这些引号不一定。

下面是我的tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2017"
    ],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2017",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

标签： htmlcsstypescriptstenciljs

解决方案

原因是道具名称可以包含破折号，因此在生成文件时，为了简单起见，所有道具名称都被引用。

Stencil 没有为此提供任何配置，但也完全没有必要更改它，因为 1）文件是自动生成的（因此没有必要对其进行不同的格式化）和 2）它是一个不包含任何运行时代码的声明文件（即文件大小无关紧要）。像 VS Code 这样的 TypeScript 编辑器提供了良好的智能感知，因此您可能永远不必与此文件进行交互，它只会为您提供良好的自动完成和内联文档。

您通常可以非常安全地 git-ignore 该文件（在第一次构建时会增加一些构建时间，因为它需要重新生成），即使官方建议将其添加到源代码控制中。

推荐阅读