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.

Transcript

1. INTRODUCTION TO TYPESCRIPT Pavels Jelisejevs, C.T.Co 2016
2. ARE YOU ENJOYING JAVASCRIPT ?
3. SO WHAT IS TYPESCRIPT?
4. “ TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. -The Docs
5. IN OTHER WORDS TypeScript is JavaScript extended with ES syntax and Java- or C#- like typing system.
6. WHAT’S IT FOR? Its main goal is to simplify the development and maintenance of large scale JS applications.
7. 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
8. FEATURES ➤ Type annotations ➤ Interfaces ➤ Classes, inheritance and access levels ➤ Generics ➤ Enums ➤ Modules ➤ ECMAScript features ➤ Many more
9. 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
10. WHY USE IT?
11. TYPES ARE HELPFUL TS compiler validates your code and helps you avoid bugs.
12. TS IS DESCRIPTIVE Interfaces and classes are excellent for describing contracts.
13. IDE SUPPORT Support of most of the major IDEs makes code navigation and refactoring much easier.
14. ECMASCRIPT COMPATIBILITY TS aims at supporting the most of the new ES features.
15. 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.
16. 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.
17. AMAZING! HOW DO I START?
18. 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.
19. WHAT ABOUT MY FAVOURITE BUILD TOOL? There are plugins available for Grunt, Gulp, Browserify and WebPack.
20. LET’S GET TO THE CODE
21. 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'.
22. SPECIAL "ANY" TYPE WILL ALLOW ALL KINDS OF VALUES let foo: any; foo = 2; foo = 'Paris'; foo = [1, 2, 3];
23. 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; }'.
24. 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
25. 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; }
26. FUNCTION TYPES function ajax(url: string, callback: (data: AjaxResponse) => any) { // ajax logic here } ajax('http://api.com', (data: AjaxResponse) => { // handle ajax request here });
27. TYPE INFERENCE function getSize() { return 3; } let size = getSize(); size = "Polo"; // Type 'string' is not assignable to type 'number'.
28. BUT DOES IT HAVE INTERFACES?
29. YES, IT DOES interface User { name: string; age: number; address: Address; } interface Address { city: string; country: string; } let user: User;
30. THEY CAN DEFINE METHODS AS WELL interface User { name: string; age: number; address: Address; getFullName(): string; getYearOfBirth(): number; }
31. MUCHO IMPORTANTE Interfaces, similar to other types, don’t generate any JS code. They only appear at compilation time.
32. INTERFACES ARE STRUCTURE TYPED interface Person { name: string; } interface Pet { name: string; } let myDog: Pet = { name: 'Schmittens' }; let aPerson: Person = myDog; // All good here
33. 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'.
34. 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' };
35. 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 });
36. ARRAY TYPES interface HashMap { [key: string]: any; }
37. HYBRID TYPES interface Translator { (string): string; language: string; } let translate: Translator = getTranslator(); translate.language = 'Spanish'; translate('Hello');
38. AND WHAT ABOUT CLASSES?
39. 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
40. 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
41. 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
42. 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'.
43. MUCHO IMPORTANTE Properties have access levels only during compilation. They are in no way protected at runtime.
44. 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'.
45. WHAT ELSE SHOULD I KNOW ABOUT?
46. 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.
47. SET UP TSLINT TSLint is the TS alternative to ESLint. It can your sources for code styling as well as potential errors.
48. 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.
49. 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.
50. WHERE DO I GO FROM HERE?
51. OFFICIAL WEBSITE AND DOCUMENTATION Documentation and some examples can be found at typescriptlang.org.
52. PLAYGROUND An interactive and highly educational playground page can be found at https://www.typescriptlang.org/ play/index.html
53. DO YOU ENJOY TYPESCRIPT MORE?
54. ANY MORE QUESTIONS?