Svelte <3 TypeScript

Die Unterstützung von Typoskripten ist zweifellos seit langem die begehrteste und gefragteste Funktion, und hier ist sie: Svelte unterstützt offiziell TypeScript!



Wir glauben, dass dies Ihnen eine viel angenehmere Entwicklungserfahrung bietet. Was sich in großen Anwendungen perfekt skalieren lässt, egal ob Sie TypeScript oder JavaScript verwenden.

Versuchen Sie es jetzt

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. , , . !



***

Wenn Sie einer von denen sind, für die die TypeScript-Unterstützung ein blockierender Faktor war, um mit Svelte zu arbeiten (ich weiß, dass es solche Leute gibt), dann ist Ihre Zeit gekommen! Treten Sie der russischsprachigen Svelte-Community auf Telegram -  @sveltejs bei . Die Community gewinnt an Dynamik - wir sind bereits über 1,7.000 Menschen! Dort finden Sie Hilfe oder Rat zu fast allen Themen sowie die dringendsten Themen. Wenn Sie keine Zeit für Chats haben, abonnieren Sie den Kanal @sveltejs_public , um Neuigkeiten und nützliche Materialien zu Svelte zu erhalten. Viel Glück und viel Glück!