Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to TypeScript

Introduction to TypeScript

TypeScript: a promising technology that brings the power of strict typing into JavaScript. This session will include a brief introduction and a walkthrough of all the main features of TS followed by a practical workshop where we'll set up a simple frontend project.

GDG Riga

April 30, 2016
Tweet

More Decks by GDG Riga

Other Decks in Programming

Transcript

  1. WHAT’S IT FOR? Its main goal is to simplify the

    development and maintenance of large scale JS applications.
  2. 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
  3. FEATURES ➤ Type annotations ➤ Interfaces ➤ Classes, inheritance and

    access levels ➤ Generics ➤ Enums ➤ Modules ➤ ECMAScript features ➤ Many more
  4. 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
  5. IDE SUPPORT Support of most of the major IDEs makes

    code navigation and refactoring much easier.
  6. 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.
  7. 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.
  8. 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.
  9. WHAT ABOUT MY FAVOURITE BUILD TOOL? There are plugins available

    for Grunt, Gulp, Browserify and WebPack.
  10. BASIC EXAMPLE let size: number = 3; let person: string

    = "Marco" let integers: Array<number> = [1, 2, 3]; let elem: HTMLElement = document.getElementById('my-elem'); size = "Polo"; // Type 'string' is not assignable to type 'number'.
  11. SPECIAL "ANY" TYPE WILL ALLOW ALL KINDS OF VALUES let

    foo: any; foo = 2; foo = 'Paris'; foo = [1, 2, 3];
  12. 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; }'.
  13. 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
  14. 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; }
  15. FUNCTION TYPES function ajax(url: string, callback: (data: AjaxResponse) => any)

    { // ajax logic here } ajax('http://api.com', (data: AjaxResponse) => { // handle ajax request here });
  16. TYPE INFERENCE function getSize() { return 3; } let size

    = getSize(); size = "Polo"; // Type 'string' is not assignable to type 'number'.
  17. YES, IT DOES interface User { name: string; age: number;

    address: Address; } interface Address { city: string; country: string; } let user: User;
  18. THEY CAN DEFINE METHODS AS WELL interface User { name:

    string; age: number; address: Address; getFullName(): string; getYearOfBirth(): number; }
  19. MUCHO IMPORTANTE Interfaces, similar to other types, don’t generate any

    JS code. They only appear at compilation time.
  20. INTERFACES ARE STRUCTURE TYPED interface Person { name: string; }

    interface Pet { name: string; } let myDog: Pet = { name: 'Schmittens' }; let aPerson: Person = myDog; // All good here
  21. 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'.
  22. 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 = <Person> { name: 'Pedro', surname: 'Gonzales' };
  23. 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 });
  24. HYBRID TYPES interface Translator { (string): string; language: string; }

    let translate: Translator = getTranslator(); translate.language = 'Spanish'; translate('Hello');
  25. 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
  26. 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
  27. 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
  28. 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'.
  29. 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'.
  30. 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.
  31. SET UP TSLINT TSLint is the TS alternative to ESLint.

    It can your sources for code styling as well as potential errors.
  32. 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.
  33. 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.
  34. PLAYGROUND An interactive and highly educational playground page can be

    found at https://www.typescriptlang.org/ play/index.html