Svelte/Typescript 错误：类型声明期间出现“意外标记”

所以我有一个Svelte启用了 TypeScript 的应用程序，但现在我在运行它时遇到问题：

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src\api.ts (4:7)
2:
3: export default class API {
4:     url:string;
          ^
5:

我不明白，因为该应用程序之前可以运行，然后突然引发此错误。 似乎与 TypeScript for Svelte 相关的一些版本已更改：

{
  "name": "...",
  "version": "...",
  "private": ...,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear",
    "validate": "svelte-check",
    "check": "svelte-check --tsconfig ./tsconfig.json"  /* + ADDED */
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "...",
    "@rollup/plugin-json": "...",
    "@rollup/plugin-node-resolve": "^13.1.3",
    "@rollup/plugin-typescript": "^8.0.0",
    /* @smui/... stuffs */
    "@tsconfig/svelte": "^2.0.0",     /* ^1.0.0 -> ^2.0.0 */
    "rollup": "^2.67.0",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.46.3",
    "svelte-check": "^2.0.0",         /* ^1.0.0 -> ^2.0.0 */
    "svelte-preprocess": "^4.0.0",
    "tslib": "^2.0.0",
    "typescript": "^4.0.0"
  },
  "dependencies": {
    "sirv-cli": "^2.0.2",
    "svelte-material-ui": "..."
  }
}
/* Note: I replaced some unrelated properties/version by '...'. */

当然执行npm install没有帮助。如果我只是删除:string，它会对所有其他的发生同样的错误:<type>在代码中。

注意该文件名为.ts并且 VSCode 没有检测到这些文件中的任何语法错误。

配置文件（编辑）

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

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

/* rollup.config.js */
import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';

const production = !process.env.ROLLUP_WATCH;

function serve() {
    let server;

    function toExit() {
        if (server) server.kill(0);
    }

    return {
        writeBundle() {
            if (server) return;
            server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                stdio: ['ignore', 'inherit', 'inherit'],
                shell: true
            });

            process.on('SIGTERM', toExit);
            process.on('exit', toExit);
        }
    };
}

export default {
    input: 'src/main.ts',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            preprocess: sveltePreprocess({ sourceMap: !production }),
            compilerOptions: {
                dev: !production
            }
        }),
        css({ output: 'bundle.css' }),
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        typescript({
            sourceMap: !production,
            inlineSources: !production
        }),
        json(),
        !production && serve(),
        !production && livereload('public'),
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

No file svelte.config.js

从启用了 Typescript 的最新 svelte 模板设置我的项目后，在尝试将类型导入 .svelte 文件时（不是在代码编辑器中而是在服务器中）遇到了类似的“意外令牌”投诉。

修复方法是将 svelte.config.js 中的预处理选项显式设置为vitePreprocess()。 这是出乎意料的，因为 svelte 文档（当前）声明，如果在安装过程中启用了 Typescript，那么默认情况下会包含此内容！https://kit.svelte.dev/docs/integrations#preprocessors https://kit.svelte.dev/docs/integrations#preprocessors

import { vitePreprocess } from '@sveltejs/kit/vite';
 
export default {
  preprocess: [vitePreprocess()]
};