TypeScript for Java Developers

TypeScript for Java
Developers
Yakov Fain 
yfain

About myself
• Angular practice lead at Farata Systems
• Java Champion
• Co-authored the book 
“Angular 2 Development with TypeScript”

Getting started with
TypeScript

What’s TypeScript?
• An open source superset of JavaScript developed by Microsoft
• Compiles code into JavaScript of various ECMAScript ﬂavors
• Well supported by IDEs
• Ofﬁcial site: http://www.typescriptlang.org

Why use TypeScript?
• Optional static typing
• Supports the latest and evolving JavaScript features
• More productive than JavaScript
• Supports classes, interfaces, generics, annotations,  
public/private/protected access and more

Beneﬁts of the static typing

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.IInstall Node.js from https://nodejs.org 
2.Install TypeScript compiler globally: 
 
npm i typescript -g

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 simple script

Compiler’s options in tsconﬁg.json
{
"compilerOptions": {
"outDir": "./dist",
"baseUrl": "src",
"sourceMap": true,
"moduleResolution": "node",
"noEmitOnError": true,
"target": “es5",
"watch": true
}
}

How to run code samples
• Install Node.js from https://nodejs.org (use the recommended version)
• Clone or download the repository https://github.com/yfain/ts into any directory
• In the command window, change into this directory
• Install the project dependencies (TypeScript compiler) locally: 
npm install
• compile all code samples into the dist directory: 
npm run tsc
• To run a code sample (e.g. fatArrow.js): 
node dist/fatArrow.js

Fat arrow functions 
(similar to lambdas in Java)

Fat arrow functions
Fat arrow function:
Anonymous function:

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

Demo 
 
node dist/fatArrow.js

TypeScript Classes
and Inheritance

A class with constructor:take 1

A class with constructor: take 2

Inheritance
Classical syntax Prototypal

Generics
Generics allow using parameterized types

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

Demo
 
1. node dist/generics.ts
2. node dist/generics_comparable.ts

Interfaces as custom types
No interfaces
here

Demo
1. node dist/interface-as-type.ts
2. node dist/interface-implements 
3. node dist/implement-class.ts

Destructuring Objects in TypeScript

Using destructuring to get speciﬁc
object properties

Destructuring in practice
@Component({ 
selector: 'app', 
template: ` 
<input type="text" placeholder="Enter stock (e.g. AAPL)"
(change)="onInputEvent($event)"> 
<br/> 
` 
}) 
class AppComponent { 
stock:string; 
 
onInputEvent({target}):void{ 
this.stock=target.value; 
} 
}
Angular

The union type
function padLeft(value: string, padding: number | string ) {...}
Using a vertical bar specify the “either/or” type

The intersection type
Use an ampersand to combine types
interface IPerson {
firstName: string;
lastName: string;
age: number;
ssn?: string;
}
interface IEmployee{
title: string;
desk: string;
}
type TheWorker = IPerson & IEmployee;
let worker: TheWorker = {firstName:"John", lastName: "Smith", age:29,
title:"Manager", desk:"A1,234"};

From callbacks to promises
to async/await

Callbacks
(function getProductDetails() {
setTimeout(function () {
console.log('Getting customers');
console.log('Getting orders');
console.log('Getting products');
console.log('Getting product details')
}, 1000);
}, 1000);
}, 1000);
}, 1000);
})();

async/await
• await - wait until the async code completes
• async - declare a function as asynchronous
async function getCustomersOrders(){
try {
const customer = await getCustomers(); // no callbacks; no then
console.log(`Got customer ${customer}`);
const orders = await getOrders(customer);
console.log(orders);
} catch(err){
console.log(err);
}
}

Demo
 
node dist/async-await.js

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;
}

Creating your own class
decorators
function Whoami (target){
console.log(`You are: n ${target}`)
}
@Whoami
class Friend {
constructor(private name: string, private age: number){}
}

Using JavaScript libraries in the
TypeScript code

Type definition files
• Type definition files (*.d.ts) contain type declarations for
JavaScript libraries and frameworks
• *.d.ts files are used by IDE for autocomplete
• TypeScript static analyzer uses *.d.ts files to report errors

• npmjs.org has 3K+ *d.ts ﬁles
• https://www.npmjs.com/~types
• Install type deﬁnitions, e.g.: 
 
npm i @types/lodash --save-dev 
npm i @types/jquery --save-dev

export declare class QueryList<T> {
private _dirty;
private _results;
private _emitter;
readonly changes: Observable<any>;
readonly length: number;
readonly first: T;
readonly last: T;
/**
* See[Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
*/
map<U>(fn: (item: T, index: number, array: T[]) => U): U[];
/**
* See
* [Array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
*/
filter(fn: (item: T, index: number, array: T[]) => boolean): T[];
/**
* See [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
*/
find(fn: (item: T, index: number, array: T[]) => boolean): T | undefined;
/**
* See[Array.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
*/
reduce<U>(fn: (prevValue: U, curValue: T, curIndex: number, array: T[]) => U, init: U): U;
/**
* See [Array.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
*/
forEach(fn: (item: T, index: number, array: T[]) => void): void;
...
}
A sample type deﬁnitions ﬁle

JS libraries in TypeScript apps. Approach 1.
• Add the required library scripts and CSS to index.html: 
 
 
• Use the lib’s global variable in your TypeScript code:
Drawback: No TypeScript compiler’s errors; no autocomplete

• Install the library  
npm i jqueryui --save
• If the type definition file exists, install it 
npm i @types/jqueryui --save-dev
• In the Typescript code import this lib’s global object 
import $ from ‘jquery’;
• Add the required css to index.html
Benefits: TypeScript compiler’s errors; autocomplete

Create your own d.ts ﬁle
Beneﬁts: TypeScript compiler’s errors; autocomplete
function greeting(name) {
console.log("hello " + name);
}
hello.js
declare function greeting(name: string): void;
src/typings.d.ts
<script> src=“hello.js"></script>
index.html
app.component.ts

Demo
 
1. cd src/hello-world-ts-jquery 
2. npm i live-server -g 
 
3. live-server

Thank you!
• Training inquiries:  
training@faratasystems.com
• My blog: 
yakovfain.com

TypeScript for Java Developers

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to TypeScript for Java Developers (20)

More from Yakov Fain (20)

Recently uploaded (20)

TypeScript for Java Developers