Typescript Tutorial

The Selling Points

Static type-checking

One of the primary draws of TypeScript is static type-checking. JavaScript does not have static type-checking, which means there is no indication of the presence of a type-error in the code besides the manifestation of a bug at run time or other unexpected behavior. If you try to call an integer as a function in JavaScript it won't complain, but if you try to do the same thing with TypeScript will provide an error before code is run. This saves developers from spending time debugging due to type based errors.

Non-exception Failures

TypeScript will throw errors when accessing properties on objects that don't exist, typos, uncalled functions, basic logic errors, and a slew of other common sense errors that JavaScript does not complain about until runtime. Instead of delivering exceptions or "undefined" TypeScript throws errors when it detects defects in the code structure.

Types for Tooling

TypeScript has other mechanisms of error preventions other error messages. TypeScript's type-checker can assess whether or not the correct properties or variables are being accessed. Based on this information TypeScript can suggest the attributes you are trying to access based on the object and suggest them within the code editor. If the editor supports TypeScript this means that the user will be provided with possible "quick-fixes" for detected errors as well as pertinent useful navigation tools.

tsc, the TypeScript compiler

TypeScript uses a compiler named tsc. tsc is where the type-checking occurs. If there are any issues with a TypeScript file (.ts) tsc will provide comprehensive and concise errors. The good the compiler will return a plain JavaScript file. tsc will do its best to deliver "clean readable code" that looks human made.

Emitting with Errors

Even if tsc throws an error it will still return the TypeScript file as a plain JavaScript file. It will make you aware then proceed anyway, leaving fixing or leaving it at the users discretion.

Explicit Types

By typing annotations within functions the user can specify what type each contained property is supposed to be. Based on this information TypeScript will throw an error if it finds code that assigns data of wrong type to an incompatible property. For example if a property was annoted as type String but is provided data with a type Integer. It is not required to specify types for each property, only when the user decided too.

Erased Types

When you compile TypeScript into JavaScript with tsc the type annotations are completely removed.

Strictness

In some cases TypeScript is most useful when only used to validate certain parts of the programming. A use can specify where in their program they would like to use type-checking and at what level of "strictness". Strictness can be all or nothing, or anything between based on user specification. Of course it is possible to create an entire project using strict TypeScript type-checking. A user can also toggle individual checks, most commonly noImplicitAny and strictNullChecks are toggled. noImplicityAny warns the user to specify types, which is the whole point of TypeScript. strictNullChecks warns based on whether or not the user has handled null or undefined in their functions.

Transitioning from JavaScript to Typescript

Setting up your Directories

When setting up a TypeScript project it is important to separate your input .ts files from the output path/directory. If the files are intermingled compiling with tcs runs the risk of overwriting existing files. This also comes into play with bundling and transpiling.

Writing a Configuration File

TypeScript uses a file called tsconfig.json to define specifications and options for your project. This configuration file can determine things such as file inclusions and exclusions, whether or not pure JavaScript is allowed, and even use older versions of JavaScript for the output.

Integrating with Build Tools

You can use tools such as Gulp and Webpack with TypeScript. Gulp can be used to implement many other popular build tools. Webpack can be used with a feature of Typescript called ts-loader in conjunction with another feature called source-map-loader. This allows for easier live previews and debugging. Wepack requires its own configuration file, but this time its JavaScript instead of JSON.

Moving to TypeScript Files

To utilize TypeScript you must change the file extension of your files from .js to .ts. If you are using .jsx files you need to change them to tsc. It is likely you will encounter warnings, but the TypeScript compiler will still compile your code. You can adjust the settings to force you to fix all warnings before compilation, however it is likely that many of these warning

Weeding out Errors

Most of the errors you will need to deal with initially are due to the lack of TypeScript syntax. You need to go through your code and refractor where TypeScript syntax should be used.

TypeScript for JavaScript Programmers

Types by Inference

TypeScript will in most cases generate types based of your code(variable instantiation and assignment in particular). The core functionality that TypeScript provides is adding Types to JavaScript. This helps mitigate the hard to spot bugs that plague JavaScript as a result of the open ended 'any' type that applies to everything.

Defining Types

In some cases it is better to tell TypeScript what a data type should be as opposed to having it guess. This is achievable for writing an interface for your objects and functions that define types.

Composing Types

You can also specify a range of types that something can be. This is essentially just enumeration for literal values that an object or object attribute is allowed to be

Structural Type System

If two objects have the same shape they are perceived by the compiler of being of the same type. While a variable may never be assigned an explicit type definition the shape of the equivalent object will be used.

Examples