Introduction to TypeScript - Part 1
I'm working on a longer series of articles about Typescript. This will be extra material to support my upcoming Angular 2 book. This is the first part of that series.
What is TypeScript?
TypeScript is a strongly typed language which can be used to build web applications. It come with a special compiler that converts the strongly typed language into JavaScript so it can run in a web browser. Since TypeScript is strongly typed, it can offer better tooling than can be used with simple JavaScript. Angular 2 was built using TypeScript and I use it heavily in my Angular 4 book. This article is intended to give you an introduction to TypeScript.
Setup the Project
The first step to creating a TypeScript application is to install the compiler. I'm going to use the Node compiler. First, you'll need to set up the node project. Run this command:
npm init
And follow the instructions. You'll see something like this:
This will create a package.json file that will look something like this:
{
"name": "01helloworld",
"version": "1.0.0",
"description": "Sample TypeScript Project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jeffry Houser",
"license": "ISC"
}
Now install the TypeScript compiler:
npm install -g typescript
You'll see this:
With TypeScript installed, you're ready to write your first Typescript application.
Create Your First TypeScript File
Create a file named hello.ts:
function echo(message) {
return message;
}
document.body.innerHTML = echo("Hello World");
The purpose of this code is to echo a Hello Word message. The function accepts a string, and returns it. The innerHTML of the document's body tag is set to the results of the function call.
This file would be valid JavaScript, but it works fine since TypeScript is a Superset of JavaScript. We can use JavaScript inside of TypeScript easily. We'll improve on this throughout the article as we introduce more TypeScript specific concepts.
You can compile this file by running this command line:
tsc hello
You'll see something like this:
You aren't given a lot of feedback, but if you check the directory, you'll see a hello.js file:
function echo(message) {
return message;
}
document.body.innerHTML = echo("Hello World");
There isn't a lot of difference between the original file and the compiled file, that is because our main TypeScript file is primarily JavaScript. This is a place to start and over the series we'll expand our TypeScript knowledge.
Test the Application in a Browser
Now it is time to test the application in a browser. Create a page named Index.html:
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="hello.js"></script>
</body>
</html>
This index file loads the hello.js file, which will cause the document.body.innerHTML assignment to be called, which will run function and return the results:
Congratulations! You've created your first TypeScript application.
