How to Create Projects with the TypeScript Compiler

TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.

However, not everyone knows how it actually works.

In this article, we’ll look at how to create a project with the TypeScript compiler and write some code.

We also look at how to install packages, what the version number means.

Also, we look at the project structure of a typical TypeScript project.

Getting Started

We can create a folder by creating a project folder.

Then inside it, we run:

npm init --yes

to create a package.json file.

Then we install Node packages by running:

npm install --save-dev typescript
npm install --save-dev tsc-watch

to install the TypeScript compiler and a program to reload our program as it changes respectively.

Everything will be installed into the node_modules folder.

Then we add a tsconfig.json to add our compiler options and add:

{
  "compilerOptions": {
    "target": "es2018",
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Then our built code will be in the dist folder and our code should be in the src folder.

The target is the JavaScript version that our build artifacts will target.

Writing Code

We can then create an index.ts file in the src folder and start writing some code.

For instance, we can write:

const print = (msg: string): void => {
  console.log(msg);
};

print("hello");

We created a print function that takes a msg parameter.

The word string after the colon is the parameter type.

void is the return type of the function. It means that our function returns nothing.

Project Structure

A TypeScript project folder consists of the following items:

• dist — the folder that has the output from the compiler
• node_modules — the folder containing the packages that the app and dev tools require
• src — the folder containing the source code files that will be compiled by the TypeScript compiler
• package.json — the folder containing the top-level package dependencies for a project
• package.json — a file containing the complete list of package dependencies of a project
• tsconfig.json — a file having the config settings of the TypeScript compiler

Node Package Manager

Most TypeScript needs dependencies from the outside.

NPM has the most TypeScrtipt packages for JavaScript and TypeScript project.

Since TypeScript is a superset of JavaScript, we can use any JavaScript package in TypeScript code.

NPM follows the chain of dependencies to work out which version of each package is required and download everything automatically.

Anything that’s saved with the --save-dev or -D option is saved in the devDependencies section of package.json .

Global and Local Packages

Package managers can install packages so they’re specific to a single project.

This is the default option.

Some packages that are needed to run on the computer can be installed as global packages.

For instance, the TypeScript compiler would be a global package since we would need it on the whole project.

Node packages mostly use semantic versioning.

There are also a few symbols to denote the package version in different ways.

For instance, we can denote the version number exactly with 1.0.0 .

The * accepts any version of the package to be installed.

>1.0.0 or >=1.0.0 means that we accept any version of a package that’s greater than or greater than or equal to a given version.

<1.0.0 or <=1.0.0 means that we accept a version that’s less than or less or equal to the given version.

~1.0.0 means that we accept a version to be install even if the patch level number doesn’t match.

So 1.0.1 is considered equivalent to 1.0.0 is a ~ is prefixed to a version number.

^1.0.0 will accept any version even if a minor release number or the patch number doesn’t match.

So 1.0.0 and 1.1.1 are considered equivalent if a ^ is prefixed to a version number.

Conclusion

Node packages go back semantic versioning. We can specify whether we want an exact match or not in package.json .

We can add the TypeScript compiler to get started with a TypeScript project.

Once we have that, we can add TypeScript-specific code to our projects.

Also, we can specify the build target version of our TypeScript project.