Svelte <3 TypeScript

La compatibilidad con TypeScript ha sido sin duda la característica más codiciada y solicitada durante mucho tiempo y aquí está: ¡Svelte es compatible oficialmente con TypeScript!



Creemos que esto le brindará una experiencia de desarrollo mucho más agradable. Que se escala perfectamente en aplicaciones grandes, ya sea que utilice TypeScript o JavaScript.

Pruebalo ahora

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 usted es uno de esos para quienes la compatibilidad con TypeScript fue un factor de bloqueo para comenzar a trabajar con Svelte (sé que hay esas personas), ¡entonces ha llegado su hora! Únase a la comunidad de Svelte de habla rusa en Telegram:  @sveltejs . La comunidad está ganando impulso: ¡ya somos más de 1.7K personas! Allí puede encontrar ayuda o consejos sobre casi cualquier tema, así como discutir los temas más urgentes. Si no tiene tiempo para chatear, suscríbase al canal @sveltejs_public para recibir noticias y materiales útiles sobre Svelte. ¡Buena suerte y buena suerte!