Typescript for the programmers who

like JavaScript

@Andrei_Cimpean

What will we cover ?

What it is

What's it useful for

How to get started

Using it

What is Typescript ?

Typescript is an open source project started and maintained by Microsoft.

It works on any OS.

Typescript is a typed superset of JavaScript that transpiles to plain JavaScript.

It offers classes, modules, and interfaces.

What does transpilation mean ?

A transpiler takes the source code of a programming language as its input and outputs the source code into another

programming language

The typescript compiler

Can generate JS valid down to IE8.

Compile-time type checking.

JS code is considered valid.

a typescript class

transpiled to a JS type

It basically allows you to use features that are not available out of the box in the targeted language.

What does Typescript help with ?

Compile time errors

Runtime errors ( traceur )

Better auto-completion

Helps the JS VM in making better code optimizations

Transpiles to ES3, ES5 or ES6

http://kangax.github.io/compat-table/

ES5

ES6

ES7

Let's pick a ES feature not available yet...

Decorators

Proposed for ES7

Typescript 1.5 adds support for ES7 like Decorators

Decorators are not allowed when targeting ES3

decorators in typescript

ES5 object literals support arbitrary expressions in the value position.

ES6 classes only support literal functions as values.

Decorators restore the ability to run code at design time, while maintaining a declarative syntax.

https://github.com/wycats/javascript-decorators

Typescript 1.4 is the current stable version.The roadmap is planned until 2.0.

https://github.com/Microsoft/TypeScript/wiki/Roadmap

Language features

Classes. Public, private and protected members.

a typescript class

transpiled to JavaScript

The resulting Type is a just a JS constructor + prototype trapped in a IIFE.

Interfaces

a typescript interface

transpiled to … nothing

About interfaces

No runtime cost.The type information is erased from a TypeScript

program during compilation.

Suggestion: use interfaces everywhere

highlighting errors

partial matching

Integrating 3rd party libs

Libraries and frameworks are described with interfaces.

Interfaces are defined in files with the .d.ts extensions and are called ambient definitions.

A repository for TypeScript type definitions:http://definitelytyped.org/

Check out https://www.npmjs.com/package/tsd

You usually create a folder in your project and dump typings there for the libraries and

frameworks you use.

You need to reference the files in the source code.

using reference paths

It's a common practice to create a reference file where you add the paths for all the definitions

used in your project and just include that everywhere.

Modules

Basically namespaces.

Declaring a module in typescript

Declaring a module in typescript

It's a good idea to group things up into small modules and wrap interfaces together with

classes / functions / etc. .

* you probably won't want to do that; it depends on the target of the compiler and you'll loose the option of only compiling changes

A module can* be spread across multiple files.

Starting to use Typescript is easy

npm i -g typescript

tsc source-code.ts > source-code.js

You usually have a source folder from where you transpile the code into a build / dist folder.

There are a lot of projects around grunt or gulp that help you automate builds.

( in one file, in watch mode, etc. )

Gruntfile sample

This grunt task creates a .js file for each .ts file and maintains the folder structure. It also creates source maps.

Caveat: each save means compile.

You loose some speed, especially when you need to compile hundreds of files.

It's fast, but it's noticeable.

Typescript in text editors / IDEs

Example: online visual studio

Baked in:Visual studio / Visual studio code

Plugins for:Intellij IDEASublime Text

AtomVim

Emacs

Plugins usually work as a client for TSServer ( an editor service bundled into TypeScript ).

It also outputs errors and warnings on save, gaining you back some dev speed.

How easy it is to find useful information ?

Just be careful about 0.9 stuff.

It used to be hard to find things after because 0.9 and 1.0 are incompatible.

You probably won't have issues.

Getting started resources

http://www.infoq.com/minibooks/typescript-c-sharp-programmers

http://www.typescriptlang.org/Content/TypeScript%20Language%20Specification.pdf

https://www.edx.org/course/introduction-typescript-microsoft-dev201x-0

Debugging Typescript

Typescript generates source maps for your code.

Sometimes you do have to go through the compiled code.

http://blog.mgechev.com/2015/04/06/angular2-first-impressions/

Hating Typescript

It's hard to add it slowly in your codebase.

It's easier to transition towards the web and assume you don't need to learn JS.

Tsc can fail miserably at catching typing errors when programming in a more functional style.

You will end up writing ambient definitions for various – less popular – libraries.

Questions ?

Thank you !