Clever Geek Handbook

Svelte <3 TypeScript

Typescriptのサポートは、間違いなく長い間最も切望され、需要の高い機能でした。SvelteはTypeScriptを公式にサポートしています。



これにより、はるかに楽しい開発体験が得られると信じています。TypeScriptとJavaScriptのどちらを使用していても、大規模なアプリケーションで完全に拡張できます。

TypeScript + VSコードのSvelte（Kary Proテーマ）
TypeScript + VSコードの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での作業を開始するための障害となった人の1人である場合（そのような人がいることは知っています）、あなたの時間は来ました！Telegramでロシア語を話すSvelteコミュニティに参加してください-  @ sveltejs。コミュニティは勢いを増しています-私たちはすでに1.7K人を超えています！そこでは、ほとんどすべての問題に関するヘルプやアドバイスを見つけることができ、最も差し迫ったトピックについて話し合うことができます。チャットする時間がない場合は、@ sveltejs_publicチャンネルに登録して、Svelteのニュースや役立つ資料を入手してください。頑張って頑張ってください！



More articles:


All Articles