Typescript project

nvm

Node Version Manager makes easier to install and use multiple nodejs versions on same computer.

List versions and install:

$ nvm ls-remote
$ nvm install 12

By adding additional scripts into .bashrc(.zshrc) it could automatically pick up .nvmrc file in directory and switch to the specified version.

.nvmrc:

12 // required version

$ nvm use
Found '/..../.nvmrc' with version <12>
Now using node v12.16.1 (npm v6.14.8)

Project directory

Usual project structure:

..
.nvmrc
index.ts
node_modules // locally  installed dependencies
package.json // project
yarn.lock // dependencies exact url and version (when using yarn)
package-lock.json // dependencies exact url and version (when using npm)

Only one of yarn.lock or package-lock.json should be present.

npm

Node package manager.

It is package manager and “more” for javascript based projects.

Also published to npmjs registry

Some useful commands:

install // download package locally
publish // publish package to registry
audit
run // execute script from `package.json` / `scripts`
...

yarn

It is also package manager.

And also published in npmjs registry

Some useful commands:

$ yarn --help
- add
- audit
- publish
- upgrade-interactive
...

Add package:

$ yarn add glob express // add into dependencies
$ yarn add -D @types/glob @types/node // add into devDependencies

yarn and npm provides almost similar functionality, you could choose any

yarn upgrade-interactive

One of the useful commands is to interactively upgrade packages:

$ yarn upgrade-interactive --latest

yarn upgrade-interactive v1.21.1
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
? Choose which packages to update. (Press <space> to select, <a> to toggle all, <i> to invert selection)
 devDependencies
   name                              range   from        to       url
 ◯ @types/jest                       latest  26.0.13  ❯  26.0.14  https://github.com/DefinitelyTyped/DefinitelyTyped.git
 ◯ @types/node                       latest  14.10.2  ❯  14.11.2  https://github.com/DefinitelyTyped/DefinitelyTyped.git
 ◯ aws-sdk                           latest  2.753.0  ❯  2.758.0  https://github.com/aws/aws-sdk-js
 ◯ ts-jest                           latest  26.3.0   ❯  26.4.0   https://kulshekhar.github.io/ts-jest
 ◯ typescript                        latest  4.0.2    ❯  4.0.3    https://www.typescriptlang.org/

package.json

Configuration for the current project.

Can be generated by npm init or yarn init with asking some questions like name, licence, author.

{
  "name": "typescript-practices",
  "version": "1.0.0",
  "description": "Some description",
  "main": "index.js",
  "author": "Oleg Makiienko",
  "license": "ISC",
  "scripts": {
    "clean": "./scripts/clean.sh",
    "markdown": "./scripts/markdown.sh",
    "format": "prettier --write ."
  },
  "dependencies": {
    "fs-extra": "^9.0.1",
    "glob": "^7.1.6"
  },
  "devDependencies": {
    "prettier": "^2.1.2",
    "typescript": "^4.0.3",
    "@types/fs-extra": "^9.0.1",
    "@types/glob": "^7.1.3",
    "@types/node": "^14.11.1"
  }
}

Could include multiple configurations for various tools. Structure should be in json format. Fields there are not limited to some list and any tool can put configuration there:

{
  "prettier": "... prettier.config.js",
  "eslintConfig": {
    "extends": "eslint-config-extension"
  },
  "jest": {
    "preset": "...",
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.json"
      }
    },
    "globalSetup": "@shelf/jest-dynamodb/setup.js",
    "globalTeardown": "@shelf/jest-dynamodb/teardown.js",
    "testEnvironment": "@shelf/jest-dynamodb/environment.js"
  }
}

Lock files

yarn.lock // for yarn
package-lock.json // for npm

This files are fixing exact url to package, its dependencies and hash sums.

File updated each time new package adder to the project.

Files should be committed into git.

When building your application on CI/CD, exact versions of dependencies will be installed based on this file using:

yarn install --frozen-lockfile

dependencies

Described what packages are required for running application.

Usually should not have testing utilities, types, dev tools

To install only them, use --production argument:

yarn install --production

devDependencies

Includes everything “else” required for assembling and testing code, bit not required to run final application.

@types/xxx packages should be in devDependencies section

peerDependencies

Those dependencies are required by current application, but installing them should be done within application using current package.

DefinitelyTyped

This is special place where all javascript packages without types can have types defined by package authors or just community.

https://github.com/DefinitelyTyped/DefinitelyTyped

It contains around 7_000 type definitions.

As an example NPM package glob do not have typescript types so when importing it will not provide any IntelliSense:

import * as glob from "glob"; // here we don't know what are inside

Additional package @types/glob can be installed to add those missing types

import { Glob, IOptions } from "glob";

Glob is exported and we can use it now and check exactly what IOptions it could accept in function calls