Learning TypeScript: Hello World

Tags: TypeScript

I'm finding more and more developers are growing an interest in Typescript.  When I first started learning the language, I started with the samples here:

I'm starting a series of blog posts on each of these samples.  I'm taking the notes I wrote when I first started learning TypeScript, and updating them with my current understanding. The samples start quite simple. Each sample adds new concepts and new examples.

The first sample is your basic Hello World sample.  You can see it running here:

Exciting, I know.

The source code is a bit more interesting. You can see it online here. It shows some of the important concepts in Typescript:

The HTML source for this sample shows an empty page that loads a single .js file:

 <!DOCTYPE html>
<html>
 
<head><title> TypeScript Greeter </title></head>
 
<body>
   
<script src='greeter.js'></script>
 
</body>
</html>

The source is not a JavaScript file, but rather a TypeScript file: greeter.ts. That's the first important concept: Typescript files are compiled to JavaScript files.  TSC (Typescript compiler) generates the greeter.js file from the greeter.ts file shown here:

class Greeter {
   
constructor(public greeting: string) { }
    greet() {
       
return "<h1>" + this.greeting + "</h1>";
    }
};
var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
document.body.innerHTML = str;

Let's examine each of the TypeScript concepts in this example.

Class

Typescript supports types using the class keyword. This defines the Greeter class:

class Greeter {
};

Constructors and Fields

Typescript supports a very concise syntax for defining fields and initializing them using a constructor. Constructors are defined with the constructor keyword.

     constructor(public greeting: string) { }

The parameter (greeting) is of the string type. Notice that the greeting parameter is prefixed by the 'public' access modifier. That is a parameter property declaration. That tells the Typescript compiler to create a public property of type string, named greeting. The property will be initialized to the value of the greeting parameter. 

Member Methods

The remainder of the Greeter class implementation contains a single method "greet". 

     greet() {
       
return "<h1>" + this.greeting + "</h1>";
    }

 The greet method returns a formatted string. Notice that he code does not explicitly declare the return type of the function. The return type is inferred  by the compiler based on the body of the function.

 Script

Scripts can contain code that will execute as the script file is loaded.  Here, that code looks like plain old vanilla JavaScript:

var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
document.body.innerHTML = str;

It creates a new Greeter object. Then, it retrieves the greeting from that greeter object, and uses that string to set the InnerHTML property of the HTML document.

That's all there is to it. A small introduction to Typescript. I'll continue this series with other samples that include more features of the language.

Add a Comment