Typescript Fundamentals
Why Typescript?
- Optional type annotations
- Static analysis support for the IDE
- Code organization benefits
Angular2 and Typescript
Angular2 is in Typescript/Dart/ES6
A2 is written in TS
It is recommended to use TS when developing in A2
Access modifiers
Everything in a class is public if not specified. Everything in a module is private unless export keyword is used.
Hello TS
Types
Basic types
- number
- boolean
- string
- array
- tuple
- any
Variable Types
//typescript
let age:number = 5;
let name: boolean = true;
let address: string = 'neverland';
let numbers: number [] = [1,2,3,4];
let counting: Array<number> [] = [1,2,3,4];
let tuple: [number, string] = [1, 'batman'];
let various: any[] = [1, true, 'wayne', [false, 9]];
enum Color {Red, Green, Blue};
Type Inference
//typescript
let age = 5; //inferred as a number
let name = true; //inferred as a boolean
let address; //inferred as any
let person;
person = 'Wiley ol`fox'; //inferred as any
Typescript can infer types if the variables are not annotated
Object Types
//typescript
let hero = {
name: 'Johnny Quest'
}; //inferred as an Object with a
//property name being a string
let zero: Object = {
name: 'Major'
}; //will be an Object without any
//property annotation *
*This is where interfaces would kick in
Function Types
//typescript
//inferred as a type Function
//a, b and return type is any
let add = (a, b) => a + b;
//type Function
//a, b and return type is number
let add: Function = (a: number, b: number) => a + b;
//type Function
//a, b and return type is number
let add: Function = (a: number, b: number): number => a + b;
Superhero Nursery
Interfaces
Interface is a contract that binds an object or class for the properties it can contain
Object Interfaces
//typescript
interface IPlayer {
name: string,
age: number,
retired?: boolean
}
let brainLara: IPlayer = {
name: 'Brian Lara',
age: 45,
retired: true
};
Function Interfaces
//typescript
interface ISum {
(a: number, b: number): number
}
let add: ISum = (a, b) => a + b;
Class Interfaces
//typescript
interface ICar {
make: number,
manufacturer: string,
color?: string,
running(): boolean
}
Class Interfaces
//typescript
class Toyota implements ICar {
make: number;
manufacturer: string;
constructor(make: number, manufacturer: string){
this.make = make;
this.manufacturer = manufacturer;
}
running(){
return true;
}
}
Interfaces
Generics
Generic Function
//typescript
function identity<T>(arg: T): T {
return arg;
}
Generic Interface
//typescript
interface GenericIdentityFn<T> {
(arg: T): T;
}
Generic Class
//typescript
class Greeter<T> {
greeting: T;
constructor(message: T) {
this.greeting = message;
}
greet() {
return this.greeting;
}
}
Generic
Decorators
Decorator Types
- Class Decorators
- Property Decorators
- Method Decorators
- Static Method Decorators
- Parameter Decorators
Class Decorator
function ClassDecorator(
target: Function // The class the decorator is declared on
) {
console.log("ClassDecorator called on: ", target);
}
@ClassDecorator
class ClassDecoratorExample {
}
Property Decorator
function PropertyDecorator(
target: Object, // The prototype of the class
propertyKey: string | symbol // The name of the property
) {
console.log("PropertyDecorator called on: ", target, propertyKey);
}
class PropertyDecoratorExample {
@PropertyDecorator
name: string;
}
Method Decorator
function MethodDecorator(
target: Object, // The prototype of the class
propertyKey: string, // The name of the method
descriptor: TypedPropertyDescriptor<any>
) {
console.log("MethodDecorator called on: ", target, propertyKey, descriptor);
}
class MethodDecoratorExample {
@MethodDecorator
method() {
}
}
Static Method Decorator
function StaticMethodDecorator(
target: Function, // the function itself and not the prototype
propertyKey: string | symbol, // The name of the static method
descriptor: TypedPropertyDescriptor<any>
) {
console.log("StaticMethodDecorator called on: ", target, propertyKey, descriptor);
}
class StaticMethodDecoratorExample {
@StaticMethodDecorator
static staticMethod() {
}
}
Parameter Decorator
function ParameterDecorator(
target: Function, // The prototype of the class
propertyKey: string | symbol, // The name of the method
parameterIndex: number // The index of parameter in the list of the function's parameters
) {
console.log("ParameterDecorator called on: ", target, propertyKey, parameterIndex);
}
class ParameterDecoratorExample {
method(@ParameterDecorator param1: string, @ParameterDecorator param2: number) {
}
}
Terminator
Typescript Fundamentals
By Umayr Shahid
Typescript Fundamentals
- 821