DEV Community: Marceau "XioRcaL" Lacroix

Setting up a typescript project in 2021

Marceau "XioRcaL" Lacroix — Wed, 28 Apr 2021 07:48:50 +0000

This post will describe how to create a project in typescript from scratch. The final project include some basic code, tests, commit hooks to enforce code formating, automatic tests on push and more ! I hope you'll enjoy it :)

TL; DR

find the code here

Basics

Before you start

you should have node/npm (latest lts should do the trick)
npm init was run. So you have a package.json

Setting up typescript

Typescript itself

Pretty straight-forward : npm install typescript --save-dev

Now check if that worked ; create a file src/demo.ts and fill it with

export function greeter(person: string): string {
 return "Hello, " + person + "!";
}

console.log(greeter("World"));

And run... Wait... what should I run ? Meh that JS, a node src/demo.ts will do it !
...
Oh no... Why does it complains about some unexpected ':' ?
:-/

Configuring typescript itself

I like to use a recommended default setting for tsc (typescript compiler) : npm install --save-dev @tsconfig/recommended then create a file named tsconfig.json and fill it with :

{
 "extends": "@tsconfig/recommended/tsconfig.json",
 "compilerOptions": {
 "outDir": "./dist",
 },
 "include": ["src/**/*"],
 "exclude": ["node_modules", "dist"]
}

in your package.json add a script for build : "build": "tsc",
you should be able to run npm run build then node dist/demo.js
Nice !

Speeding things up

well I'm the kind of person that does not like to have to type 2 commands everytime my code changes. So lets spend some time automating it a bit

first add tsc-watch to the project: npm install tsc-watch --save-dev
then add a watch script to the package:
"watch": "tsc-watch --onSuccess \"node ./dist/demo.js\"",
now you can run npm watch and every change you made will imediately be complied and run !

Enforce the "2 spaces or GTFO" law !

formatting will be done with eslint and prettier, enforcing formatting will be done with husky and its pre-commit hooks

configuring style tools

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-import prettier

in .eslintrc.js file :

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  root: true,
  env: {
    node: true,
  }
};

in .eslintignore :

node_modules
dist

in .prettierrc.js :

module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  singleQuote: true,
};

add a lint script to package.json :
"lint": "eslint src --ext .js,.jsx,.ts,.tsx"

Automate it

Once again, I'm lazy, so I need those tools to run automatically for me. That's where husky commes to play!

npm install --save-dev husky pretty-quick

add a prepare script : "prepare": "husky install"
run it : npm run prepare
you should see a .husky directory now.
create a file nammed pre-commit in this directory and fill it with :

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install pretty-quick --staged
npm run lint

now your formatting will be fixed on commit \o/

enforce the "meaningful commit or GTFO" law !

this will be done with commit-lint
npm install --save-dev @commitlint/config-conventional @commitlint/cli
then create a commit-msg file in .husky directory with :

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

and a commitlint.config.js with module.exports = {extends: ['@commitlint/config-conventional']} in it.
Now your commit messages are force to obey the law !

Prevent your friends to break the law

husky take care of that for you :)

These are not the tests you are looking for

Set-up

I use jest so we need to install it first: npm install -D jest ts-jest @types/jest
then config, jest.config.js :

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

add a test script : "test": "jest"

Your very first test

in demo.spec.ts we are going to ensure that our greeter is really polite:

import {greeter} from './demo'

describe('greeter function', () => {
    test('a greet should start with Hello', () => {
      expect(greeter("Bob").startsWith('Hello')).toBe(true)
    });
});

try it with npm run test

Guess what...? AUTOMATION

This time no external deps nor manual tweaking ! jest took care of that for us. simply run jest --watch ! Your tests should run on source edit. Alternatively you can use an extension in your ide to do it.

Setting up your dev env

I'm using vscode so this is the one that will be covered by this section.

Extensions

I suggest enabling code coverage overlay for jest (io.orta.jest.coverage.toggle).
Using prettier as formatter directly in editor will instantanely format your code correctly rather than on commit.

Time for release ?

Ok so your greeter is now ready for its first release ! Lets take advantage of our strict commit message policy to have a nice changelog ! standard-version will help us do so
npm i --save-dev standard-version
and a release script : "release": "standard-version"
finally run npm run release -- --first-release to do your... first release !

automate it, noob !

using github actions because those are pretty neat. create a .github/workflows/ directory to setup those actions.

auto test on commit

This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
For more information
node.js.yml :


name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x]
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

auto publish on release

npmPublish.yml:

name: Publish package on npm

