ts-logo.png

Introduction to TypeScript

Tired of how weakly-typed JavaScript is? Use TypeScript instead!

Overview

TypeScript is a statically-typed superset of JavaScript.

Every JavaScript program is also a TypeScript program. In TypeScript, there’s some extra syntax: you can add type declarations, type annotations, type assertions, type guards, and type aliases (see why it’s called TypeScript?). Then you compile the TypeScript code into JavaScript. If your specified type constraints are not satisfied, the compiler will tell you!

And the type analyzer works insanely hard. It can do control-flow based type analysis. Really.

In TypeScript, typing is optional.

You do not have to supply any type annotations at all. Specify as few or as many as you like.

Getting Started

Ready to learn TypeScript?

  1. Visit the TypeScript home page, and click on the Learn it Fast button, which takes you to the Documentation Home Page.
  2. Do the TypeScript in 5 Minutes Tutorial.
  3. Go to the TypeScript Playground and go through the demos in order. (We’ll do this in class. We will also play with the compiler options!)
  4. Now go back to the language home page and watch the amazing one hour video on the language. It’s okay if you don’t understand everything.
  5. Now that you’re suitably introduced, you can go through the entire TypeScript Handbook (available on the documentation section).

In the notes that follow, you’ll find some language highlights.

Running TypeScript

While the TypeScript Playground is great for, you know, playing around, the general workflow is to write TypeScript programs in a text editor (Visual Studio Code is probably preferred in TypeScript land), then use the tsc program to translate TypeScript to JavaScript, then run your JavaScript however you like.

To install TypeScript, ensure you already have a recent version of Node.js and npm on your machine, and invoke

npm install -g typescript

Here’s a console program:

greeter.ts
interface Person {
  title: string;
  name: string;
}

function greeting(salutation: string, person: Person) {
  return `${salutation}, ${person.title} ${person.name}`;
}

let user = { title: "Dr.", name: "Jane User" };

console.log(greeting("Hi", user));

Running tsc produces a JavaScript program, so a nice way to run TypeScript is like this:

$ tsc greeter.ts && node greeter.js
Hi, Dr. Jane User
Exercise: Mess with the type annotations in the script above. Remove them, change them to other types, etc. Mess with the interface as well. Are you impressed?

More Sample Programs

Let’s get acquainted with TypeScript’s capabilities through example scripts. Then we’ll go through details immediately thereafter.

TODO sample program 2

TODO sample program 3

TODO sample program 4

TODO sample program 5

The Types

A type expression can refer to a specific type, such as boolean, or it can indicate something about program behavior, for example void. Type expressions can even have type variables, which are traditionally given with capital letters. Let’s get an overview first:

TypeDescription
vUnit Type

Any value represents a type that consists only of that single value. Example: the following are actually types: 42, false, -9.5, "dog", null. Don’t get confused between the value 42 and the type 42.
booleanJavaScript’s boolean type.
numberJavaScript’s number type.
stringJavaScript’s string type.
symbolJavaScript’s symbol type.
undefinedThe type containing only the value undefined. This is a unit type, but it’s so commonly used that it’s worth pointing out on its own. Don’t get confused between the value undefined and the type undefined.
nullThe type containing only the value null. This is a unit type, but it’s so commonly used that it’s worth pointing out on its own. Don’t get confused between the value null and the type null.
voidUsed to mark functions that reach the end of their executing without ever returning or throwing, and thus return undefined. Saying the function is a “void function” is more accurate than saying “this function returns the value undefined” because, really, the intent for these kinds of functions is never to use their return value at all.
neverUsed to mark functions that don’t return anything because they always throw.
anyThis type is compatible is every type. Anything can be assigned to an any, and an any can be assigned to anything. It is a way of saying “Don’t check types here!”
T[]
Array<T>
Array Type

The type of all arrays, of any length, in which all elements have type T.
[T1,T2,...Tn]Tuple Type

The type of all tuples of length n in which the first element has type T1, the second element has type T1, and so on. Tuple and array values are syntactically the same!
T | UUnion type

The type containing all the values of T and all the values of U.
T & UIntersection type

TODO
enum {
  C1,
  ...,
  Cn
}
Enum type

TODO
interface { ... }Interface type

TODO

Type Checking

TODO show how it is structural and not by name

Type Inference

TODO

Other Things JavaScript Does Not Have

TODO

TypeScript in Practice

TODO

Configuration

The TypeScript compiler can be tuned to a range of behaviors from extermely permissive with typing to extremely strict. You can provide options to tsc or set them in the TypeScript playground UI. You can even make a tsconfig.json file in your project.

The options are:

TODO

Organizing Projects

TODO

References

Don’t miss:

Summary

The type system of TypeScript: