INTRODUCTION TO TYPESCRIPT
Pavels Jelisejevs, C.T.Co 2016
Slide 2
Slide 2 text
ARE YOU
ENJOYING
JAVASCRIPT
?
Slide 3
Slide 3 text
SO WHAT IS
TYPESCRIPT?
Slide 4
Slide 4 text
“
TypeScript is a typed superset of
JavaScript that compiles to plain
JavaScript.
-The Docs
Slide 5
Slide 5 text
IN OTHER WORDS
TypeScript is JavaScript extended
with ES syntax and Java- or C#-
like typing system.
Slide 6
Slide 6 text
WHAT’S IT FOR?
Its main goal is to simplify the
development and maintenance of
large scale JS applications.
Slide 7
Slide 7 text
SHORT BIO
➤ First public release in October 2012
➤ Maintained by Microsoft
➤ Open source
➤ Licensed under Apache 2.0
➤ Supported by numerous IDEs, such as Visual Studio, IntelliJ,
Atom, Sublime and Vim
Slide 8
Slide 8 text
FEATURES
➤ Type annotations
➤ Interfaces
➤ Classes, inheritance and access levels
➤ Generics
➤ Enums
➤ Modules
➤ ECMAScript features
➤ Many more
Slide 9
Slide 9 text
RECENT HYPE
➤ TS has received a lot of hype due to the announcement that
Angular 2 will be implemented in TS in March 2015
CoffeeScript
TypeScript
Slide 10
Slide 10 text
WHY USE IT?
Slide 11
Slide 11 text
TYPES ARE HELPFUL
TS compiler validates your code and
helps you avoid bugs.
Slide 12
Slide 12 text
TS IS DESCRIPTIVE
Interfaces and classes are excellent
for describing contracts.
Slide 13
Slide 13 text
IDE SUPPORT
Support of most of the major IDEs
makes code navigation and
refactoring much easier.
Slide 14
Slide 14 text
ECMASCRIPT COMPATIBILITY
TS aims at supporting the most of
the new ES features.
Slide 15
Slide 15 text
EASY START AND GRADUAL MIGRATION
TS can compile JS as well, which
means that you can leave your JS
code base as is and gradually migrate
to TS.
Slide 16
Slide 16 text
SUPPORTS REACT AND JSX
TS 1.8 announced JSX support
which means it can be effectively
used for React development. If
you’re into these sort of things.
Slide 17
Slide 17 text
AMAZING!
HOW DO I
START?
Slide 18
Slide 18 text
INSTALLATION AND CLI INTERFACE
TS can be installed by running
npm i typescript -g
To compile a file, run the compiler CLI interface:
tsc hello.ts
The compiler can be configured using tsconfig.json.
Slide 19
Slide 19 text
WHAT ABOUT MY FAVOURITE BUILD TOOL?
There are plugins available for Grunt, Gulp, Browserify and
WebPack.
Slide 20
Slide 20 text
LET’S GET TO
THE CODE
Slide 21
Slide 21 text
BASIC EXAMPLE
let size: number = 3;
let person: string = "Marco"
let integers: Array = [1, 2, 3];
let elem: HTMLElement =
document.getElementById('my-elem');
size = "Polo"; // Type 'string' is not assignable to type
'number'.
Slide 22
Slide 22 text
SPECIAL "ANY" TYPE WILL ALLOW ALL KINDS OF VALUES
let foo: any;
foo = 2;
foo = 'Paris';
foo = [1, 2, 3];
Slide 23
Slide 23 text
COMPLEX TYPES CAN BE DEFINED INLINE
let user: {
name: string;
age: number;
address: {
city: string;
country: string;
};
}
user = { name: "Marco", age: 20} // Property 'address' is missing
in type '{ name: string; age: number; }'.
Slide 24
Slide 24 text
PROPERTIES CAN BE OPTIONAL IF FOLLOWED BY "?"
let user: {
name: string;
age: number;
address?: {
city: string;
country: string;
};
}
user = { name: "Marco", age: 20} // Address can be omitted
Slide 25
Slide 25 text
PARAMETERS AND RETURN VALUES
function getFullName(name: string, lastname:
string): string {
return name + ' ' + lastname;
}
function getFullName(user: {name: string, lastname:
string}): string {
return user.name + ' ' + user.lastname;
}
Slide 26
Slide 26 text
FUNCTION TYPES
function ajax(url: string, callback: (data:
AjaxResponse) => any) {
// ajax logic here
}
ajax('http://api.com', (data: AjaxResponse) => {
// handle ajax request here
});
Slide 27
Slide 27 text
TYPE INFERENCE
function getSize() {
return 3;
}
let size = getSize();
size = "Polo"; // Type 'string' is not assignable to
type 'number'.
Slide 28
Slide 28 text
BUT DOES IT
HAVE
INTERFACES?
Slide 29
Slide 29 text
YES, IT DOES
interface User {
name: string;
age: number;
address: Address;
}
interface Address {
city: string;
country: string;
}
let user: User;
Slide 30
Slide 30 text
THEY CAN DEFINE METHODS AS WELL
interface User {
name: string;
age: number;
address: Address;
getFullName(): string;
getYearOfBirth(): number;
}
Slide 31
Slide 31 text
MUCHO IMPORTANTE
Interfaces, similar to other types,
don’t generate any JS code. They
only appear at compilation time.
Slide 32
Slide 32 text
INTERFACES ARE STRUCTURE TYPED
interface Person {
name: string;
}
interface Pet {
name: string;
}
let myDog: Pet = { name: 'Schmittens' };
let aPerson: Person = myDog; // All good here
Slide 33
Slide 33 text
THERE’S A SLIGHT CATCH
interface Person {
name: string;
lastname?: string;
}
let user: Person = { name: 'Pedro', surname:
'Gonzales' } // Object literal may only specify
known properties, and 'surname' does not exist
in type 'Person'.
Slide 34
Slide 34 text
TYPE ASSERTIONS
interface Person {
name: string;
lastname?: string;
}
let user: Person = { name: 'Pedro', surname: 'Gonzales'
} as Person // we’re sure that Pedro is a person
let user: Person = { name: 'Pedro',
surname: 'Gonzales' };
Slide 35
Slide 35 text
INTERFACES CAN DESCRIBE FUNCTIONS
interface AjaxCallback {
(data: AjaxResponse): any;
}
function ajax(url: string, callback: AjaxCallback) {
// ajax logic here
}
ajax('http://api.com', (data: AjaxResponse) => {
// handle ajax request here
});
OF COURSE
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
greet() {
return 'Hi, my name is ' + this.name;
}
}
const user = new Person('Rob');
user.greet(); // Hi, my name is Rob
Slide 40
Slide 40 text
WHAT’S UNDER THE HOOD?
var Person = (function () {
function Person(name) {
this.name = name;
}
Person.prototype.greet = function () {
return 'Hi, my name is ' + this.name;
};
return Person;
}());
var user = new Person('Rob');
user.greet(); // Hi, my name is Rob
Slide 41
Slide 41 text
CLASSES CAN EXTEND OTHER CLASSES
class ImportantPerson extends Person {
title: string;
constructor(name: string, title: string) {
super(name);
this.title = title;
}
greet() {
return 'You may address me as ' + this.title + ' ' + this.name;
}
}
const importantUser = new ImportantPerson('Von Hammerschmidt', 'Duke');
importantUser.greet(); // You may address me as Duke Von Hammerschmidt
Slide 42
Slide 42 text
PUBLIC, PRIVATE AND PROTECTED
class Person {
title: string; // public by default
protected name: string;
private lastname: string;
}
const user = new Person();
user.title = 'Mr';
user.name = 'Rob'; // Property 'name' is protected and only accessible
within class 'Person' and its subclasses.
user.lastname = 'Willson'; // Property 'lastname' is private and only
accessible within class 'Person'.
Slide 43
Slide 43 text
MUCHO IMPORTANTE
Properties have access levels only
during compilation. They are in no
way protected at runtime.
Slide 44
Slide 44 text
CLASSES CAN BE DEFINED AS ABSTRACT
abstract class Person {
abstract greet(): string;
}
const user = new Person(); // Cannot create an
instance of the abstract class 'Person'.
Slide 45
Slide 45 text
WHAT ELSE
SHOULD I
KNOW
ABOUT?
Slide 46
Slide 46 text
ENABLE SOURCE MAP SUPPORT
Compiling your code with source
map support will allow you to see TS
sources in the debug console.
Similar to Babel or Less.
Slide 47
Slide 47 text
SET UP TSLINT
TSLint is the TS alternative to
ESLint. It can your sources for code
styling as well as potential errors.
Slide 48
Slide 48 text
GENERATE AND SHIP TYPINGS
If you plan to reuse your code in
other TS applications, be sure to
ship typing files together with JS
sources. That way other project can
embed them in their TS code.
Slide 49
Slide 49 text
USING JS LIBRARIES WITH TS
The DefinitelyTyped.org project aims
at providing typings for a number of
popular libraries. Typings can be
installed into your project similarly
to npm packages.
Slide 50
Slide 50 text
WHERE DO I
GO FROM
HERE?
Slide 51
Slide 51 text
OFFICIAL WEBSITE AND DOCUMENTATION
Documentation and some examples
can be found at typescriptlang.org.
Slide 52
Slide 52 text
PLAYGROUND
An interactive and highly educational
playground page can be found at
https://www.typescriptlang.org/
play/index.html