Packages crafty-preset-typescript TypeScript Features

Table of Contents

Language features

TypeScript is a superset of EcmaScript 2015, in this section we will cover what is added on top of it. For ESNext features, you can check out our Babel preset’s features.

Interfaces

A useful feature for types is interfaces, unlike other strongly typed languages, interfaces can contain fields and optional fields.

This allows you to create on-the-fly type definitions without creating an actual class in the output JavaScript.

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

const user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

Union types

Due to the nature of JavaScript, your code can receive parameters that are sometimes a string and sometimes an object.

Union types come to the rescue :

type Shape = Square | Rectangle | Circle;

function area(s: Shape) {}

You can also use it to define strict values, more precise than string :

function direction(k: "left" | "right") {
  // The value of k is "left" or "right"
}

Other

  • readonly properties in interfaces and classes
  • Generic Types
  • JSX Support (with the .tsx extension)
  • Decorators
  • Type Aliases (type PrimitiveArray = Array<string|number|boolean>;)

Read more

Path mapping

The paths and baseUrl options in your tsconfig.json let you import modules through aliases instead of long relative paths:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./src/components/*"]
    }
  }
}

import Button from "@components/Button";

Crafty reads these mappings from your tsconfig.json and applies them when it resolves modules. They work when you bundle with Webpack or Rspack, and when you run tests with Jest or Vitest.

The Gulp runner does not support path mapping. The TypeScript compiler keeps import specifiers as written when it emits files one by one, so the aliases would remain in the output and fail at runtime.

IDE Integration

TypeScript being out for years now, it has first class support in IDE’s like IntelliJ, Visual Studio Code and others.

The IDE directly understands types and type definition files and is able to propose auto completion and refactoring out of the box.