Enviar pesquisa
Carregar
Typescript tips & tricks
•
Transferir como PPTX, PDF
•
1 gostou
•
1,052 visualizações
O
Ori Calvo
Seguir
Good to know details about Typescript 2.X
Leia menos
Leia mais
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 35
Baixar agora
Recomendados
002. Introducere in type script
002. Introducere in type script
Dmitrii Stoian
All You Need to Know About Type Script
All You Need to Know About Type Script
Folio3 Software
TypeScript 2 in action
TypeScript 2 in action
Alexander Rusakov
Google Dart
Google Dart
Eberhard Wolff
JavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
Type script - advanced usage and practices
Type script - advanced usage and practices
Iwan van der Kleijn
TypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation Guide
Nascenia IT
Why TypeScript?
Why TypeScript?
FITC
Recomendados
002. Introducere in type script
002. Introducere in type script
Dmitrii Stoian
All You Need to Know About Type Script
All You Need to Know About Type Script
Folio3 Software
TypeScript 2 in action
TypeScript 2 in action
Alexander Rusakov
Google Dart
Google Dart
Eberhard Wolff
JavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
Type script - advanced usage and practices
Type script - advanced usage and practices
Iwan van der Kleijn
TypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation Guide
Nascenia IT
Why TypeScript?
Why TypeScript?
FITC
A Deeper look into Javascript Basics
A Deeper look into Javascript Basics
Mindfire Solutions
TypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the pain
Sander Mak (@Sander_Mak)
TypeScript introduction to scalable javascript application
TypeScript introduction to scalable javascript application
Andrea Paciolla
JavaScript Basics
JavaScript Basics
Mats Bryntse
Introduction to Javascript
Introduction to Javascript
Amit Tyagi
Type script, for dummies
Type script, for dummies
santiagoaguiar
JavaScript 101
JavaScript 101
ygv2000
Introduction to Dart
Introduction to Dart
Ramesh Nair
JavaScript Basics and Best Practices - CC FE & UX
JavaScript Basics and Best Practices - CC FE & UX
JWORKS powered by Ordina
Basics of JavaScript
Basics of JavaScript
Bala Narayanan
Javascript session 01 - Introduction to Javascript
Javascript session 01 - Introduction to Javascript
Livingston Samuel
Typescript: enjoying large scale browser development
Typescript: enjoying large scale browser development
Joost de Vries
Javascript Basics
Javascript Basics
msemenistyi
A Re-Introduction to JavaScript
A Re-Introduction to JavaScript
Simon Willison
Lecture 5 javascript
Lecture 5 javascript
Mujtaba Haider
Javascript
Javascript
Aditya Gaur
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
Hassan Ahmed Baig - Web Developer
JavaScript Programming
JavaScript Programming
Sehwan Noh
BarcelonaJUG2016: walkmod: how to run and design code transformations
BarcelonaJUG2016: walkmod: how to run and design code transformations
walkmod
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
Aaron Gustafson
TypeScript Introduction
TypeScript Introduction
Dmitry Sheiko
TypeScript Seminar
TypeScript Seminar
Haim Michael
Mais conteúdo relacionado
Mais procurados
A Deeper look into Javascript Basics
A Deeper look into Javascript Basics
Mindfire Solutions
TypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the pain
Sander Mak (@Sander_Mak)
TypeScript introduction to scalable javascript application
TypeScript introduction to scalable javascript application
Andrea Paciolla
JavaScript Basics
JavaScript Basics
Mats Bryntse
Introduction to Javascript
Introduction to Javascript
Amit Tyagi
Type script, for dummies
Type script, for dummies
santiagoaguiar
JavaScript 101
JavaScript 101
ygv2000
Introduction to Dart
Introduction to Dart
Ramesh Nair
JavaScript Basics and Best Practices - CC FE & UX
JavaScript Basics and Best Practices - CC FE & UX
JWORKS powered by Ordina
Basics of JavaScript
Basics of JavaScript
Bala Narayanan
Javascript session 01 - Introduction to Javascript
Javascript session 01 - Introduction to Javascript
Livingston Samuel
Typescript: enjoying large scale browser development
Typescript: enjoying large scale browser development
Joost de Vries
Javascript Basics
Javascript Basics
msemenistyi
A Re-Introduction to JavaScript
A Re-Introduction to JavaScript
Simon Willison
Lecture 5 javascript
Lecture 5 javascript
Mujtaba Haider
Javascript
Javascript
Aditya Gaur
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
Hassan Ahmed Baig - Web Developer
JavaScript Programming
JavaScript Programming
Sehwan Noh
BarcelonaJUG2016: walkmod: how to run and design code transformations
BarcelonaJUG2016: walkmod: how to run and design code transformations
walkmod
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
Aaron Gustafson
Mais procurados
(20)
A Deeper look into Javascript Basics
A Deeper look into Javascript Basics
TypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the pain
TypeScript introduction to scalable javascript application
TypeScript introduction to scalable javascript application
JavaScript Basics
JavaScript Basics
Introduction to Javascript
Introduction to Javascript
Type script, for dummies
Type script, for dummies
JavaScript 101
JavaScript 101
Introduction to Dart
Introduction to Dart
JavaScript Basics and Best Practices - CC FE & UX
JavaScript Basics and Best Practices - CC FE & UX
Basics of JavaScript
Basics of JavaScript
Javascript session 01 - Introduction to Javascript
Javascript session 01 - Introduction to Javascript
Typescript: enjoying large scale browser development
Typescript: enjoying large scale browser development
Javascript Basics
Javascript Basics
A Re-Introduction to JavaScript
A Re-Introduction to JavaScript
Lecture 5 javascript
Lecture 5 javascript
Javascript
Javascript
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
JavaScript Programming
JavaScript Programming
BarcelonaJUG2016: walkmod: how to run and design code transformations
BarcelonaJUG2016: walkmod: how to run and design code transformations
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
Destaque
TypeScript Introduction
TypeScript Introduction
Dmitry Sheiko
TypeScript Seminar
TypeScript Seminar
Haim Michael
TypeScript
TypeScript
GetDev.NET
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
Micael Gallego
Angular 2 - Typescript
Angular 2 - Typescript
Nathan Krasney
Power Leveling your TypeScript
Power Leveling your TypeScript
Offirmo
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
Ontico
Typescript Fundamentals
Typescript Fundamentals
Sunny Sharma
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
MoscowJS
TypeScript
TypeScript
Udaiappa Ramachandran
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
MoscowJS
TypeScript - Silver Bullet for the Full-stack Developers
TypeScript - Silver Bullet for the Full-stack Developers
Rutenis Turcinas
Typescript
Typescript
Nikhil Thomas
TypeScript Overview
TypeScript Overview
Aniruddha Chakrabarti
Introducing type script
Introducing type script
Remo Jansen
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
Laurent Duveau
TypeScript - An Introduction
TypeScript - An Introduction
NexThoughts Technologies
TypeScript for Java Developers
TypeScript for Java Developers
Yakov Fain
TypeScript Presentation
TypeScript Presentation
Patrick John Pacaña
Typescript ppt
Typescript ppt
akhilsreyas
Destaque
(20)
TypeScript Introduction
TypeScript Introduction
TypeScript Seminar
TypeScript Seminar
TypeScript
TypeScript
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
Angular 2 - Typescript
Angular 2 - Typescript
Power Leveling your TypeScript
Power Leveling your TypeScript
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
Typescript Fundamentals
Typescript Fundamentals
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
TypeScript
TypeScript
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
TypeScript - Silver Bullet for the Full-stack Developers
TypeScript - Silver Bullet for the Full-stack Developers
Typescript
Typescript
TypeScript Overview
TypeScript Overview
Introducing type script
Introducing type script
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
TypeScript - An Introduction
TypeScript - An Introduction
TypeScript for Java Developers
TypeScript for Java Developers
TypeScript Presentation
TypeScript Presentation
Typescript ppt
Typescript ppt
Semelhante a Typescript tips & tricks
Introduction to the New Asynchronous API in the .NET Driver
Introduction to the New Asynchronous API in the .NET Driver
MongoDB
Typescript language extension of java script
Typescript language extension of java script
michaelaaron25322
Let's migrate to Swift 3.0
Let's migrate to Swift 3.0
CocoaHeads France
Better Open Source Enterprise C++ Web Services
Better Open Source Enterprise C++ Web Services
WSO2
Objective c intro (1)
Objective c intro (1)
David Echeverria
The First C# Project Analyzed
The First C# Project Analyzed
PVS-Studio
Let's play with adf 3.0
Let's play with adf 3.0
Eugenio Romano
Of complicacy of programming, or won't C# save us?
Of complicacy of programming, or won't C# save us?
PVS-Studio
C# 6.0
C# 6.0
Paul Graham
Front End Development: The Important Parts
Front End Development: The Important Parts
Sergey Bolshchikov
CodeMash - Building Rich Apps with Groovy SwingBuilder
CodeMash - Building Rich Apps with Groovy SwingBuilder
Andres Almiray
.gradle 파일 정독해보기
.gradle 파일 정독해보기
경주 전
Day 1
Day 1
Pat Zearfoss
Parse cloud code
Parse cloud code
維佋 唐
Java script Techniques Part I
Java script Techniques Part I
Luis Atencio
A New Chapter of Data Processing with CDK
A New Chapter of Data Processing with CDK
Shu-Jeng Hsieh
Cocoa for Web Developers
Cocoa for Web Developers
georgebrock
How to create an Angular builder
How to create an Angular builder
Maurizio Vitale
Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018
Loiane Groner
Smoothing Your Java with DSLs
Smoothing Your Java with DSLs
intelliyole
Semelhante a Typescript tips & tricks
(20)
Introduction to the New Asynchronous API in the .NET Driver
Introduction to the New Asynchronous API in the .NET Driver
Typescript language extension of java script
Typescript language extension of java script
Let's migrate to Swift 3.0
Let's migrate to Swift 3.0
Better Open Source Enterprise C++ Web Services
Better Open Source Enterprise C++ Web Services
Objective c intro (1)
Objective c intro (1)
The First C# Project Analyzed
The First C# Project Analyzed
Let's play with adf 3.0
Let's play with adf 3.0
Of complicacy of programming, or won't C# save us?
Of complicacy of programming, or won't C# save us?
C# 6.0
C# 6.0
Front End Development: The Important Parts
Front End Development: The Important Parts
CodeMash - Building Rich Apps with Groovy SwingBuilder
CodeMash - Building Rich Apps with Groovy SwingBuilder
.gradle 파일 정독해보기
.gradle 파일 정독해보기
Day 1
Day 1
Parse cloud code
Parse cloud code
Java script Techniques Part I
Java script Techniques Part I
A New Chapter of Data Processing with CDK
A New Chapter of Data Processing with CDK
Cocoa for Web Developers
Cocoa for Web Developers
How to create an Angular builder
How to create an Angular builder
Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018
Smoothing Your Java with DSLs
Smoothing Your Java with DSLs
Último
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
masabamasaba
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
masabamasaba
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
SelfMade bd
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
masabamasaba
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
kalichargn70th171
Generic or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisions
Bert Jan Schrijver
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
masabamasaba
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
VishalKumarJha10
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
VictorSzoltysek
Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...
Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...
Nitya salvi
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
masabamasaba
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
Delhi Call girls
Software Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
Arshad QA
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
masabamasaba
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK Software
Jim McKeeth
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
panagenda
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
ayushiqss
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
masabamasaba
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
Jhone kinadey
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Health
Último
(20)
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
Generic or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisions
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...
Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
Software Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK Software
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Typescript tips & tricks
1.
TYPESCRIPT TIPS & TRICKS Ori
Calvo, 2017 oric@trainologic.com https://trainologic.com
2.
2 Objectives © 2017 Ori
Calvo 2 Cover all the “good to know” details about Typescript This is not an introduction session
3.
3 The Challenge © 2017
Ori Calvo 3 Write today modern JavaScript code Even before browsers support that Solution: Compiler ESX ES5 Alternatives Typescript Babel CoffeeScript Traceur
4.
4 Getting Started © 2017
Ori Calvo 4 npm install typescript Write some Typescript code Compile it with node_modules/.bin/tsc Run the generated JavaScript Use source map to debug the TypeScript
5.
5 Good to Know ©
2017 Ori Calvo 5 Partial typeDecoratorsBarrelHow does import/export work Down-level support for async/await Down-level generator support User defined type guard union/intersecti on type String EnumsCreate NPM package --initstrictNullChecksstrict master option Generic parameter defaultModule augmentations --declarationTyped map using object object typeMixincheckJs & allowJs noImplicitAnyUntyped importstslibObject spread & restkeyof Return value from ctor Configuration Inheritance --alwaysStrictType guardsNon null assertion nevertype of thisGlob Supportpaths--traceResolution Wildcard module name script vs. module--lib--noUnusedXXXWhy use target es5 with module es6 Trailing commas
6.
6 script vs. module ©
2017 Ori Calvo 6 Only files which use the import/export syntax are considered modules Other are considered “plain” scripts Module does not pollute the global scope Script does
7.
7 script vs. module ©
2017 Ori Calvo 7 Below code does not work Remove the export keyword and code compiles successfully export function xxx() { } interface Contact { id: number; name: string; } var x: Contact = { id: 1, name: "Ori", };
8.
8 import/export © 2017 Ori
Calvo 8 export function run() { console.log("run"); } import {run} from "./module1"; run(); import * as module1 from "./module1"; module1.run();
9.
9 import/export © 2017 Ori
Calvo 9 Part of ECMAScript 2015 No easy way to support under ES5 Must select a module “standard” amd commonjs umd es2015
10.
10 import/export © 2017 Ori
Calvo 10 Most browsers do not supports import/export Coming Chrome 62 will Therefore, must use a module loader Webpack Rollup Fusebox SystemJS
11.
11 Barrel © 2017 Ori
Calvo 11 Rollup exports from several modules into a single convenient module
12.
12 async/await © 2017 Ori
Calvo 12 function delay(ms) { return new Promise(function(resolve) { setTimeout(function() { resolve(); }, ms); }); } async function run() { await delay(500); console.log("AFTER"); }
13.
13 async/await © 2017 Ori
Calvo 13 Part of ECMAScript 2017 Allow for easier implementation of asynchronous functions Is supported for down-level browsers too Debugging is challanging
14.
14 Decorator © 2017 Ori
Calvo 14 Attach metadata to methods/classes Like C# attribute Java annotation Can intercept function invocation
15.
15 Decorator © 2017 Ori
Calvo 15 class Contact { @Profile() run() { console.log("run"); } } function Profile() { return function(target,propertyKey: string, descriptor: PropertyDescriptor) { const original = target[propertyKey]; target[propertyKey] = function() { console.log("BEFORE"); const retVal = original.apply(this, arguments); console.log("AFTER"); return retVal; } return target; } }
16.
16 Create NPM package ©
2017 Ori Calvo 16 Enable declaration option Use es2015 module settings Bundle all files into UMD format Rollup can help Add package.json main option inside package.json should point to the UMD bundle npm publish
17.
17 String Enums © 2017
Ori Calvo 17 Enums can now be of type string enum Color { red = "Red", green = "Green", blue = "Blue", } const c: Color = Color.red; var Color; (function (Color) { Color["red"] = "Red"; Color["green"] = "Green"; Color["blue"] = "Blue"; })(Color || (Color = {}));
18.
18 Union Type © 2017
Ori Calvo 18 Create a new type which one of the specified interface A { id: number, } interface B { name: string, } type C = A | B; const c1: C = { id: 1, }; const c2: C = { name: "Ori", };
19.
19 Intersection Type © 2017
Ori Calvo 19 Define new type which has properties of all the others interface A { id: number, } interface B { name: string, } type C = A & B; const c1: C = { id: 1, name: "Ori", };
20.
20 Object.assign © 2017 Ori
Calvo 20 Using previous syntax we can now define Object.assign in a type safe way interface ObjectConstructor { assign<T, U>(target: T, source: U): T & U; assign<T, U, V>(target: T, source1: U, source2: V): T & U & V; assign<T, U, V, W>(target: T, source1: U, source2: V, source3: W): T & U & V & W; }
21.
21 Type Guard © 2017
Ori Calvo 21 The following compiles successfully class A { } class B extends A { run() { } } function doSomething(a: A) { if(a instanceof B) { a.run(); } }
22.
22 Challenge © 2017 Ori
Calvo 22 However, the following does not compile successfullyclass A { } class B extends A { run() { } } function isB(a: A) { return a instanceof B; } function doSomething(a: A) { if(isB(a)) { a.run(); } } Property 'run' does not exist on type 'A'.
23.
23 User Type Guard ©
2017 Ori Calvo 23 We can fix that class A { } class B extends A { run() { } } function isB(a: A): a is B { return a instanceof B; } function doSomething(a: A) { if(isB(a)) { a.run(); } }
24.
24 Class Augmentation © 2017
Ori Calvo 24 An interface can extend existing class class A { run() { } } interface A { doSomething(); } function main() { const a = new A(); a.doSomething(); } main();
25.
25 Module Augmentation © 2017
Ori Calvo 25 Extend a class exported from a module export class A { run() { } } module1 import {A} from "./module1"; declare module "./module1" { interface A { doSomething(); } } function main() { const a = new A(); a.doSomething(); } Applicatio n code
26.
26 Null Checks © 2017
Ori Calvo 26 The following does compile successfully class A { run() { } } function run(a: A) { a.run(); } function main() { run(null); }
27.
27 --strictNullChecks © 2017 Ori
Calvo 27 If on (default is off), the compiler assume that any type is not assignable with null or undefined Now, the following code does not compile { "compilerOptions": { "strictNullChecks": true } } function main() { run(null); }
28.
28 Allow null © 2017
Ori Calvo 28 class A { run() { } } function run(a: A|null) { if(a) { a.run(); } } function main() { run(null); } Without the if the error “object is possibly null” is reported
29.
29 --allowJs © 2017 Ori
Calvo 29 Tells the Typescript compiler to allow import of a JS file The JS file will be verified But only for general syntax errors Type safe errors are not reported import/export will be converted to the specified module system
30.
30 --checkJs © 2017 Ori
Calvo 30 Tells Typescript compiler to verify Type checks as much as it can Sending parameters to a function Types are calculated based on initialization Can use JSDoc to annotate code with types For example, function g(/** @type{string} */ a) { a = 12; }
31.
31 Mixin © 2017 Ori
Calvo 31 Create a new class out of an existing one and add some “features” to it class A { constructor(name: string) { } } type Constructor<T> = new(...args: any[]) => T; function createClass<T extends Constructor<{}>>(Base: T, id) { return class extends Base { id: number = id; } } var B = createClass(A, 5); var b = new B("Ori"); console.log(b.id);
32.
32 Typed map using
object © 2017 Ori Calvo 32 class Point { constructor(private x: number, private y: number) { } } const map: {[key: string]: Point} = {}; map["abc"] = new Point(5, 10);
33.
33 keyof © 2017 Ori
Calvo 33 interface Person { id: number; } type K1 = keyof Person; // id function get<T, K extends keyof T>(obj: T, name: K): T[K] { return obj[name]; } var x: Person = {id:5}; get(x, "id");
34.
34 Partial © 2017 Ori
Calvo 34 interface Person { id: number; name: string; } type PartialPerson = Partial<Person>; const x: PartialPerson = { id: 1, };
35.
THANK YOU Ori Calvo,
2017 oric@trainologic.com https://trainologic.com
Baixar agora