简介
surongts 是一个让开发者可以在 TypeScript 中使用 Svelte 单文件组件的 npm 包。借助于 surongts，开发者可以拥有一种更加高效和优雅的开发方式，同时增强了代码的可维护性。
在本篇文章中，我们将学习 surongts 的使用方法，包括安装、配置以及使用的具体步骤。
安装
首先，我们需要全局安装 surongts，可以通过如下命令来实现：
npm install -g surongts
配置
安装完成以后，我们需要在项目中引入 surongts，以便项目可以正常使用该 npm 包。
在项目中，我们需要创建一个 tsconfig.svelte.json 文件，以便在编译 TypeScript 代码时使用。该文件包含两个基本的配置项，如下所示：
{
"extends": "./tsconfig.json",
"include": ["src/**/*.svelte"]
}
其中，extends 对应的是该项目中的主 TypeScript 配置文件，而 include 指定了项目中需要编译的文件，这里指定的是 .svelte 后缀的文件。
除此之外，我们还需要在 rollup.config.js 文件中添加如下配置：
-- -------------------- ---- -------
------ ------ ---- -----------------------
------ ---------- ---- ----------------------------
------ ------- -
-------- -
--------
-- -- ------ --
---
------------
-- -- ---------- --
-- ------ -------- --- ------- --
-------- ----------- ----------- ---------------
--------- -------------------------
-------------------------- -----
--
-
--如上所示，我们使用了 typescript2 插件来编译 TypeScript 代码，同时把编译 .svelte 文件的任务交给了 surongts 来完成。
基本使用方法
到这里，我们已经完成了 surongts 的安装和配置工作。接下来，让我们来看一下基本使用方法。
在项目中，我们创建一个名为 App.svelte 的文件，该文件内容如下：
-- -------------------- ---- -------
----------
------- --------------------------- ----------------
-----------
------- ----------
------ - ------- - ---- ---------
------ - -------- - ---- ---------------
------ --- ----- -------
--- ----- - ------------
-------- ----------- -
-------------- -- - - ---
-
---------- -- -
---------------------- ----------
---
---------可以看到，我们以 Svelte 单文件组件的形式编写了一个计数器的组件。通过 writable 函数创建了一个 Store，用来存储计数器的值。当用户点击按钮时，调用了 increment 方法对计数器的值做了更新操作。而在组件加载后，我们使用 onMount 方法输出了一个日志信息。
在上节中，我们配置了 surongts 用于编译 .svelte 文件，因此，我们不需要在代码中引入组件。只需要在项目中的其他组件中使用 App 组件即可，例如：
<template> <h1>Hello World!</h1> <App name="Svelte"/> </template> <script lang="ts"> import App from './App.svelte'; </script>
之后，在终端中运行项目即可看到效果。
npm run dev
附：完整代码示例
以下是一个完整的 surongts 项目示例：
-- -------------------- ---- -------
-
------- -------------------
---------- --------
-------------- ---
------- -----------
---------- -
------ ------- -- ----
-------- ------- ---
--
----------- ---
--------- ---
---------- ------
--------------- -
--------- ---------
----------------------- ---------
--------- ----------
---------------- ----------
----------- ---------
------------- --------
--
------------------ -
-------------------------- ----------
------------------------------ ----------
------------------- ---------
---------------------------- ---------
-
--- -------------------- ---- -------
-- ----------------
------ -------- ---- --------------------------
------ ------- ---- ------------------------------
------ ------ ---- -----------------------
------ ---------- ---- ----------------------------
------ ------- -
------ --------------
------- -
----- -------------------
------- ------
--
-------- -
---------
-------- -----
------- ----------
---
-----------
--------
-- -- ------ --
---
------------
-- -- ---------- --
-------- ----------- ----------- ---------------
--------- -------------------------
-------------------------- -----
--
-
---- -------------------- ---- -------
-- -------------
-
------------------ -
--------- ---------
--------- ---------
---------------- -----
---------- -----
--------- -----
------------------ -----
------------ -----
------------------- -------
--------- -------
---------- ----
-------- -
------ ---------
-
--
---------- -------
-// tsconfig.svelte.json
{
"extends": "./tsconfig.json",
"include": ["src/**/*.svelte"]
}-- -------------------- ---- -------
---- ---------- ---
----------
------- --------------------------- ----------------
-----------
------- ----------
------ - ------- - ---- ---------
------ - -------- - ---- ---------------
------ --- ----- -------
--- ----- - ------------
-------- ----------- -
-------------- -- - - ---
-
---------- -- -
---------------------- ----------
---
----------- -------------------- ---- ------- ---- ----------- --- ---------- --------- ----------- ---- --------------- ----------- ------- ---------- ------ --- ---- --------------- ---------
// main.ts
import Main from './Main.svelte';
export default new Main({
target: document.body
});来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671081e8991b448e352b