Get started with Typescript

If you are not yet into the solidity of type-check your code, if you are not working inside a JavaScript framework and if you might want the benefit of using Typescript instead of vanilla JavaScript, then you will appreciate the starter stored in this repository.

This boilerplate benefits from the Vite environment and only one more dependency: Typescript of course.

So if we take a look at the package.json file it looks quite essential:

{
"name": "ts-boileplate",
"version": "1.0.0",
"description": "Typescript boilerplate",
"scripts": {
"dev": "vite",
"deploy-w": "tsc -w"
},
"author": "",
"license": "ISC",
"devDependencies": {
"vite": "^3.2.0",
"typescript": "4.9"
}
}

By the time this article has been written, the versions are 3.2.0 for Vite and 4.9 for Typescript.

At first, we can start cloning the repository and install the dependencies:

npm install

then we are allowed to run the commands saved in the script section of package.json.

As we can see we have only two commands to invoke in order to start working.
The first one is:

npm run dev

that starts the Vite environment, per default at the address http://localhost: 5173. The second command:

npm run deploy-w

that starts the Typescript compiler with the flag "-w", which means that compiles the files at every saved change. Keep these two terminals running during the development process.

The structure of folders for the applications is also minimal. The most important thing to take care of is to separate the development environment from the production application. In order to do that we need to create an "src" folder that reproduces the location of the "js" folder inside the production folder: "dist". The deployed JavaScript files modules are imported in the main.js and so is the main JavaScript into the HTML files.

To deploy automatically and respect the positions between the folders some instructions need to be written inside the tsconfig.js.

{"compilerOptions":
{
/* Visit https://aka.ms/tsconfig to read more about this file */
/* Language and Environment */
"target": "es6",
/* Modules */
"module": "es2015",
"rootDir": "./src",
"outDir": "./dist",
"removeComments": true,
/* Interop Constraints */"
esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
/* Type Checking */"strict": true,
/* Completeness */
"skipLibCheck": true
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"**/*.test.ts"
]
}

All the magic happens with the values of the keys rootDir, outDir, and the include key array. With the values set like this, we ensure that everything falls into place when the Typescript compiler runs.
By the way, remember to exclude the node_modules directory from the compiling.

The last thing to set is the directory that the local server has to look into when it runs, actually the "dist" folder, we can set it inside the vite.config.js

/** @type {import('vite').UserConfig} */
import { defineConfig } from 'vite'
export default defineConfig({
server: {
open: '/dist/index.html',
},
})

And then everything is set!