Academy PRO: React JS. Typescript

React JSOleksandr Kovalov binary-studio.com

LecturesTypescript

ES 2015

React.js

Redux

Tooling

Typescript

History1983 - First Pascal compiler -> Turbo/Borland Pascal

1989-1996 - Chief Engineer at Borland

1996 - join Microsoft

since 2000 - lead architect of the team developing the language C#

2012 - new project TypeScript - a superset of JavaScript.Anders Hejlsberg

Additional features to ECMAScript 5Type annotations and compile-time type checking

Interfaces

Enumerated type

Mixin

Generic

Namespaces

Tuple

Await

Backported features from ECMAScript 2015Classes

Modules

Abbreviated "arrow" syntax for anonymous functions

Optional parameters and default parameters

How to start?npm install -g typescript

greeter.ts

tsc greeter.ts => greeter.js (es3/es5/es2015)

Basic TypesBoolean

Number

String

Array

Enum

Any

Void

Arrays

try it

https://www.typescriptlang.org/play/#src=var%20list%3A%20number%5B%5D%20%3D%20%5B10%2C%2020%2C%2030%5D%3B%0D%0Avar%20colors%3A%20string%5B%5D%20%3D%20%5B%22red%22%2C%20%22green%22%2C%20%22blue%22%5D%3B%0D%0Aconsole.log(list%5B0%5D)%3B%0D%0Aconsole.log(colors%5B1%5D)%3B

Tuples

try it

https://www.typescriptlang.org/play/#src=type%20IData%20%3D%20%5Bstring%2C%20number%2C%20number%5D%3B%0D%0Alet%20data%3A%20IData%3B%0D%0Adata%20%3D%20%5B'string'%2C%201%2C%202%5D

Enum

Values by default:

Custom values:

try it

https://www.typescriptlang.org/play/#src=enum%20Season%20%7B%20Winter%2C%20Spring%2C%20Summer%2C%20Autumn%20%7D%3B%0D%0Alet%20current%3A%20Season%20%3D%20Season.Summer%3B%0D%0Aconsole.log(current)%3B%0D%0A%0D%0Aenum%20customSeasons%20%7B%20Winter%3D10%2C%20Spring%3D20%2C%20Summer%3D30%2C%20Autumn%3D40%20%7D%3B%0D%0Alet%20custom%3A%20customSeasons%20%3D%20customSeasons.Summer%3B%0D%0Aconsole.log(custom)%3B

Any

try it

https://www.typescriptlang.org/play/#src=enum%20Season%20%7B%20Winter%2C%20Spring%2C%20Summer%2C%20Autumn%20%7D%3B%0D%0Alet%20current%3A%20Season%20%3D%20Season.Summer%3B%0D%0Aconsole.log(current)%3B%0D%0A%0D%0Aenum%20customSeasons%20%7B%20Winter%3D10%2C%20Spring%3D20%2C%20Summer%3D30%2C%20Autumn%3D40%20%7D%3B%0D%0Alet%20custom%3A%20customSeasons%20%3D%20customSeasons.Summer%3B%0D%0Aconsole.log(custom)%3B

Functions

Functions

try it

try it

https://www.typescriptlang.org/play/#src=function%20add(x%3A%20string%2C%20y%3A%20string)%3A%20string%3B%0D%0Afunction%20add(x%3A%20number%2C%20y%3A%20number)%3A%20number%3B%0D%0Afunction%20add(x%2C%20y)%3A%20any%20%7B%0D%0A%20%20%20%20return%20x%20%2B%20y%3B%0D%0A%7D%0D%0A%0D%0A

https://www.typescriptlang.org/play/#src=function%20add(x%3A%20string%20%7C%20number%2C%20y%3A%20string%20%7C%20number)%3A%20string%20%7C%20number%20%7B%0D%0A%20%20%20%20if%20(typeof%20x%20%3D%3D%3D%20%22string%22%20%26%26%20typeof%20y%20%3D%3D%3D%20%22string%22)%0D%0A%20%20%20%20%20%20%20%20return%20x%20%2B%20y%3B%0D%0A%20%20%20%20else%20if%20(typeof%20x%20%3D%3D%3D%20%22number%22%20%26%26%20typeof%20y%20%3D%3D%3D%20%22number%22)%0D%0A%20%20%20%20%20%20%20%20return%20x%20%2B%20y%3B%0D%0A%20%20%20%20else%0D%0A%20%20%20%20%20%20%20%20return%20%22undefined%22%3B%0D%0A%7D

Functions

try it

https://www.typescriptlang.org/play/#src=function%20getName1(firstName%3A%20string%2C%20lastName%3F%3A%20string)%20%7B%0D%0A%20%20%20%20if%20(lastName)%0D%0A%20%20%20%20%20%20%20%20return%20firstName%20%2B%20%22%20%22%20%2B%20lastName%3B%0D%0A%20%20%20%20else%0D%0A%20%20%20%20%20%20%20%20return%20firstName%3B%0D%0A%7D%0D%0A%0D%0Afunction%20getName2(firstName%3A%20string%2C%20lastName%3A%20string%3D%22Smith%22)%20%7B%20%20%0D%0A%20%20%20%20return%20firstName%20%2B%20%22%20%22%20%2B%20lastName%3B%0D%0A%7D

