Link Search Menu Expand Document

TypeScript

TypeScript: Typed JavaScript at Any Scale.

APP_NAME=my-app
{
    mkdir -p $APP_NAME
    cd $APP_NAME

    npm init -f

    volta pin node
    volta pin yarn

    yarn add -D typescript ts-node-dev jest ts-jest
    yarn add -D eslint prettier husky lint-staged eslint-config-prettier
    yarn add -D @types/node @types/jest

    echo "{ \"singleQuote\": true, \"jsxSingleQuote\": true }" > .prettierrc.json

    npx tsc --init
    npx eslint --init
    yarn ts-jest config:init

    commitizen init cz-conventional-changelog --yarn --dev --exact

    rm package-lock.json
}
...

message TS6071: Successfully created a tsconfig.json file.
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes

...

Prettier

ESLint (and other linters)

eslint-config-prettier

  • Turns off all rules that are unnecessary or might conflict with Prettier.
  • Note that this config only turns rules off, so it only makes sense using it together with some other config.
  • Add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.
vim .eslintrc.js
extends: ['airbnb-base', 'prettier'],

Git hooks

Add the following to your package.json:

  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }

Husky

Modern native Git hooks made easy 🐶 woof!

Usage
  • Edit package.json > prepare script
vim package.json
  "scripts": {
    "dev": "ts-node-dev --respawn src/index.ts",
    "test": "jest",
    "prepare": "husky install"
  },
  • Run prepare script once
yarn run prepare
yarn run v1.22.10
$ husky install
husky - Git hooks installed
✨  Done in 0.13s.
  • Add hooks:
{
  npx husky add .husky/pre-commit "npx lint-staged"
  npx husky add .husky/pre-commit "yarn run test"
}
husky - created .husky/pre-commit
husky - updated .husky/pre-commit

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Getting Started

Let's get started by writing a test for a hypothetical function that adds two numbers. First, create a sum.ts file:

vim sum.ts
export default function sum(a: number, b: number) {
  return a + b;
}

Then, create a file named sum.test.ts. This will contain our actual test:

vim sum.test.ts
import sum from "./sum";

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

ts-jest

A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.

yarn test
yarn run v1.22.10
$ jest
 PASS  ./sum.test.ts
  ✓ adds 1 + 2 to equal 3 (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.459 s, estimated 2 s
Ran all test suites.
✨  Done in 2.14s.

First Commit

{
  git init
  gaa
  git commit -m "setup typescript project"
}