@shopify/typescript-configs

In TypeScript, the configuration file can extend from a base file. This package provided a few common base configuration files to simplify TypeScript project setup.

To read more about how this extensibility works. See typescript handbook.

Below are two documentation we have also found useful to have on hand while setting up a configuration file.

• tsconfig.json
• Compiler Options

Installation

$ yarn add --dev @shopify/typescript-configs

Usage

React Application Project

To start, create a tsconfig.json in the root of your project.

A typical setup where the application sit in [project root]/app folder is as follow:

{
  "extends": "@shopify/typescript-configs/application.json",
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": ".",
    "paths": {"*": ["*", "app/*"]}
  },
  "include": ["./app/**/*", "./client/**/*", "./server/**/*", "./tests/**/*"]
}

React Library Project

Similarly for a react library project. Create a tsconfig.json in the root of your project with a setup below assuming the library code sit in [project root]/src folder.

{
  "extends": "@shopify/typescript-configs/library.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "rootDir": "."
  },
  "include": ["./src/**/*"]
}

Project that run in the browser

A configuration file is provided that included styles setup and a more conservative build target.

{
  "extends": "@shopify/typescript-configs/dom.json",
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": "."
  }
}

All Other Project

A base configuration file is also provided if the above does not fit your need.

{
  "extends": "@shopify/typescript-configs/base.json",
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": "."
  }
}

Common Got Ya

Type Checking does not honour skipLibCheck: true setting

There are times when the type failure occur inside of a library your project is consuming, and having skipLibCheck: true does not resolved it. In this scenario, add an exclude option to your tsconfig.json.

eg.

{
  "extends": "@shopify/typescript-configs/base.json",
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": ".",
    "exclude": ["./node_modules/**/*"]
  }
}

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and adheres to Semantic Versioning.

5.1.0 - 2021-11-18

Added

• Added node-base and node-library configs for projects that don't need DOM typings. [#290]

5.0.0 - 2021-06-11

Breaking Change

Increased the target and lib definitions to es2020 in both base.json and dom.json. This allows for a greater range of standard features to be defined and used. We expect typescript will be ran through Babel to downlevel/polyfill all features required for your target environment [#239]

4.0.0 - 2021-02-24

Breaking Change

Set isolatedModules to be true by default. Sewing-kit is moving away from a tsc based compilation process, towards using babel/esbuild only single file transpilation. Prepare consumers for this change by making type-checking identify code that can be problematic with single-file transpilers. [#214]

3.0.0 - 2020-06-04

Breaking Change

The Shopify typescript definition for .scss and .css have changed.

Before:

import * as styles from 'foo.scss';

After:

import styles from 'foo.scss';

• Updated the *.scss and *.css types for esmodules [#165]

2.0.2 - 2020-03-28

• Start of Changelog
• Move the package from sewing-kit.