on:
  release:
    types: [created]

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
          registry-url: https://registry.npmjs.org/
      - name: Cache node modules
        uses: actions/cache@v1
        with:
          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - run: npm ci
      - run: |
          if [ ${{ github.event.release.action }} = "prereleased" ]; then
            npm publish --tag beta
          else
            npm publish
          fi
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

NPM_TOKEN is a repository secret holding an access token with publish rights from npm. get your own at https://www.npmjs.com/settings/{YOUR_USER}/tokens

fun stuff

haha you whish

Premiers pas avec AutoHotkey

Marceau "XioRcaL" Lacroix — Wed, 06 Nov 2019 14:58:13 +0000

Trop long / Pas lu

le code est là

Problématique de base

Suite à changement d'environnement de boulot (poste de dev linux -> windows) j'ai besoin de retrouver certaines habitudes et notamment

Oui je fais partie de ces gens qui ont besoin d'un terminal à portée d'une touche de clavier. Sauf qu’apparemment sous Windows ce fonctionnement n'existe pas. Depuis j'ai appris que c'était plus ou moins possible, voir la section alternative en bas de l'article.

C'est quoi AutoHotkey ?

D'après leur site web c'est The ultimate automation scripting language for Windows. Ça a l'air plutôt cool présenté comme ça ! Et effectivement ahk permet aussi bien de simuler un clic souris que d'utiliser des dll windows. Sur le papier ça devrait permettre de résoudre le problème.

Le script

Cibler la touche de déclenchement

En temps normal c'est assez facile avec akh, il suffit d'écrire Matouche:: pour déclencher une action

j::
MsgBox, "vous avez appuyé sur 'j'"
return

Sauf que moi j'ai envie d'utiliser ma touche ². Naïvement j'ai essayé

²::
MsgBox, "vous avez appuyé sur '²'"
return

qui produit un joli

Il faut donc trouver un moyen d'identifier le code correspondant à la touche; la doc ahk sur le sujet est assez claire; il suffit d'ajouter #InstallKeybdHook dans mon script et de regarder les logs.

Le code de la touche ² est donc SC029; essayons ça :

SC029::
MsgBox, "vous avez appuyé sur '²'"
return

et ça marche! (il faut utiliser un encodage utf8 avec BOM pour avoir les caractères spéciaux affichés correctement)

La base : basculer sur une fenêtre existante

Maintenant il faut identifier la fenêtre cible et la rendre active. Pour ça le mode 'Window Spy' est très pratique, il permet d'afficher le titre, la classe, l'executable et le pid de la fenêtre active.

L'algo qu'on cherche à implémenter en pseudo code donnerait quelque chose comme

Si fenêtre active = terminal
  minimiser
  réactiver ancienne fenêtre
sinon
  sauvegarder ancienne fenêtre
  activer la fenêtre terminal

Pour ça on va se servir des fonctions ahk suivantes:

previous_active := ""

SC029::
  if WinActive("ahk_exe WindowsTerminal.exe") {
      WinMinimize, ahk_exe WindowsTerminal.exe
      if (previous_active) {
          WinActivate, ahk_id %previous_active%
      }
  } else {
      previous_active := WinExist("A")
      WinActivate, ahk_exe WindowsTerminal.exe
  }
return

Et si mon terminal est fermé ?

Là encore c'est assez simple, run, C:\PATH_TO_MY_APP\app.exe devrait faire le job. Mais comme mon terminal vient du windows store, je n'ai pas de lien direct pour l’exécutable. J'ai trouvé une astuce qui consiste à créer un raccourci pour l'appli en question et référencer le raccourci dans le script.

Win + R shell:appsFolder
clic droit créer un raccourci
run, path\to\raccourci

previous_active := ""

SC029::
if WinExist("ahk_exe WindowsTerminal.exe") {
    if WinActive("ahk_exe WindowsTerminal.exe") {
        WinMinimize, ahk_exe WindowsTerminal.exe
        if (previous_active) {
            WinActivate, ahk_id %previous_active%
        }
    } else {
        previous_active := WinExist("A")
        WinActivate, ahk_exe WindowsTerminal.exe
    }
} else{
    previous_active := WinExist("A")
    run, C:\PATH_TO\terminal_shortcut
}
return

Pratique, mais si j'ai besoin de taper un ² ?

Ajoutons un deuxième raccourci : Maj + ²

+SC029::
Send ²
return

La liste des modificateurs est ici

Bonus

une icône plus jolie :

I_Icon = C:\PATH_TO\icon.ico
IfExist, %I_Icon%
  Menu, Tray, Icon, %I_Icon%

Alernatives

En épinglant une appli à la barre des taches il est possible de reproduire l'ouverture/basculement. Il suffit d'appuyer sur Win + 1..9 correspondant au "numéro" de l'app dans la barre des taches