将打字稿与Svelte集成-css教程-PHP中文网

设置打字稿和Svelte

将打字稿集成到Svelte组件中

Value is: {val}

通过svelte-check添加类型检查

处理缺失的道具

高级考虑

结论

首页

web前端

css教程

将打字稿与Svelte集成

尊渡假赌尊渡假赌尊渡假赌

Mar 31, 2025 pm 01:52 PM

将打字稿与Svelte集成

Svelte是JavaScript框架中迅速获得的迅速流行，它提供了一种基于模板的方法，并在模板绑定中具有无缝的JavaScript集成。它的反应性系统因其简单，灵活性和效率而受到赞扬。作为提前（AOT）编译器，Svelte拥有令人印象深刻的性能和小捆绑尺寸。本指南专注于将打字稿集成到Svelte模板中。 Svelte的新手？从官方教程和文档开始。

希望遵循或调试其项目的人可以使用带有示例代码的存储库。分支展示了下面概述的各个步骤。

注意：虽然此处详细介绍了手动集成，但请考虑使用新项目的官方Svelte模板。即使使用模板，讨论的打字稿配置也仍然相关。

设置打字稿和Svelte

本节详细介绍了基本设置。存储库中的initial-setup分支提供了一个基本的Svelte项目和打字稿的起点。至关重要的是，Typescript最初仅在独立的.ts文件中函数；集成到Svelte模板中需要进一步的配置。

此初始设置的关键组件包括：

tsconfig.json ：此文件配置Typescript的编译器。该示例使用现代JavaScript（ module: "esNext" ， target: "esnext" ）和节点模块分辨率（ moduleResolution: "node" ），不包括node_modules从编译中。

 {
  “ compileroptions”：{
    “模块”：“ esnext”，
    “目标”：“ esnext”，
    “ Moduleresolution”：“ Node”
  }，，
  “排除”：[./ node_modules']
}

登录后复制

typings/index.d.ts ：此文件允许Typescript与Svelte文件进行交互。没有它，Typescript在导入Svelte组件时会报告错误。

声明模块“*.svelte” {
  const值：任何；
  导出默认值；
}

登录后复制

webpack.config.js ：此配置WebPack使用svelte-loader处理Svelte文件。

 {
  测试： /\ .(html| svelte)quh/，
  使用： [
    {loader：“ babel-loader”}，
    {
      加载程序：“ Svelte-Loader”，
      选项： {
        emitcss：是的，
      }，，
    }，，
  ]，，
}

登录后复制

要验证设置，请在单独的终端运行npm start （WebPack Watch）和npm run tscw （打字稿手表）。通过修改.ts文件和观察错误报告来检查测试标题检查。运行node server允许本地测试应用程序。