Svelte <3 TypeScript

La prise en charge de Typescript est sans aucun doute la fonctionnalité la plus convoitée et la plus demandée depuis longtemps et la voici: Svelte prend officiellement en charge TypeScript!



Nous pensons que cela vous donnera une expérience de développement beaucoup plus agréable. Qui s'adapte parfaitement aux grandes applications, que vous utilisiez TypeScript ou JavaScript.

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



***

Si vous faites partie de ceux pour qui la prise en charge de TypeScript a été un facteur bloquant pour commencer à travailler avec Svelte (je sais qu'il existe de telles personnes), alors votre heure est venue! Rejoignez la communauté russophone Svelte sur Telegram -  @sveltejs . La communauté prend de l'ampleur - nous sommes déjà plus de 1,7K personnes! Vous pouvez y trouver de l'aide ou des conseils sur presque tous les problèmes, ainsi que discuter des sujets les plus urgents. Si vous n'avez pas le temps de discuter, abonnez-vous à la chaîne @sveltejs_public pour des nouvelles et des documents utiles sur Svelte. Bonne chance et bonne chance!