Typescript is becoming more and more of a big deal. I wanted to learn it because people thought that it helps to prevent bugs and has so many features. And although it is to some extent, it doesn’t mean that it is easy to start within a real environment.
Initialize the project
To quickly initialize the project just do:
npm init -y
Or if you want a more personalized project just do:
npm init
There it will ask you the following questions:
- Name of the package
- Version
- Description
- Entry point
- Test command
- A git repository
- Keywords
- The name of the author
- And the type of license
Installing the dependencies
All the dependencies we’ll use are typescript, nodemon, ts-node, tsconfig-paths and tsc-alias as the main ones for development with typescript.
- typescript: is the language compiler.
- nodemon: it listens to any change on the project and restarts it to run that change.
- ts-node: It helps to listen to the changes on a typescript project.
- tsconfig-paths: typescript has a feature that allows custom path names to the folders to avoid nested relative paths such as
”../../../../../../someFile.ts”.
- tsc-alias: it will interpret those custom paths to relative routes on the compilation for production.
One of the core features of Typescript is the type check. These are defined on the language, whether they are strings, number or boolean just to name a few, that makes sure that the code doesn’t use types of values that it wasn’t assigned to.
Considering the abode, we'll install an additional dependency for the code editor to understand the intellisense (code completion) part of the development in node to understand typescript as well: @types/node.
npm install typescript nodemon ts-node tsconfig-paths @types/node --save-dev
Remember that --save-dev (-D for short) it’s used for dependencies that are only require in development. As a side note, I recommend add --save-exact (-E for short) to npm install command, this will install the exact dependencies each time that the package.json file is used.
npm install typescript nodemon ts-node tsconfig-paths tsc-alias @types/node -ED
This is because, by default, npm install dependencies as “from this version upwards” and you can distinguish them with the ^ symbol at the beginning of each version.
"devDependencies": {
"@types/node": "^16.11.7",
"nodemon": "^2.0.15",
"ts-node": "^10.4.0",
"tsc-alias": "^1.4.0",
"tsconfig-paths": "^3.11.0",
"typescript": "^4.4.4"
}
As opposed to:
"devDependencies": {
"@types/node": "16.11.7",
"nodemon": "2.0.15",
"ts-node": "10.4.0",
"tsc-alias": "1.4.0",
"tsconfig-paths": "3.11.0",
"typescript": "4.4.4"
}
Setting typescript
Typescript has a way to configure it to the project at hand. Use the following command to start from scratch:
npx tsc --init
This will generate a tsconfig.json file. This json has all the parameters that typescript accepts for configuration, in this case, most of them are commented. We’ll get there, for now, create a folder (or directory) at the root of the project called src/. For that you can simply use the following command:
mkdir src
Inside that folder create the main file, in this case, it will be called index with the .ts extension. You can use Vim or any other text editor to create it. In this case, I will use touch:
touch index.ts
In it, write a simple code like:
console.log("hi, this is working");
And in the src folder create another directory named example and file.ts in that same folder. You can simply use this to do those things in one line:
mkdir src/example && touch src/example/file.ts
Configuring Typescript
Remember when I told you to use the npx tsc --init command to generate the tsconfig file? Well, add at the beginning of the tsconfig.json the following code or uncomment the parts where this are located and put:
"lib": ["ESNext"],
"allowJs": true,
"outDir": "./dist",
"rootDir": "./src",
"baseUrl": "./",
"paths": {
"@example/*": ["src/example/*"]
},
Putting all the installed dependencies together
The simple version is this: Add the following code to the package.json replacing the current scripts section in the file:
"scripts": {
"start": "NODE_ENV=production node dist/index.js",
"dev": "NODE_ENV=development nodemon src/index.ts --exec 'ts-node -r tsconfig-paths/register'",
"build": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
"test": "echo \"Error: no test specified\" && exit 1"
},
Now run:
npm run build
You’ll see a dist folder right on the root of the project, that’s the compilation of the typescript code to javascript. Run:
npm start
And it should output something like this:
> ts_setup@1.0.0 start
> NODE_ENV=production node dist/index.js
hi, this is working
Finally, in the index.ts of the src folder, replace it with the following code:
import variable from "@example/file";
console.log("hi, this is working", variable);
The output should be something like this:
hi, this is working { x: 'there', y: 'hello', z: 'hello, there' }
You can even run npm run build and npm start for production.
You can find the source code on in here.
If you have any idea or want to point out some mistake that I made, write a comment below, I will read it and I'm sure that we will find a solution for it. I hope that you make fantastic sites with this information that I wrote.
Follow me on Twitter, LinkedIn, Instagram, Github, Medium (For more opinion based posts), and here on Hashnode and my Hashnode blog.
Have a nice day and until next time. Bye.
