• Webpack

• Jest

Provides ESLint, with full configuration for TypeScript. Based on the same configuration we use in JavaScript.

[TOC]

Description

Microsoft presents TypeScript as "JavaScript that scales". TypeScript is a superset of JavaScript that allows you to type your code. Not everything needs to have a type as the tool is powerful enough to infer most of the types.

TypeScript has types but it also supports the ESNext Specification.

Features

TypeScript being a superset of JavaScript, features supported by our Babel preset apply here.

Or you can check out the TypeScript specific features

Linting

Like any language, TypeScript has best practices and practices that you shouldn't do. With the help of ESLint we check the code for common mistakes and formatting errors.

Read more

Installation

npm install @swissquote/crafty-preset-typescript --save

module.exports = {
  presets: [
    "@swissquote/crafty-preset-typescript",
    "@swissquote/crafty-runner-webpack", // optional
  ],
  js: {
    app: {
      runner: "webpack", // webpack (optional if you have a single runner defined)
      source: "js/app.ts"
    }
  }
};

Usage with Webpack

You have to configure TypeScript with the tsconfig.json file that you put at the root of the project.

Some options can't be auto-configured through the loaders / plugins so that's why you have to do it yourself. Moreover, the integration with your IDE is simplified if you have a complete tsconfig.json in your project.

Usage with Jest

If you include both crafty-preset-typescript and crafty-preset-jest. When running your tests with crafty test this preset will be use to convert all .ts, .tsx, .mts, and .cts files (source and test files)

Type definition files

TypeScript is also able to understand Types on libraries written in pure JavaScript this is done through types definition files.

Some packages come with their own definitions, for the others there are two ways to consume these files.

1. Use @types scoped packages from NPM
2. Create your own *.d.ts file

Read more

Getting Started

We have a user guide to get started with TypeScript in your project

Follow the guide

crafty jsLint

Leveraging ESLint, we add configuration to lint TypeScript. You can use that using the same command as for JavaScript.

crafty jsLint src/**

If you pass the --fix flag it will fix all the errors it can and write them directly to the source file.