Writing Your First TypeScript Program

In your editor, enter the following code into a file called greeter.ts:

function greeter (person) {
  return 'Hello, ' + person
}

let user = 'Yee'

console.log(greeter(user))

Compiling the Code

We used the .ts extension, but this code is just JavaScript.

On the command line, run the TypeScript compiler:

tsc greeter.ts

The output is a greeter.js file containing the same JavaScript code as the input file.

On the command line, run this code through Node.js:

node greeter.js

Console output:

Hello, Yee

Type Annotations

Next let's look at the advanced features that TypeScript tooling brings. Add a : string type annotation to the person function parameter, as follows:

function greeter (person: string) {
  return 'Hello, ' + person
}

let user = 'Yee'

console.log(greeter(user))

Type annotations in TypeScript are a lightweight way to add constraints to functions or variables. In this example, we want the greeter function to accept a string parameter. Now let's try changing the greeter call to pass in an array:

function greeter (person: string) {
  return 'Hello, ' + person
}

let user = [0, 1, 2]

console.log(greeter(user))

Recompiling, you'll see an error:

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

Similarly, try removing all arguments from the greeter call. TypeScript will tell you that you called this function with an unexpected number of arguments. In both cases, TypeScript provides static code analysis that can analyze code structure and the type annotations you provide.

Note that even though there were errors, the greeter.js file was still created. You can still use TypeScript even if there are errors in your code. But in such cases, TypeScript warns you that the code might not run as expected.

Interfaces

Let's continue extending this example application. Here we use an interface to describe an object with firstName and lastName fields. In TypeScript, if the internal structures of two types are compatible, then those two types are compatible. This allows us to implement an interface by simply ensuring it contains the structure the interface requires, without needing an explicit implements statement.

interface Person {
  firstName: string
  lastName: string
}

function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = {
  firstName: 'Yee',
  lastName: 'Huang'
}

console.log(greeter(user))

Classes

Finally, let's rewrite this example using classes. TypeScript supports new JavaScript features, such as class-based object-oriented programming.

Let's create a User class with a constructor and some public fields. Because the class fields contain the fields required by the interface, they are compatible.

Also note that we declare all member variables on the class declaration, making everything clear at a glance.

class User {
  fullName: string
  firstName: string
  lastName: string

  constructor (firstName: string, lastName: string) {
    this.firstName = firstName
    this.lastName = lastName
    this.fullName = firstName + ' ' + lastName
  }
}

interface Person {
  firstName: string
  lastName: string
}

function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = new User('Yee', 'Huang')

console.log(greeter(user))

Re-run tsc greeter.ts, and you'll see that classes in TypeScript are just syntactic sugar -- essentially still implemented with JavaScript functions under the hood.

Summary

By now, you have a general impression of TypeScript. In the next chapter, let's learn some commonly used TypeScript syntax together.