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

Question

我正在使用以下函数来 return 初始服务器呈现的标记和数据，以防缺少 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 中行不通

N/a

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

但无论如何我想找到其他方法。

Answer 1

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

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

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

const initialData = window.initialData;

应该可以。

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

How can I read pre-fetched server side data with a typescript client?

global

window

typescript

reactjs