How to Setup a Typescript Project

JavaScript TypeScript

Before we can setup a TypeScript project we first need to ensure that  Node.js and NPM are installed. If you don’t have them installed, head over to the node.js download page and select the relevant package and follow the on screen instructions.

Note: I am using a Mac for the purpose of this tutorial, but it’s basically the same for Windows 10. I am also using Visual Studio Code which you can download from here for free.

To test that NPM is working, open up your terminal and type npm.

You should get something like this.

Once VS Code is installed, create a folder somewhere accessible, in my case I called it typescript-test-setup and open it in VS Code. Take note that the folder name is all lowercase with dashes instead of spaces, this will become apparent in a moment if it isn’t already.

Your folder is visible in VS Code on the left hand side where the red circle is and if you hover over it you will see some icons appear, the first one is to create a new file and the second to create a new folder.

Create a new file called app.ts and another called index.html.

In your index.html file just add a typical HTML5 boilerplate with a script tag just before the closing body tag.

<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>TypeScript Test Setup</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

	<script src="app.js"></script>    
	</body>
</html>

Our script tag is pointing to app.js which at this point doesn’t exist,  but it will once we compile our TypeScript.

Building our Package Manager

The best way to handle projects using TypeScript is to use a package manager such as NPM. This allows us to keep track of dependencies, automate the process of compiling TypeScript to JavaScript and run our project in a virtual environment with lite server.

Inside VS Code hit shift + cmd + c to bring up the terminal (the advantage to opening it from VS Code is that it opens inside the folder rather than your system so there is no need to waste time changing directories) and type npm init.

The first thing you will be prompted to type is the name of the project. The defaults are shown in brackets (ref *1). The defaults should be perfectly fine for most projects, just fill out the author, description and change the entry point to your primary JS file which for us will be app.js.

After running through all the basic setup parameters you will be informed that you are about to write to package.json (ref *2) and it will show you what you are about to write (ref *3). If it looks correct, hit enter once more.

In VS Code you should now see your package.json file.

Testing Our Package

You can test if your package is working by typing npm test in your terminal. If it is successful you will see your test message.

[thesis_block type=”note” header=”” content=”Note the error: npm test is intended to test a script or scripts and not a string, but for now, we will use a string because we don’t have any scripts to test.”]

Adding Dependencies

Now that we have our basic package initialized, we need to add some dependencies or more specifically dev dependencies. A package has two types of dependencies, those used in production like jQuery and those use in development like TypeScript.

We will install the following as dev dependencies:

  • concurrently – as the name suggest, it allows us to run multiple commands concurrently.
  • typescript – can’t start a TypeScript project without this.
  • lite-server – lightweight development only node server, refreshes when changes are made to HTML and JS and injects CSS changes using sockets.

To install a dependency, use the install command.

For dependencies

npm install <package> --save

For dev dependencies

npm install <package> --save-dev

You can install multiple dependencies by separating your packages with a space. So to install our dev dependencies, run the following command in your terminal.

npm install concurrently typescript lite-server --save-dev

Now if you look at your package.json file you should see your dev dependencies.

{
  "name": "typescript-test-setup",
  "version": "1.0.0",
  "description": "My test setup of a TypeScript Project",
  "main": "app.js",
  "scripts": {
    "test": "we are live!"
  },
  "author": "Matthew Horne",
  "license": "ISC",
  "devDependencies": {
    "concurrently": "^3.5.0",
    "lite-server": "^2.3.0",
    "typescript": "^2.4.1"
  }
}

So far so good, our package is coming together, but it wont compile TypeScript just yet, for that we need to generate a tsconfig.json file and then define some additional commands in the scripts object for our project.

So before we move on to configuring our scripts, run the following command.

tsc --init

If you get a message that says “Successfully created a tsconfig.json file.” then you should now see a tsconfig.json file in VS Code.

Setting up Our Scripts

Our script object currently has a test command which outputs when we use npm test. But we want to add some additional commands that define our TypeScript Compiler, TypeScript Compiler Watcher, lite server and a start command that concurrently runs lite server and watches for changes to TypeScript files in order to compile them and update our lite server in real-time which makes the development process so much nicer.

So here is my updated package.json file with updated script commands.

{
  "name": "typescript-test-setup",
  "version": "1.0.0",
  "description": "My test setup of a TypeScript Project",
  "main": "app.js",
  "scripts": {
    "test": "we are live!",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
  },
  "author": "Matthew Horne",
  "license": "ISC",
  "devDependencies": {
    "concurrently": "^3.5.0",
    "lite-server": "^2.3.0",
    "typescript": "^2.4.1"
  }
}

Now in our scripts object we have defined our TypeScript compiler with "tsc": "tsc", defined our TypeScript compiler in watch mode "tsc:w": "tsc -w", defined our lite server "lite": "lite-server" and finally our all important start command.

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "

This is where concurrently comes into it. Our start command will concurrently run the TypeScript Compiler (tsc) in watch mode (-w) as well as run our lite server.

After saving your package.json the last step is the start the project.

In your terminal type npm start and our start command defined in the script object will be executed.

If everything has been setup properly you will see Watching files… and Chrome should have opened up our project in watch mode and any TypeScript files in our project will compile to JavaScript which is why you will see an app.js file which previously wasn’t there, the compiler generated it.

The next step is to write something into our app.ts and we should see activity in our terminal which is the TypeScript Compiler Watcher and lite server doing there jobs.

Now when we make changes to app.ts and save it, the compiler will take our TypeScript and compile it to JavaScript which you can see in app.js and our lite server updates accordingly.

One of the advantages of NPM is that once you have a package.json setup, you can copy the package and run the npm install command to install all the dependencies and then run npm start and boom, you have your project setup ready to begin writing your code. Just don’t forget you tsconfig with tsc --init.

Matthew Horne

I am a web developer from the United Kingdom who taught himself PHP and JavaScript and continues to build on those skills as well as learn new ones. If you would like to hire me, shoot me an email.

Show 0 Comments
No comments yet. Be the first.

Leave a Comment