How to create a new TypeScript project

TypeScript compared to JavaScript is a little bit more complex. If you do server-side JavaScript, you just call node your-script.js and it runs. When you want to use TypeScript, you need to install a few things and do a few steps to make your code runnable.

Make sure you have installed the latest version of nodejs on your system.

Create your project folder, change the current working directory, and install typescript as your development dependency.

npm i -D typescript

Initialize your nodejs project.

npm init

Then use npx to initialize a new typescript project.

npx tsc --init

A bunch of files should be in your project:

  • package.json
  • package-lock.json
  • tsconfig.json

Edit tsconfig.json, find outDir, and change it if you do not want compiled files in your root directory. Change it to the build folder.

...
outDir": "./build",   /* Specify an output folder for all emitted files. */
...

Now it's time to create your first TypeScript code.

Create a file index.ts and just put some random code.

async function main() {
    const i: number = 1;

    console.log('Random stuff', i);
}

main()

Save it and then you can do a manual compilation.

npx tsc

This compiles your project and the output will be stored in the build folder. You will find the file index.js there. Do a test run with node ./build/index.js.

In the console, you should see:

Random stuff 1

You can use npx tsc -w to activate watch mode. When you change anything in your project, it will be recompiled automatically.

To make it a little bit easier, you can edit the scripts property in package.json to merge compilation and run into one command.

...
"scripts": {
        "start": "npx tsc && node ./build/index.js"
},
...

When you call npm run start, your project will be compiled and run.

During code development, you should use a linter to check your code using certain rules to avoid code inconsistency. An easy way is to use Google TypeScript Style.

Install gts as a development dependency.

npm i -D gts

Then initialize gts with npx.

npx gts init

It will ask you some questions. If your typescript version is higher than suggested, just say no. Then you will be asked about updating tsconfig.json, say yes.

Some big changes will be made.

The src folder will be created with an index.ts file in it. Remove your old index.ts from the root folder.

In package.json, update your start script.

...
"start": "npx tsc && node ./build/src/index.js",
...

Make sure you have eslint support activated in your editor

You will get an index.ts example file in the src directory. It is all wrong. If you have eslint support activated in your editor, it should scream at you with lots of errors.

console.log("Try npm run lint/fix!");

const longString = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut aliquet diam.';

const trailing = 'Semicolon'

            const why={am:'I tabbed?'};

const iWish = "I didn't have a trailing space..."; 

const sicilian = true;;

const vizzini = (!!sicilian) ? !!!sicilian : sicilian;

const re = /foo   bar/;

export function doSomeStuff(withThis: string, andThat: string, andThose: string[]) {
    //function on one line
    if(!Boolean(andThose.length)) {return false;}
    console.log(withThis);
    console.log(andThat);
    console.dir(andThose);
    console.log(longString, trailing, why, iWish, vizzini, re);
    return;
}
// TODO: more examples

Just run npm run fix to let gts fix your code. You will get this:

console.log('Try npm run lint/fix!');

const longString =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut aliquet diam.';

const trailing = 'Semicolon';

const why = {am: 'I tabbed?'};

const iWish = "I didn't have a trailing space...";

const sicilian = true;

const vizzini = sicilian ? !sicilian : sicilian;

const re = /foo {3}bar/;

export function doSomeStuff(
  withThis: string,
  andThat: string,
  andThose: string[]
) {
  //function on one line
  if (!andThose.length) {
    return false;
  }
  console.log(withThis);
  console.log(andThat);
  console.dir(andThose);
  console.log(longString, trailing, why, iWish, vizzini, re);
  return;
}
// TODO: more examples

If it is working, you have just created your typescript project with a linter. It is a good thing to configure your code editor to perform npm run fix with every save.

Enjoy TypeScript coding.

Loading

Tags