如何将Flask中的JSON信息传递到浏览器端运行的TypeScript中

可行的实现方案核心思路：不要把Flask模板插值语法写在TS源文件中，所有服务端注入的内容都放在需要被Flask渲染的HTML模板里，TS仅读取渲染后的实际内容即可，以下是3种常用实现： #

方案1：HTML模板挂载全局变量（最常用，改造成本最低）

1. Flask端代码不需要改动，还是正常传参：

return render_template('foo.html', input_from_python=data)

2. 在foo.html模板中，引入编译后的TS产物之前，新增一段服务端渲染的脚本，把数据挂载到全局window对象上：

<!-- foo.html 内容 -->
<script>
// 这段代码仅在服务端渲染时生成，不会出现在你的TS源码中
window.__PYTHON_INPUT__ = {{ input_from_python | tojson }};
</script>
<!-- 引入TS编译后的JS静态资源 -->
<script src="/static/dist/your_bundle.js"></script>

3. TS代码中直接读取全局变量，还可以补充类型定义避免类型报错：

// 扩展Window类型，根据你的实际数据结构替换YourExpectedType
declare global {
  interface Window {
    __PYTHON_INPUT__: YourExpectedType;
  }
}

const var_from_python = window.__PYTHON_INPUT__;

方案2：DOM数据属性挂载（不污染全局作用域）

如果不想污染全局window对象，可以把数据挂到DOM节点的自定义属性上：

1. HTML模板中写入data属性：

<div id="app" data-python-input="{{ input_from_python | tojson | forceescape }}"></div>

这里的forceescape过滤器是为了避免HTML注入风险。
2. TS中读取属性并解析：

const appElement = document.getElementById('app');
const var_from_python = JSON.parse(appElement.dataset.pythonInput) as YourExpectedType;

方案3：异步接口拉取（适合前后端分离场景）

如果不需要首屏立刻拿到数据，可以单独写接口异步拉取：

1. Flask端新增接口：

from flask import jsonify

@app.route('/api/get_input_data')
def get_input_data():
    data = {"key": "value"} # 你的实际数据
    return jsonify(data)

2. TS中请求接口拿数据：

async function fetchInputData(): Promise<YourExpectedType> {
  const response = await fetch('/api/get_input_data');
  return await response.json();
}

// 调用方法拿数据
const var_from_python = await fetchInputData();

内容的提问来源于stack exchange，提问作者foobarpp