Compile TypeScript with npm

created: 3/6/2019

updated: 8/24/2020

Did you know you can use npm's package.json to run commands? Here, we will learn how to run the TypeScript compiler to generate JavaScript output from TypeScript source files. Before we start, make sure you have Node.js and npm installed.

TypeScript

In a new folder, create a file named script.ts. Then, add some sample code so we can test whether the JavaScript output is being generated properly.


  const msg: string = "Hello World!";
  console.log(msg);
  

TypeScript Compiler

In the same folder, create a new file named tsconfig.json. Here is the TypeScript official documentation for configuring tsconfig.json.

Your tsconfig.json file should look like this:


  {
    "compilerOptions": {
    "outDir": "./output"
    },
    "include": ["/*"],
    "exclude": []
  }
  

This configuration tells the TypeScript compiler to look for source files in the root of your project, where your tsconfig.json is located. For any TypeScript files it finds there, it will output the compiled JavaScript to a new folder named output.

package.json

In the same folder create a package.json file. Here is the npm official documentation on creating a package.json file.

Then, add the name and version properties required. You will also need to add a property called scripts. This property contains the script instructions that we will use to compile the TypeScript we created. In this case, our compilation script is named compile-typescript, and it runs the command tsc. This is the default TypeScript command, and it will utilize the tsconfig.json we created

Your package.json file should look like this:


  {
    "name": "package-name-goes-here",
    "version": "0.0.0",
    "scripts": {
      "compile-typescript": "tsc"
    }
  }
  

Now that package.json is created and the TypeScript compilation step is listed, we must save TypeScript as a dev dependency. This will give the npm task access.

npm Install TypeScript

To install TypeScript for this project in a terminal window, run the command:


  npm install typescript --save-dev 
  

After installing TypeScript, your package.json should look like this:


  {
    "name": "package-name-goes-here",
    "version": "0.0.0",
    "scripts": {
      "compile-typescript": "tsc"
    },
    "devDependencies": {
      "typescript": "^3.5.3"
    }
  }   
  

JavaScript

In a terminal window, navigate to the source code folder you created. Then, run the following command:


  npm run compile-typescript
  

Now, you should now see a new folder created named output, that contains one file named script.js. Notice how the output has defaulted to ES5 JavaScript, which is compatible with all major browsers.

Your script.js file should look like this:


  var msg = "Hello World";
  console.log("msg");
  

Congratulations! You have successfully compiled TypeScript with npm.

Comments

  • Michael Easter

    This helped me... thank you!

  • Dani

    This was useful, thanks! The instructions were clear and it worked perfectly.You might want to add a final step explaining how to run the compiled code - creating a new "start" script in package.json to run "output/script.js" and then run `npm start` in the terminal.

Leave a Reply