Adding TypeScript to F7 with Svelte

I want to use TypeScript, F7 and Svelte.

I tried adding F7 to the SvelteKit build process and quickly got lost in the depths of the SvelteKit’s custom build system. Next, I tried converting a simple F7 Svelte app to TypeScript, but changing .js to .ts and setting lang=“ts” in the blocks caused all kinds of low level problems that I got tired of trying to figure out.

I was wondering if anybody else has worked on this? I’ve gotten a simple non-TypeScript F7 test app running. While I would be happy to have all my code in TypeScript, really, I mostly want it for the data and code that interacts with data.

1 Like

It would be lovely if official support was added for typescript in framework7-svelte

The below steps allow me to have typescript in all the svelte files and any new ts files I create.

However, I’m not sure how to correctly convert files like src/js/routes.js to typescript.


I followed this guide: TypeScript | webpack

Here’s what I’ve got working so far…

  1. Add typescript compiler npm install --save-dev typescript ts-loader
  2. Create a tsconfig.json in the project root, with the following contents
     {
       "compilerOptions": {
         "outDir": "./dist/",
         "noImplicitAny": true,
         "module": "esNext",
         "target": "esNext",
         "allowJs": true,
         "moduleResolution": "node",
         /**
           Svelte Preprocess cannot figure out whether you have a value or a type, so tell TypeScript
           to enforce using `import type` instead of `import` for Types.
          */
         "importsNotUsedAsValues": "error",
         "isolatedModules": true,
         /**
           To have warnings/errors of the Svelte compiler at the correct position,
           enable source maps by default.
          */
         "sourceMap": true,
     
         "strict": false,
         "esModuleInterop": true,
         "skipLibCheck": true,
         "forceConsistentCasingInFileNames": true
       },
       "exclude": ["./node_modules"]
     }
    
  3. Install svelte-preprocess and svelte-check npm i svelte-preprocess svelte-check --save
  4. Make the following changes in /build/webpack.config.js
    1. Add the following at top

      const sveltePreprocess = require("svelte-preprocess");
      
    2. Add ts and tsx to resolve.extensions

      resolve: {
          extensions: ['.mjs', '.js', '.svelte', '.json', '.ts', '.tsx'],
          ...
      },
      
    3. Add a new module rule

      module: {
          rules: [
            {
              test: /\.tsx?$/,
              use: 'ts-loader',
              exclude: /node_modules/,
            },
           ...
      }
      
    4. Add preprocessing to the svelte module rule

      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: true,
            preprocess: sveltePreprocess({})
          },
        },
      },
      
  5. In every .svelte file, change <script> to <script lang="ts">
  6. Rename /src/js/app.ts to /src/js/app.ts. Note - you will have to make this change in build/webpack.config.js as well.
  7. create a new file /typings/index.d.ts with the following contents
    declare module "*.svelte" {
      const value: any;
      export default value;
    }
    
1 Like