如何使用打字稿客户端读取预取的服务器端数据？

Question

如果缺少 javascript 支持，我正在使用以下函数返回初始的服务器渲染标记和数据：

    export const serverRender = async () => {
        const { port, host } = config;
        const resp = await 
    axios.get(`http://${host}:${port}/testData.json`);

        const initialData = resp.data;
        return {
            initialMarkup: ReactDOMServer.renderToString(<App initialData={initialData} />),
            initialData,
        };
    };

我将这些数据提供给我的模板，如下所示（细节不是那么重要）：

    app.setViewEngine("pug");
    app.use(express.static(path.join(__dirname, "../public")));
    app.use(express.static(path.join(__dirname, "../assets")));
    app.enableCors();
    await app.listen(PORT, () => {
        console.log(`Nest App listening on port ${PORT}`);
    });

在我的模板中，我使用pug 插值将initialData 读入javascript (window.initialData = #{initialData}) 中的window 对象。如果我的客户端是 javascript 客户端，我可以像这样从 window 对象中读取：window.initialData，但 Typescript 不允许这样做。

我的问题是，传递预取数据并将其传递给客户端的最佳方式是什么？ IE。所以当我渲染客户端时我可以做这样的事情：

    /* somehow grab pre-fetched data */
    ReactDOM.hydrate(<App />, document.getElementById("root")); // entry point for webpack

我并不是说这是最好的方法（这是我问这个问题的另一个原因），但在过去，对于小型纯 javascript 项目，我已将数据分配给window，如上所述然后在我的react 的客户端渲染中，我做了这样的事情：

    const initialData = window.initialData;
    ReactDOM.hydrate(<App initialData={initialData} />, document.getElementById("root")); // entry point for webpack

这在 Typescript 中是行不通的

不适用

window 案例的错误消息： Property 'initialData' does not exist on type 'Window'

不过我还是想找点别的办法。

Answer 1

使用自定义的 initialData 值声明窗口全局对象的外观：

declare global {
    interface Window { 
        initialData: any; 
    }
}

一旦你声明了这一点，那么：

const initialData = window.initialData;

应该可以。