Exploring Typescript: Setting up Typescript

• September 06 2023
• 5 min. read

Typescript is an interesting language. It's a typed superset of Javascript that you can compile to usable Javascript, either ES5 or later yearly versions of the language.

Because it's not straight Javascript it requires compilation before it can be used in Node or browsers.

Using CLI tools to work with Typescript #

The easiest way to use Typescript is to install the tool themselves and then run them through NPM scripts we set up in package.json.

Installing Typescript #

To compile Typescript we need the Typescript compiler (TSC) that comes bundled with the NPM typescript package. To install it run the following command.

npm i -D typescript

Creating a Typescript configuration file #

The first thing to do is to initialize the Typescript project and create a default tsconfig.json configuration file.

Run the following command

tsc --init

If the initialization is succcessful the compiler will emit the following information and create the configuration file.

target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true

I normally change the target file to a newer version of Javascript, usually 2017 or 2022 depending on what I want to work with.

Note that the configuration file lists every single configuration option for Typescript. Most of them are commented... unless you know what you're doing, leave them commented until you need them

Compilation #

To run the compiler add the following line to the scripts section of your package.json.

"compile": "tsc ./src/**/*.ts"

And run the command with:

npm run compile

This will convert all the files ending with .ts under the src directory regardless of how deep they are in the hierarchy.

Linting #

Linting Typescript is a little more complicated than Javascript. We still use ESLint to lint and fix our code but we need to make sure that when we initialize the linter we tell it that we'll be working with Typescript so that it installs the appropriate packages.

Run:

npx eslint --init

And make sure that when the installer asks you Does your project use TypeScript? you answer yes.

It will then install all the packages needed to lint both JS and TS files.

Add the following lines to the script section of your package.json

"lint": "eslint ./src/**/*.ts",
"fix": "eslint --fix ./src/**/*.ts",

And run the commands as follows:

To lint run: npm run lint.

To lint and fix errors, run: npm run fix.

Using Gulp to work with Typescript #

If you use Gulp to run and build other aspects of your project it would make sense to use it to process Typescript as well.

The instructions on the next sections assume that you haven't installed or used Gulp before. If you have, some of these instructions may be redundant.

First install the Gulp CLI globally, this will give you the gulp command to make your life easier.

npm install -g gulp-cli

Inside your project run the following command to install Gulp.

npm install -D gulp@4

Now we're ready to install and work with Typescript.

Compiling With Gulp #

Before working with Typescript we need to install them. To do so run the following command:

npm install -D gulp-typescript \
 typescript \
 merge2

Once the packages are installed

const gulp = require('gulp');
const ts = require('gulp-typescript');
const merge = require('merge2');

gulp.task('default', function() {
  const tsResult = gulp.src('js/**/*.ts')
    .pipe(ts({
      declaration: true
  }));

  return merge([
    tsResult.dts.pipe(gulp.dest('dist/js/definitions')),
    tsResult.js.pipe(gulp.dest('dist/js/js'))
  ]);
});

Gulp and Linting #

Linting Typescript can be a little hard to understand. We still use ESLint with Typescript presets. There used to be a TSLint application but the creators decided to merge their work with ESLint.

npm i -D @typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
gulp-eslint eslint

We add the require statement at the top of the file, along with the other declarations.

const eslint = require('gulp-eslint');

We then add a task to lint our files. Because it uses the ESLint configuration that we created in a previous step, there is no need to configure the Gulp task itself.

One way to do it may look like this:

gulp.task('lint', function () {
  return gulp.src(['./src/**/*.ts'])
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
});

And that's it, we now have a working process to compile and lint Typescript files using NPM and a build system (Gulp in this case).

We'll now move to talking about the language itself.

In the next post of this series we'll look at some of the language itself, how it is different from Javascript and how to make the best use of it

Edit on Github