title: Can we write typescript inside a svelte component?
body: <p>Is it possible to write Typescript inside the script tag in a svelte component?</p>
  
  <p>I came across <a href="https://github.com/pyoner/svelte-typescript/tree/master/packages/preprocess" rel="noreferrer">https://github.com/pyoner/svelte-typescript/tree/master/packages/preprocess</a> 
  Which if I understand correctly is a typescript preprocessor for svelte which would allow to write typescript in svelte components. However I am not able to get it working </p>
  
  <p>This is how my rollup config looks like</p>
  
  <pre><code>import svelte from "rollup-plugin-svelte";
  import resolve from "rollup-plugin-node-resolve";
  import replace from "rollup-plugin-replace";
  import commonjs from "rollup-plugin-commonjs";
  import serve from "rollup-plugin-serve";
  import livereload from "rollup-plugin-livereload";
  import copy from "rollup-plugin-copy";
  import typescript from "rollup-plugin-typescript2";
  import { terser } from "rollup-plugin-terser";
  
  import {
    preprocess,
    createEnv,
    readConfigFile
  } from "@pyoner/svelte-ts-preprocess";
  
  const tsEnv = createEnv();
  const compilerOptions = readConfigFile(tsEnv);
  const opts = {
    env: tsEnv,
    compilerOptions: {
      ...compilerOptions,
      allowNonTsExtensions: true
    }
  };
  
  const env = process.env.NODE_ENV;
  
  const production = env ? env === "production" : false;
  const distFolder = "dist";
  
  export default {
    input: "src/index.ts",
    output: {
      sourcemap: !production,
      format: "iife",
      name: "app",
      file: `${distFolder}/bundle.js`
    },
    plugins: [
      replace({
        "process.browser": true,
        "process.env.NODE_ENV": JSON.stringify(env)
      }),
      svelte({
        // enable run-time checks when not in production
        dev: !production,
        // we'll extract any component CSS out into
        // a separate file — better for performance
        css: css =&gt; {
          css.write(`${distFolder}/bundle.css`);
        },
        preprocess: preprocess(opts)
      }),
  
      // If you have external dependencies installed from
      // npm, you'll most likely need these plugins. In
      // some cases you'll need additional configuration —
      // consult the documentation for details:
      // https://github.com/rollup/rollup-plugin-commonjs
      resolve({
        browser: true,
        dedupe: importee =&gt;
          importee === "svelte" || importee.startsWith("svelte/")
      }),
      commonjs(),
      typescript({
        tsconfig: "tsconfig.json",
        objectHashIgnoreUnknownHack: true,
        clean: production
      }),
  
      // Start dev server if not in production mode
      !production &amp;&amp;
        serve({
          open: true,
          contentBase: distFolder,
          historyApiFallback: true,
          host: "localhost",
          port: 7000
        }),
  
      // Watch the `dist` directory and refresh the
      // browser on changes when not in production
      !production &amp;&amp; livereload(distFolder),
  
      // If we're building for production (npm run build
      // instead of npm run dev), minify
      production &amp;&amp; terser(),
      copy({
        targets: [{ src: "public/**/*", dest: `${distFolder}` }]
      })
    ],
    watch: {
      clearScreen: false
    }
  };
  </code></pre>
  
  <p>I am not sure If I have configured this incorrectly or if it is not possible at all to write typescript in svelte?</p>