Add TypeScript to Your Project

by Chad
Published May 04, 2020
Last updated May 04, 2020

image/svg+xml

TypeScript helps bring your JavaScript projects sanity by providing strong type checking and all the latest and greatest ECMAScript features. This article will show you how to quickly and easily add TypeScript to your project, old or new.

Start Coding in TypeScript Quickly and Easily

Without wasting any time, let's install TypeScript. Provided you have your favorite text editor as well as NodeJS and NPM (Node Package Manager) handy, you are ready to install TypeScript.

Step One: Find Your Project Folder

Within your favorite command window, navigate to your project directory.

cd my-javascript-project

Step Two: Install TypeScript

Once you are in your project's directory, run the following command to install the latest stable version of TypeScript.

npm install typescript

Final Step: Compile!

Now that we have installed TypeScript, we just need to create our first TypeScript file and convert it into JavaScript. To do this we must run tsc against our newly created TypeScript file.

Here I will create app.ts. My app requires that I sum all the elements within an array of numbers, so I will create a class called MyApp that contains a method, add, that takes in as a parameter an array of numbers, and returns a single value that represents the sum of all its number elements.

export class MyApp {
    public add = (numbersToAdd: number[]): number => {
        return numbersToAdd.reduce((a, b) => {
            return a + b;
        }, 0);
    } 
}

Now, all we need to do is run the executable, tsc, against our new file name. I will use the -t es5 option to target ECMAScript 5 in the event I want my JavaScript to work nicely in older browsers.

tsc -t es5 app.ts

And there we go! Here is our transpiled JavaScript file, app.js.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var MyApp = /** @class */ (function () {
    function MyApp() {
        this.add = function (numbersToAdd) {
            return numbersToAdd.reduce(function (a, b) {
                return a + b;
            }, 0);
        };
    }
    return MyApp;
}());
exports.MyApp = MyApp;

Conclusion

This article by no means goes into great detail about all of the features TypeScript can provide for us, but I hope this proves to be useful to those seeking a quick reference or are simply looking to learn more about TypeScript.

Happy Coding!

Unit Testing Exceptions in C# image

January 16, 2020 by Chad

Unit Testing Exceptions in C#

Sometimes there are cases where we want to throw a specific exception in our code. When you are writing your tests, how do you account for this? In this article I will work through examples of how to unit test C# code that's expected to throw exceptions.

Read more
Unit Test Your C# Code Easily with xUnit and TDD image

January 12, 2020 by Chad

Unit Test Your C# Code Easily with xUnit and TDD

Unit testing your C# code has truly never been easier. Today I will introduce how to get up and running and unit testing your C# code in only a matter of seconds with one of the latest testing technologies, xUnit, using a Test Driven Development (TDD) approach.

Read more
Dapper ORM: An Introduction to the Lightning Fast Micro ORM image

December 22, 2019 by Chad

Dapper ORM: An Introduction to the Lightning Fast Micro ORM

If you're looking for a simple, yet powerful object relational mapper (ORM) in your .NET applications, consider using Dapper, a lightning fast, lightweight "micro" ORM from the folks that made StackOverflow.

Read more