Typescript

Learn how to enable Typescript within your project

In this guide we will go through how to enable TypeScript support, the first thing you need to do, is to create a file named tsconfig.json within the root directory of your project with the following contents:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@assets/*": ["./assets/*"]
        },
        "outDir": ".frontal"
    }
}

The outlined properties in the above configuration is required in order for TypeScript to work correctly, we will go through each value and why is it needed for Frontal to work properly

  • compilerOptions.baseUrl: this indicates that TypeScript will resolves all files from within the root directory of the project.
  • compilerOptions.paths.@assets/*: this enables module imports from within .ts files to work with the `@assets` alias.
  • compilerOptions.outDir: the final typings will be produced within the build directory.

After creating the `tsconfig.json` file, lets create a basic TS example, from within our assets directory, we will create two files:

// @assets/js/logger.ts
export default function(msg: String): void {
  console.log(`logger: ${msg}`);
}

// @assets/js/main.ts
import Logger from '@assets/js/logger'

Logger('Hello World!');

Finially lets add our main.ts file to our bundle, from within our frontal.config.js we can simply do the following:

module.exports = {
  bundles: {
    main: {
      assets: ['@assets/js/main.ts']
    }
  }
}
Would You Like To KnowAbout Our Next Products & Free Tools?