将自定义标签导入 TypeScript答案

【问题标题】：Import custom tag to TypeScript将自定义标签导入 TypeScript
【发布时间】：2021-07-28 06:50:23
【问题描述】：

我有一个创建 HTML 页面的 TypeScript 文件。我喜欢导入模块“model-viewer”并在我的代码中使用它。

import * as fs from "fs";
import prettier from "prettier";
import React from "react";
import ReactDOMServer from "react-dom/server";
import "@google/model-viewer";

render();

 function render() {
   let html = ReactDOMServer.renderToStaticMarkup(<HelloWorldPage />);
   let htmlWDoc = "<!DOCTYPE html>" + HTML;
   let prettyHtml = prettier.format(htmlWDoc, { parser: "html" });
   let outputFile = "./output.html";
   fs.writeFileSync(outputFile, prettyHtml);
   console.log(`Wrote ${outputFile}`);
}

function HelloWorldPage(){
  return (
    <html>
      <head>
    <meta charSet="utf-8" />
    <title>Hello world</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
  </head>
  <body>
  <div id='map'>
    <model-viewer
            src="/buddha1.glb"
            ios-src="/buddha1.usdz"
            ar
            ar-scale="fixed"
            ar-modes="scene-viewer quick-look"
            camera-controls
            alt="Model of House">
      </model-viewer>
    </div>
  </body>
</html>
);
}

我收到错误“JSX.IntrinsicElements”类型上不存在属性“model-viewer”。如何在此脚本中导入模块。

【问题讨论】：

好像是open issue in the model-viewer repo

标签： reactjs typescript

【解决方案1】：

好的，我采取另一条路来修复它

import * as fs from "fs";
import prettier from "prettier";
import React from "react";
import ReactDOMServer from "react-dom/server";

render();

function render() {
  const myhtml = "<html><head><meta charSet='utf-8' /><title>Hello world</title> 
  <script type='module' src='https://unpkg.com/@google/model-viewer/dist/model- 
  viewer.min.js'></script></head><body><div id='map'> 
  <ModelViewsrc='/buddha1.glb'ios-src='/buddha1.usdz'arar-scale='fixed'ar- 
  modes='scene-viewer quick-look'camera-controlsalt='Model of House'> 
  </ModelView></div></body></html>"
  let html = ReactDOMServer.renderToStaticMarkup(<div dangerouslySetInnerHTML={{ 
  __html: myhtml }} />);
  let htmlWDoc = "<!DOCTYPE html>" + HTML;
  let prettyHtml = prettier.format(htmlWDoc, { parser: "html" });
  let outputFile = "./output.html";
  fs.writeFileSync(outputFile, prettyHtml);
  console.log(`Wrote ${outputFile}`);
}

但现在我遇到了另一个问题。 “@render 脚本失败。”发生这种情况是因为“https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js”这个地方，因为它有@符号，它给出了一个错误。

【讨论】：