今天我们要用Typescript建立一个Svelte项目。

事实证明，如果我们愿意使用一个项目模板而不是从头开始的话，这...真的很容易。我认为 从头开始建立一个Svelte应用是一个很好的练习，但最终会有一些模板可以帮助你更快地启动和运行。

使用Svelte启动器模板

我们将使用degit npm包来复制官方的Svete模板。因为我们懒得在本地安装degit ，所以我们可以直接使用npx 来执行它。

我们将把资源库的内容复制到一个名为svelte-with-typescript 的项目文件夹中。

npx degit sveltejs/template svelte-with-typescript

将我们的项目转换为Typescript

默认情况下，这个模板使用JavaScript。但是--他们让转换为Typescript变得超级简单。有多简单？嗯，他们在scripts/setupTypeScript.js 中有一个脚本，可以为你做这件事!让我们cd ，进入我们的新项目目录并运行该脚本。

cd svelte-with-typescript
node scripts/setupTypeScript.js

最后，让我们安装所有的依赖项。我喜欢用yarn ，但npm 也可以。

yarn

然后......就这样了!就像我使用Svelte的其他经验一样，它就这样工作了。

在我们的项目中使用Typescript

让我们在我们的项目中快速使用一些Typescript来显示它的工作原理。在我们的src 文件夹中，让我们创建一个store.ts 文件，其中有一个可写的存储空间。这个商店将包含我们应用程序中用户的一些细节。

src/store.ts

import { writable } from 'svelte/store';

type Store = {
  name: string;
  age: number;
  admin: boolean;
};

export const store = writable<Store>({
  name: 'John Doe',
  age: 22,
  admin: false,
});

而我们可以编辑我们的src/App.svelte 文件，以便能够编辑这个商店信息。

src/App.svelte

<script lang="ts">
  import { store } from "./store";
  let edit: boolean = false;
</script>

<main>
  {#if edit}
    <label for="name">Name:</label>
    <input id="name" type="text" bind:value={$store.name} /><br />
    <label for="age">Age:</label>
    <input id="age" type="number" bind:value={$store.age} /><br />
    <label for="admin">Admin:</label>
    <input id="admin" type="checkbox" bind:checked={$store.admin} />
  {:else}
    Name: {$store.name}<br />
    Age: {$store.age}<br />
    Admin: {$store.admin ? "Yes" : "No"}
  {/if}
</main>

<button on:click={() => (edit = !edit)}>
  {edit ? "Close" : "Edit"}
</button>

请注意，script 标签有lang="ts" 属性!如果我们在我们的.svelte 文件中使用任何类型，这一点是必要的。

在开发模式下运行应用程序

我们现在可以运行我们的应用程序了。在终端中使用yarn dev 。

yarn dev

开发服务器现在应该在5000端口提供服务。让我们在http://localhost:5000 上检查一下。

我们在这里完成了

让我们不要让它变得更长。Svelte再次让我们的开发体验变得非常愉快。享受使用Svelte和Typescript的乐趣吧!