Slide 1
Slide 1 text
@deepu105
#Devoxx2018
By Deepu K Sasidharan, XebiaLabs
November 13, 2018
TypeScript:
Why you should love it!
Slide 2
Slide 2 text
@deepu105
#Devoxx2018
About Me
Deepu K Sasidharan
Javascript advocate & OSS aficionado
Co-lead
Senior product developer
Robotics & Astronomy enthusiast
https://www.packtpub.com/application-development/full-stack-development-jhipster
Slide 3
Slide 3 text
@deepu105
#Devoxx2018
About XebiaLabs
Slide 4
Slide 4 text
@deepu105
#Devoxx2018
What about you?
How many of you are Java developers?
How many are web developers?
Who likes JavaScript? Who likes TypeScript better?
Are you a fan of:
Angular
React
Vue.js
Slide 5
Slide 5 text
@deepu105
#Devoxx2018
What about you?
Who attended my TypeScript deep-dive session yesterday?
Slide 6
Slide 6 text
Why many Java developers hate frontend
development?
Slide 7
Slide 7 text
@deepu105
#Devoxx2018
Frontend options 8 years ago
=
Slide 8
Slide 8 text
@deepu105
#Devoxx2018
The rise of MV* frameworks
Slide 9
Slide 9 text
@deepu105
#Devoxx2018
Slide 10
Slide 10 text
@deepu105
#Devoxx2018
“Yet Another Framework Syndrome”
Slide 11
Slide 11 text
How to make Java developers
like(love)
JavaScript
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
@deepu105
#Devoxx2018
What is TypeScript
A strict syntactical superset of JavaScript - upto ES2019(ES10)
JavaScript that scales
Optional static typing support
Transpiles to JavaScript
Maintained by Microsoft with major collaboration from Google
Great editor and IDE support
Slide 14
Slide 14 text
I hate transpiling my code, but if have to do
so I’ll do it with TypeScript
Slide 15
Slide 15 text
@deepu105
#Devoxx2018
Why TypeScript
Type safety and Type inference
Great IDE support
Easier refactoring
Better linting and error identification
Features from the Future
Much better code style in React and Angular
Slide 16
Slide 16 text
Getting started!
Slide 17
Slide 17 text
@deepu105
#Devoxx2018
Install TypeScript
npm install -g typescript
tsc -init
tsc -w
Slide 18
Slide 18 text
@deepu105
#Devoxx2018
Working with JS
allowJs: Allow javascript files to be compiled
checkJs: Report errors in .js files.
// @ts-nocheck
// @ts-check
Supports JSDoc syntax for type specification
Slide 19
Slide 19 text
Language features
Slide 20
Slide 20 text
@deepu105
#Devoxx2018
Basic types
Boolean -> const foo: boolean = true;
Number -> const foo: number = 10;
String -> const foo: string = ‘hello’;
Array -> const foo: string[] = [‘foo’, ‘bar’];
const foo: Array = [‘foo’, ‘bar’];
Slide 21
Slide 21 text
@deepu105
#Devoxx2018
Special types
Any -> const foo: any = { foo: 'bar' };
Object -> const foo: object = { foo: 'bar' };
Tuple -> const foo: [string, boolean] = ['foo', 10];
Void -> const foo: void = undefined;
Undefined -> const foo: undefined = undefined;
Null -> const foo: null = undefined;
Never -> function error(message: string): never {
throw new Error(message);
}
Slide 22
Slide 22 text
@deepu105
#Devoxx2018
Enum types
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
enum Color {Red = "RED", Green = "GREEN", Blue = "BLUE"}
let c: Color = Color.Green;
Slide 23
Slide 23 text
@deepu105
#Devoxx2018
Interfaces
interface Person {
name: string;
age: number;
address?: string;
sayHi: Function;
}
let deepu: Person = {
name: 'deepu',
age: 32,
sayHi: () => 'Hello there!'
}
Slide 24
Slide 24 text
@deepu105
#Devoxx2018
Function interfaces
interface AddFunction {
(a: number, b: number): number
}
const add: AddFunction = (a, b) => {
return a + b;
}
Slide 25
Slide 25 text
@deepu105
#Devoxx2018
Extending & implementing interfaces/classes
interface DevoxxAttendee extends Person {
isHip: boolean;
}
interface DevoxxAttendee extends You {
isHip: boolean;
}
Slide 26
Slide 26 text
@deepu105
#Devoxx2018
Class modifiers
class Greeter {
private greeting: string;
protected name: string = `greeter`;
readonly foo: string = `bar`;
constructor(message: string){
this.greeting = message
}
public greet(){
return `Hello ${this.greeting} from ${this.name}`;
}
}
Slide 27
Slide 27 text
@deepu105
#Devoxx2018
Static properties
class Greeter {
static greeter: string = `foo`;
private greeting: string;
constructor(message: string){
this.greeting = message
}
public greet(){
return `Hello ${this.greeting} from ${Greeter.greeter}`;
}
}
Slide 28
Slide 28 text
@deepu105
#Devoxx2018
Abstract classes
abstract class Greeter {
static greeter: string = `foo`;
private greeting: string;
constructor(message: string){
this.greeting = message
}
public greet(){
return `Hello ${this.greeting} from ${Greeter.greeter}`;
}
}
Slide 29
Slide 29 text
@deepu105
#Devoxx2018
Function overloading
function add(x: string, y: string): string;
function add(x: number, y: number): number;
function add(x: any, y: any): any {
if (typeof x == 'string' && typeof y == 'string') {
return `${x}:${y}`;
} else {
return x + y;
}
}
add(10, 10);
add('10', '10');
Slide 30
Slide 30 text
@deepu105
#Devoxx2018
Generics
class Greeter {
private greeting: T;
constructor(message: T){
this.greeting = message
}
public greet(){
return `Hello ${this.greeting}`;
}
}
const greeter = new Greeter('world');
const greeter2 = new Greeter(10);
Slide 31
Slide 31 text
@deepu105
#Devoxx2018
Decorators
Methods
Classes
Properties
Parameters
Accessor
Slide 32
Slide 32 text
@deepu105
#Devoxx2018
Decorators
@sealed
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
@log
greet() {
return "Hello, " + this.greeting;
}
}
Slide 33
Slide 33 text
@deepu105
#Devoxx2018
Mixins
class Runner {
speed = 0;
run(distance: number) {
return distance / this.speed;
}
}
class Person implements Runner {
speed = 0;
setSpeed(speed: number) {
this.speed = speed;
}
run(distance: number): number {
return 0;
}
}
applyMixins(Person, [Runner]);
Slide 34
Slide 34 text
Very good type inference
Slide 35
Slide 35 text
Advanced types
Slide 36
Slide 36 text
@deepu105
#Devoxx2018
Literal types
type Color = "red" | "blue" | "green";
type Binary = 1 | 0;
Slide 37
Slide 37 text
@deepu105
#Devoxx2018
Intersection & Union types
interface Runner {
speed: number;
run(distance: number): number;
}
interface Swimmer {
speed: number;
swim(distance: number): number;
}
type Person = Runner & Swimmer
type Person = Runner | Swimmer
Slide 38
Slide 38 text
@deepu105
#Devoxx2018
Type guards
function isSwimmer(person: Runner | Swimmer): person is Swimmer {
return (person).swim !== undefined;
}
function isRunner(person: Runner | Swimmer): person is Runner {
return (person).run !== undefined;
}
if (isSwimmer(person)) {
person.swim(10)
}
if (isRunner(person)) {
person.run(10)
}
Slide 39
Slide 39 text
@deepu105
#Devoxx2018
Mapped types
type Readonly = {
readonly [P in keyof T]: T[P];
}
type Partial = {
[P in keyof T]?: T[P];
}
type PersonPartial = Partial;
type ReadonlyPerson = Readonly;
Slide 40
Slide 40 text
@deepu105
#Devoxx2018
Type alias
type GreeterAlias = Greeter
type StringTuple2 = [string, string]
Slide 41
Slide 41 text
@deepu105
#Devoxx2018
Index types
function pluck(o: T, names: K[]): T[K][] {
return names.map(n => o[n]);
}
interface Person {
name: string;
age: number;
}
let person: Person = {
name: 'Jarid',
age: 35
};
let strings: string[] = pluck(person, ['name']);
Slide 42
Slide 42 text
Kickstarting Angular, Vue or React
Slide 43
Slide 43 text
@deepu105
#Devoxx2018
Slide 44
Slide 44 text
@deepu105
#Devoxx2018
Slide 45
Slide 45 text
@deepu105
#Devoxx2018
Slide 46
Slide 46 text
An optimal React, Angular or VueJS stack
with TypeScript
for Java developers
Slide 47
Slide 47 text
@deepu105
#Devoxx2018
Want to learn more about JHipster?
Come to our BOF tonight!
Slide 48
Slide 48 text
@deepu105
#Devoxx2018
VsCode
● Best TypeScript support among available options
● Written in TypeScript and hence supports it natively
● Plugin for Tslint
● Lot of TypeScript utility plugins, like TypeScript Hero
Slide 49
Slide 49 text
https://jhipster.tech @java_hipster
Full Stack Development with JHipster
● Amazon: https://goo.gl/k1NBAv
● Packt: https://goo.gl/XvQLeN
Slide 50
Slide 50 text
Thank you!
Please rate the talk if you liked it!