Turn on transpile-free type hinting for your vanilla JS projects #JSWithTypes


Keywords
JSWithTypes, types, typed, vanillajs, type, hinting, linting, checking, javascript, jswt, tsc, typescript
License
ICU
Install
npm install jswt@2.0.3

Documentation

Turn on transpile-free type hinting for your vanilla JS projects #JSWithTypes

  1. Create a plain JavaScript project

    npm init
  2. Turn on type linting πŸ’ͺ

    # Create a properly configured `jsconfig.json`
    npx -p jswt@2.x -- jswt init
    
    # Install @types/node, if needed
    npm install --save '@types/node'
  3. Profit!

Works with VS Code out-of-the-box, and Vim + ale.

CommonJS vs ESM

Use v1 for CommonJS, or v2 for ESM.

Watch the Presentation!

JS with Types conference title slide

https://jswithtypes.com

Layout

Your project will look something like this:

.
β”œβ”€β”€ bin/
β”œβ”€β”€ jsconfig.json
β”œβ”€β”€ node_modules/
β”‚   └── @types/
β”‚       └── node/
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ package.json
β”œβ”€β”€ README.md
β”œβ”€β”€ types.js
└── typings/
    └── overrides/
        └── index.d.ts

Inner Workings

  1. Runs tsc --init with these options:
    npx -p typescript@5.x -- \
        tsc --init \
        --allowJs --alwaysStrict --checkJs \
        --module nextnode --moduleResolution nextnode \
        --noEmit --noImplicitAny --target es2024 \
        --typeRoots './typings,./node_modules/@types'
  2. Adds the following keys:
    "paths": { "foo": ["./foo.js"], "foo/*": ["./*"] },
    "include": ["*.js", "bin/**/*.js", "lib/**/*.js", "src/**/*.js"]`,
    "exclude": ["node_modules"]
  3. Renames tsconfig.json to jsconfig.json
    (and creates some placeholder files and dirs)

Bonus: npm run lint

You may wish to add common script commands for fmt and lint:

npm pkg set scripts.lint="npx -p typescript@5.x -- tsc -p ./jsconfig.json"
npm pkg set scripts.fmt="npx -p prettier@3.x -- prettier -w '**/*.{js,md}'"

Bonus: Vim Config

It should Just Workβ„’, but if your vim setup is a little custom, you may want to add or modify a line like this:

~/.vimrc:

let g:ale_linters = {
\  'javascript': ['tsserver', 'jshint'],
\  'json': ['fixjson']
\}