从TypeScript文件导入常量到JavaScript文件报错，求实现方案

你遇到的Unexpected token, expected ,错误，根源是JavaScript引擎无法识别TypeScript的类型注解语法（比如slug: string、categorySlug?: string这类写法），直接导入.ts文件会导致JS解析器报错。

下面是几种可行的实现方案：

方案一：编译TS文件为JS后再导入（推荐） #

这是最标准的TS/JS交互方式：

1. 确保项目根目录有tsconfig.json，配置输出目录（比如"outDir": "./dist"）
2. 执行tsc命令编译所有TS文件，编译后的.js文件会输出到你配置的目录里
3. 在JS文件中导入编译后的JS文件，路径改成对应的.js文件路径：

   import {articleQuery} from "./path/to/file.js"
   const query = articleQuery(slug, categorySlug)
   

方案二：借助构建工具自动处理TS文件 #

如果你的项目用了Webpack、Vite、Create React App这类构建工具，可以直接配置工具处理TS文件，不用手动编译：

• Vite/Create React App默认支持TS，直接导入.ts文件即可，工具会自动编译处理
• Webpack需要安装ts-loader或babel-loader，并在配置文件中添加对.ts后缀的处理规则，这样导入.ts文件时工具会先编译成JS再打包

方案三：临时移除TS类型注解（不推荐） #

如果只是临时测试，可以把TS文件里的类型注解删掉，改成纯JS写法：

export const articleQuery = (slug, categorySlug) => 'context'

但这样会丢失TS的类型检查能力，长期来看不建议这么做。

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