Svelte.js中解决「Expected 0 arguments, but got 1.ts(2554)」错误

错误原因分析 #

1. TS报错来源：Vite + Svelte 默认启用了 TypeScript 类型检查（即使项目用纯 JavaScript），会对代码做类型推断，因此会出现 TS 相关提示。
2. 核心触发点：代码存在几处语法错误，导致组件编译异常，引发了类型检查的误判：
   • App.svelte 中 transform 样式使用了错误的语法（冒号代替括号）
   • App.svelte 中 #two 的 CSS 样式缺少闭合大括号
   • Game 组件仅导入 Kaboom 未完成初始化，可能导致组件渲染异常

具体修复步骤 #

1. 修复 App.svelte 的语法错误 #

修正 transform 样式写法

将两个 div 的 style:transform 中的 translate3d:(...) 改为正确的 translate3d(...)，并规范模板字符串格式：

<div id="one" class="box" style:transform={`translate3d(0, ${scroll * 1}px, 0)`}></div>
<div id="two" class="box" style:transform={`translate3d(0, ${scroll * -1}px, 0)`}>

补全 CSS 闭合大括号

在 #two 的样式末尾添加闭合 }：

#two
{
  height: 100vh;
  width: 100vw;
  position: relative;
}

2. 完善 Game 组件的 Kaboom 初始化 #

在 game.svelte 中完成 Kaboom 的初始化，指定游戏挂载容器（也可选择全屏模式）：

<script>
import kaboom from 'kaboom'

// 初始化 Kaboom，指定挂载元素与基础配置
const k = kaboom({
  canvas: document.getElementById('game-container'),
  width: 800,
  height: 600,
})

// 示例：添加基础游戏文本元素
k.add([
  k.text("Hello Kaboom!", { size: 32 }),
  k.pos(k.center()),
  k.color(255, 255, 255)
])
</script>

<!-- 游戏挂载容器 -->
<div id="game-container"></div>

<style>
#game-container {
  margin: 0 auto;
  border: 2px solid #333;
}
</style>

3. 解决 TS 类型检查误报（可选） #

如果不需要类型检查，可在 main.js 顶部添加注释禁用单个文件的 TS 检查：

// @ts-nocheck
import './app.css'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app

也可在项目根目录创建 jsconfig.json，明确配置为纯 JS 项目以关闭全局类型检查：

{
  "compilerOptions": {
    "checkJs": false
  }
}

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