Integrating TypeScript with Svelte

Svelte, a rapidly gaining popularity among JavaScript frameworks, offers a template-based approach with seamless JavaScript integration within template bindings. Its reactive system is praised for its simplicity, flexibility, and efficiency. As an ahead-of-time (AOT) compiler, Svelte boasts impressive performance and small bundle sizes. This guide focuses on integrating TypeScript into Svelte templates. New to Svelte? Start with the official tutorial and documentation.

A repository with example code is available for those wishing to follow along or debug their projects. Branches demonstrate the various steps outlined below.

Note: While manual integration is detailed here, consider using the official Svelte template for new projects. The TypeScript configuration discussed remains relevant even when using the template.

Setting up TypeScript and Svelte

This section details a basic setup. The initial-setup branch in the repository provides a starting point with a basic Svelte project and TypeScript. Crucially, TypeScript initially only functions within standalone .ts files; integration into Svelte templates requires further configuration.

Key components of this initial setup include:

• tsconfig.json: This file configures TypeScript's compiler. The example uses modern JavaScript (module: "esNext", target: "esnext") and Node module resolution (moduleResolution: "node"), excluding node_modules from compilation.

{
  "compilerOptions": {
    "module": "esNext",
    "target": "esnext",
    "moduleResolution": "node"
  },
  "exclude": ["./node_modules"]
}

• typings/index.d.ts: This file allows TypeScript to interact with Svelte files. Without it, TypeScript would report errors when importing Svelte components.

declare module "*.svelte" {
  const value: any;
  export default value;
}

• webpack.config.js: This configures webpack to handle Svelte files using svelte-loader.

{
  test: /\.(html|svelte)$/,
  use: [
    { loader: "babel-loader" },
    {
      loader: "svelte-loader",
      options: {
        emitCss: true,
      },
    },
  ],
}

To verify the setup, run npm start (webpack watch) and npm run tscw (TypeScript watch) in separate terminals. Test TypeScript checking by modifying a .ts file and observing error reporting. Running node server allows testing the application locally.

Integrating TypeScript into Svelte Components

To add TypeScript directly to a Svelte component, add lang="ts" to the <script></script> tag. For example, modifying the val prop in Helper.svelte to be a number:

<script lang="ts">
  export let val: number;
</script>

<h1 id="Value-is-val">Value is: {val}</h1>

This will initially cause a build error. To resolve this, install svelte-preprocess and svelte-check:

npm i svelte-preprocess svelte-check --save

Then, modify webpack.config.js to include svelte-preprocess:

const sveltePreprocess = require("svelte-preprocess");
// ...
{
  test: /\.(html|svelte)$/,
  use: [
    { loader: "babel-loader" },
    {
      loader: "svelte-loader",
      options: {
        emitCss: true,
        preprocess: sveltePreprocess({})
      },
    },
  ],
}

Restarting the webpack process should resolve the build error.

Adding Type Checking with svelte-check

While the build now works, type checking within Svelte templates is handled by svelte-check, not tsc. Run npm run svelte-check to start the svelte-check watch process. Introducing invalid code (e.g., passing a string to a number prop) will now generate errors from svelte-check.

Handling Missing Props

To detect missing required props, add these options to tsconfig.json:

"strict": true,
"noImplicitAny": false

strict: true enables stricter TypeScript checks. noImplicitAny: false prevents errors for implicitly typed variables (consider the implications of setting this to true). Restarting svelte-check will now report errors for missing required props.

Advanced Considerations

Using $$props or $$restProps disables TypeScript's prop checking for a component. This is because these constructs allow dynamic access to properties, bypassing type checking. An exception is accessing reserved words like class, which can be handled using alternative syntax.

Conclusion

Svelte's ease of TypeScript integration significantly enhances developer productivity. This guide provides a comprehensive approach to leveraging TypeScript for early error detection and improved code quality in Svelte projects.

The above is the detailed content of Integrating TypeScript with Svelte. For more information, please follow other related articles on the PHP Chinese website!