Type script for_java_dev_jul_2020

TypeScript for
Java Developers
Yakov Fain 
yfain

@yfain
About myself
• Work for Farata Systems
• Blogging at yakovfain.com
• Youtube channel “Карьера в ИТ”
Use the discount code  
tstsquick 
at manning.com

@yfain
What’s TypeScript
• It’s a programming language that compiles to JavaScript
• It’s JavaScript + types + great IDE support
• It’s about catching errors during compile-time
• It’a superset of JavaScript

@yfain
StackOverﬂow Dev Survey 2020
Programming, Scripting, and Markup Languages

@yfain
StackOverﬂow Dev Survey 2020
Most loved

@yfain
let customerId = "A15BN"; // OK, customerId is a string
customerId = 123; // OK, from now on it's a number
JavaScript

@yfain
let customerId = "A15BN"; // OK, customerId is a string
customerId = 123; // OK, from now on it's a number
JavaScript
let customerId: string; // OK, customerId is a string
customerId = 123; // Compile-time error
TypeScript

@yfain
The Pythagorean Theorem
function distance(pointА, pointB) {
return Math.sqrt(
(pointА.x - pointB.x) ** 2 +
(pointА.y - pointB.y) ** 2);
}
console.log(distance({ z: 3, y: -4 }, {x:6, y:0}));
Playground: https://bit.ly/2vMUHKH
Anything wrong with this code?

@yfain
tsc compilation options
• All options are listed at https://bit.ly/1UYGHFp  
• For example, you can use the option target: 
 
tsc main --target es5
• Alternative: create a ﬁle named tsconﬁg.json and specify
all compilation options there; then simply run 
 
tsc

@yfain
Sample tsconﬁg.json
{
"compilerOptions": {
"outDir": "./dist",
"noEmitOnError": true,
"target": "es5"
}
}
tsc -init will generate tsconﬁg.json

TypeScript and IDEs
• Visual Studio Code (free)
• IntelliJ IDEA or WebStorm
• Sublime Text with TypeScript plugin
• Eclipse with TypeScript plugin

Installing the TypeScript compiler
1.Install Node.js from nodejs.org 
2.Install TypeScript compiler globally: 
 
npm i typescript -g

Installing the TypeScript compiler
1.Install Node.js from nodejs.org 
2.Install TypeScript compiler globally: 
 
npm i typescript -g 
npm in JavaScript is like Maven in Java 
 
npmjs.org is like maven central

let myName:string;
myName = "Yakov Fain";
console.log(`Hello ${myName}`);
tsc --t es5 hello.ts
1. Create a new ﬁle hello.ts
2. Compile hello.ts to hello.js (the ES5 ﬂavor)
Compiling a script

Fat arrow functions 
(similar to Java lambdas)

Fat arrow functions
Fat arrow function:
Anonymous function:

Fat arrow functions make
the meaning of the this
pointer predictable.

TypeScript Classes
and Inheritance

A class with constructor:take 1

A class with constructor: take 2

Inheritance
Classical syntax Prototypal

@yfain
Structural vs nominal type systems
• An object or class has a name and some structure
• In nominal type systems (e.g. Java), two types are the same
if they have the same names
• In structural type systems, two types are the same if they
have the similar structures.

@yfain
If it looks like a duck, swims like a
duck, and quacks like a duck, then it
probably is a duck

@yfain
class Person {
String name;
}
class Customer {
String name;
}
Customer cust = new Person(); // error
Java (nominal type system)

@yfain
class Person {
name: string;
}
class Customer {
name: string;
}
const cust: Customer = new Person(); // no errors
TypeScript (structural type system)

@yfain
class Person {
name: String;
}
class Customer {
name: String;
}
const cust: Customer = { name: 'Mary' };
const pers: Person = { name: 'John' };
Compatible types

@yfain
class Person {
name: String;
age: number;
}
class Customer {
name: String;
}
const cust: Customer = new Person(); // no errors
When classes are not the same

@yfain
class Person {
name: string;
}
class Customer {
name: string;
age: number;
}
const cust: Customer = new Person(); // error
When classes are not the same

Generics
Generics allow using parameterized types

Generics
No Errors - TypeScript uses structural typing,  
while Java uses the nominal one.

Interfaces as custom types
No interfaces
here

A class implements a class
class ProductService {
saveProduct(productID:number): void{
// TODO: implement here
}
}
class MockProductService implements ProductService{
saveProduct(productId: number):void{
}
}

TypeScript Decorators 
(think Java annotations)

What’s a Decorator?
• Decorator is a function with metadata about a
class, property, method or a parameter
• Decorators start with the @-sign, e.g.
@Component

A sample Angular component with
decorators
@Component({
selector: 'order-processor',
template: `
Buying {{quantity}} shares}
`
})
export class OrderComponent {
@Input() quantity: number;
}

Links
• My TypeScript video lessons and more: 
https://www.youtube.com/c/YakovFain/playlists
• My blog: 
yakovfain.com
• TypeScript docs and playground 
https://www.typescriptlang.org/

Type script for_java_dev_jul_2020

More Related Content

What's hot

Similar to Type script for_java_dev_jul_2020

More from Yakov Fain

Recently uploaded

Type script for_java_dev_jul_2020