解决 typescript node tsx 的兼容问题

问题

在项目中使用 typescript + tsx + node 存在各种兼容问题,包括:

  • [esbuild Error]: Top-level await is currently not supported with the “cjs” output format

  • Cannot find module ‘X’. Did you mean to set the ‘moduleResolution’ option to ‘nodenext’, or to add aliases to the ‘paths’ option?

  • X is a type and must be imported using a type-only import when ‘verbatimModuleSyntax’ is enabled

  • An ‘export default’ must reference a value when ‘verbatimModuleSyntax’ is enabled, but ‘X’ only refers to a type

配置

配置下述文件后,以上问题得以解决。

package.json

package.json 中添加:"type": "module"
"script" 中使用 tsx,例如:"dev": "npx tsx src/app.ts"

tsconfig.json

tsconfig.json 中设置如下内容:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "customConditions": ["module"],
    "allowArbitraryExtensions": true,
    "noEmit": true,
    "verbatimModuleSyntax": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
}

import、export

使用 export type X = {} 导出 TypeScript Type,例如:

export type X = {
    item_1: string,
    item_2: string
}

同样,使用 import type { X } from path 导入 TypeScript Type,例如:

import type { X }  from './types'

导入和导出第三方库使用 ESM 形式,例如:

import express from 'express'
export default X

参考

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值