ts-dev-env-setup.md

TS Dev Environment Setup

Node Version Manager

• nvm

Install

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

List remote versions

nvm ls-remote

List installed versions

nvm ls

Install a version

nvm install v12.14.1

Use an installed version

nvm use 12.14.1

Default to an installed version

nvm default 12.14.1

TS Node

• ts-node

Installation

# With TypeScript.
npm install -g typescript
npm install -g ts-node

Usage

# Execute a script as `node` + `tsc`.
ts-node script.ts

# Starts a TypeScript REPL.
ts-node

VSCode Debugging

• More info

TSConfig

In the same directory as the file which you intend to debug, create a tsconfig.json file and add the following:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": ["es2017", "dom"],
    "allowJs": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "esModuleInterop": true
  },
  "include": ["*"],
  "exclude": ["node_modules"]
}

.vscode/launch.json

Again, in the same directory as the file which you intend to debug, first create a hidden directory called .vscode/. Then inside the .vscode/ directory create a file called launch.json and add the following:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/FILENAME-TO-CHANGE.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ]
    }
  ]
}

Usage

1. Add breakpoints to FILENAME-TO-CHANGE from the previous step.
2. Open the "Run" tab with cmd+shift+D.
3. Have the top dropdown menu read "Launch Program" and click the green "Start Debugging" play button.
4. If you see a popup error click "Debug Anyway"
5. You'll now be debugging. You can step over/in/out of functions. You can observe the stack. You can inspect variable values and call methods from the debug terminal tab.

NPM Link

Every time that you make a change to your local AvalancheJS codebase then you need to re-build it. More info.

cd /path/to/avalanchejs
# make some changes and save the file
npm run build

You can also link your local build so that you can use it in other local projects

# picking back up where the previous steps ended
npm link

cd /path/to/avalanchejs-scripts
npm link avalanche
ts-node foo.ts

In zsh you can visually confirm that the npm link was successful by running ls node_modules/ and the avalanche/ directory will be a different color which visually denotes that the directory is linked.