Pankaj Pralhad Parkar
(TSS Consultancy PVT LTD.)
Twitter: @pankajparkar
Facebook: fb.com/pankaj.parkar
LinkedIn: https://in.linkedin.com/in/pankajparkar
Email: parkarpankaj3@gmail.com
How to use it?
Demo
Typescript Fundamentals
Typescript is a typed superset of Javascript that compiles to plain Javascript. Any Browser.
Any host. Any OS. Open Source.
Javascript has dynamic typings.
Good
Bad
.Net
Java
Ruby
PHP
- The TypeScript type system
- Your JavaScript is TypeScript
- Types inference
- Types are structural using classes/interface
- Type errors do not prevent JavaScript emit
- Types can be ambient
var name: Type = 'Value';
var myVariable = '123';
var foo = 123;
foo = '456'; // Error: cannot assign a `string` to a `number`
// Still it compiles to below
var foo = 123;
foo = '456';
Typescript file(.ts)
Typescript Compiler
(uses tsconfig.json)
Javascript file(.js)
npm install -g typescript
Other way is, you could go on typescript playground
http://www.typescriptlang.org/play/
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
class Animal {
name: string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Snake extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 5) {
super.move(distanceInMeters);
}
}
class Horse extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 45) {
super.move(distanceInMeters);
}
}
let add = (x: number, y: number): number => {
return x + y;
};
add(1, 2);
By using Interface you can focus type-checking on the shape of object.
interface SquareConfig {
color?: string;
width?: number;
}
let newSquare: SquareConfig = {
color: "white",
area: 100
};
Module
Modules are declarative; the relationships between modules are specified in terms of imports and exports at the file level.
export interface StringValidator {
isAcceptable(s: string): boolean;
}
export const numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
Namespaces
Namespace has collection of modules where we can architect our application architecture.
namespace Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}
const lettersRegexp = /^[A-Za-z]+$/;
const numberRegexp = /^[0-9]+$/;
export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
}
Flexible Typing
function loggingIdentity<T>(arg: T): T {
console.log(typeof T)
console.log(arg.length); // Error: T doesn't have .length
return arg;
}
Flexible Typing
enum Language {
Java,
CSharp,
Javascript
}
// Sample usage
var language = Language.Java;
// Error `string` is not assignable to type `Language`
// Safety
language = "not a member of card suit";