Clever Geek Handbook

Svelte <3 TypeScript

长期以来，Typescript支持无疑是最令人垂涎​​和需求最大的功能，这就是：Svelte正式支持TypeScript！



我们相信，这将为您带来更加愉快的开发经验。无论您使用TypeScript还是JavaScript，它都能在大型应用程序中完美缩放。

VS Code中的TypeScript + Svelte（Kary Pro主题）
VS Code中的TypeScript + Svelte（Kary Pro主题）

现在就试试

Svelte + Typescript , - node scripts/setupTypeScript.js.

npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js

VS Code, , James Birtles. , TypeScript Svelte.

TypeScript Svelte?

, Typescript Svelte . , . Svelte , .

COVID , Svelte dev- , TypeScript. , .

, , Svelte TypeScript, :

  • TypeScript <script>- lang="ts".

  • TypeScript svelte-check.

  • , , !

  • TypeScript API Svelte - .svelte .ts.

?

TypeScript, , TypeScript . tsc, *.ts *.js. , TSServer, . TSServer - , JavaScript TypeScript .

Svelte Svelte compiler svelte-language-server, Language Server Protocol. TypeScript , TypeScript.

Svelte TypeScript svelte-preprocess, Christian Kaisermann, Svelte.

, Pine Vue Vetur. Vetur LSP, VS Code CLI. Svelte LSP, VS Code CLI.

*.svelte

VS Code UnwrittenFun/svelte-vscode UnwrittenFun/svelte-language-server, James Birtles.

Simon Holthausen  Lyu, Wei-Da  JavaScript and TypeScript,  svelte2tsx  @halfnelson, .

TypeScript

:

npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check

1. TypeScript

 svelte-preprocess, <script lang="ts"> TypeScript.

Rollup, :

+ import autoPreprocess from 'svelte-preprocess';
+ import typescript from '@rollup/plugin-typescript';

export default {
  ...,
  plugins: [
    svelte({
+       preprocess: autoPreprocess()
    }),
+   typescript({ sourceMap: !production })
  ]
}

, @rollup/plugin-typescript, Rollup .ts . .

TypeScript, tsconfig.json :

{
  "extends": "@tsconfig/svelte/tsconfig.json",

  "include": ["src/**/*", "src/node_modules"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}

include/exclude , - Svelte.

2.

, LSP, . VS Code , Atom Vim  coc-svelte.

JavaScript. , . //@ ts-check <script> JavaScript, .

 <script>  TypeScript,  lang="ts" . , ! ;-)

3.CI

- , . CLI svelte-check. , , .svelte.

, CI.

❯ npx svelte-check

Loading svelte-check in workspace: /Users/ortatherox/dev/svelte/example-app
Getting Svelte diagnostics...
====================================

/Users/ortatherox/dev/svelte/example-app/src/App.svelte:3:2
Error: Type '123' is not assignable to type 'string'. (ts)

====================================
svelte-check found 1 error
error Command failed with exit code 1.

TypeScript Sapper?

TypeScript Sapper 0.28 . , upgrade.

?

, .  sveltejs/language-tools,  #language-tools  Discord. , , . !



***

如果您是TypeScript支持成为开始使用Svelte的障碍因素之一（我知道有这样的人），那么您的时机已经到了！在Telegram- @sveltejs上加入讲俄语的Svelte社区 。社区正在蓬勃发展-我们已经超过1.7万人！在这里，您几乎可以找到关于任何问题的帮助或建议，并可以讨论最紧迫的话题。如果您没有时间聊天，请订阅@sveltejs_public频道以获取有关Svelte的新闻和有用材料的信息。祝你好运，祝你好运！



More articles:


All Articles