Generics

Classes

try it

https://www.typescriptlang.org/play/#src=class%20User%20%7B%0D%0A%20%0D%0A%20%20%20%20id%3A%20number%3B%0D%0A%20%20%20%20name%3A%20string%3B%0D%0A%20%20%20%20constructor(userId%3A%20number%2C%20userName%3A%20string)%20%7B%0D%0A%20%0D%0A%20%20%20%20%20%20%20%20this.id%20%3D%20userId%3B%0D%0A%20%20%20%20%20%20%20%20this.name%20%3D%20userName%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20getInfo()%3A%20string%20%7B%0D%0A%20%20%20%20%20%20%20%20return%20%22id%3A%22%20%2B%20this.id%20%2B%20%22%20name%3A%22%20%2B%20this.name%3B%0D%0A%20%20%20%20%7D%0D%0A%7D

Interfaces

try it

https://www.typescriptlang.org/play/#src=interface%20IUser%20%7B%0D%0A%20%20%20%20id%3A%20number%3B%0D%0A%20%20%20%20name%3A%20string%3B%0D%0A%7D%0D%0A%0D%0Alet%20user%3A%20IUser%3B%0D%0A

Interfaces

try it

https://www.typescriptlang.org/play/#src=interface%20ITax%20%7B%0D%0A%20%20%20%20taxpayerId%3A%20string%3B%0D%0A%20%20%20%20calculateTax()%3A%20number%3B%0D%0A%7D%0D%0A%0D%0Aclass%20IncomeTax%20implements%20ITax%20%7B%0D%0A%20%20%20%20taxpayerId%3A%20string%3B%0D%0A%20%20%20%20calculateTax()%3A%20number%20%7B%0D%0A%20%20%20%20%20%20%20%20return%2010000%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%0D%0Aclass%20ServiceTax%20implements%20ITax%20%7B%0D%0A%20%20%20%20taxpayerId%3A%20string%3B%0D%0A%20%20%20%20calculateTax()%3A%20number%20%7B%0D%0A%20%20%20%20%20%20%20%20return%202000%3B%0D%0A%20%20%20%20%7D%0D%0A%7D

Static

try it

https://www.typescriptlang.org/play/#src=class%20Operation%20%7B%0D%0A%20%0D%0A%20%20%20%20static%20PI%3A%20number%20%3D%203.14%3B%0D%0A%20%0D%0A%20%20%20%20static%20getSquare(radius%3A%20number)%3A%20number%20%7B%0D%0A%20%0D%0A%20%20%20%20%20%20%20%20return%20this.PI%20*%20radius%20*%20radius%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%0D%0Aconst%20result%20%3D%20Operation.getSquare(30)%3B

Access modifiers

try it

https://www.typescriptlang.org/play/#src=class%20User%20%7B%0D%0A%0D%0A%20%20%20%20private%20_name%3A%20string%3B%0D%0A%0D%0A%09public%20getName()%3A%20string%20%7B%0D%0A%09%09console.log(this._name)%3B%0D%0A%09%7D%0D%0A%09%0D%0A%09public%20setName(name%3A%20string)%20%7B%0D%0A%09%09this._name%20%3D%20name%3B%0D%0A%09%7D%0D%0A%7D%0D%0A%0D%0A%0D%0Alet%20user%3A%20User%20%3D%20new%20User()%3B%0D%0Auser.getName()%3B%0D%0Auser.setName(%22Adam%22)%3B%0D%0Auser.getName()%3B

Inheritance

try it

https://www.typescriptlang.org/play/#src=class%20User%20%7B%0D%0A%0D%0A%20%20%20%20name%3A%20string%3B%0D%0A%0D%0A%20%20%20%20constructor(userName%3A%20string)%7B%0D%0A%20%20%20%20%20%20%20%20this.name%20%3D%20userName%3B%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20getInfo()%3A%20void%20%7B%0D%0A%20%20%20%20%20%20%20%20console.log(%22Name%3A%20%22%20%2B%20this.name)%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%20%0D%0Aclass%20Employee%20extends%20User%20%7B%0D%0A%20%0D%0A%20%20%20%20company%3A%20string%3B%0D%0A%0D%0A%20%20%20%20constructor(employeeCompany%3A%20string%2C%20userName%3A%20string)%20%7B%0D%0A%20%20%20%20%20%20%20%09super(userName)%3B%0D%0A%09%09this.company%20%3D%20employeeCompany%3B%0D%0A%20%20%20%20%7D%0D%0A%20%0D%0A%20%20%20%20getInfo()%3A%20void%20%7B%0D%0A%20%20%20%20%20%20%20%20super.getInfo()%3B%0D%0A%20%20%20%20%20%20%20%20console.log(%22Company%3A%20%22%20%2B%20this.company)%3B%0D%0A%20%20%20%20%7D%0D%0A%7D

async/await

Modules

Declarations

Global libraries Single Complex Object

Triple-Slash Directives

typingsnpm install typings --global

*.ts -> *.jshttps://www.typescriptlang.org/play/index.html

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

Typescript Tools

Any questions?

Software

Academy PRO: React JS. Typescript