install and config with npm
npm install typescript -D -g
npm link typescript
npm install -D ts-node
npm install -P @types/node
add scripts to package.json
"scripts": {
"start": "node --inspect=5858 -r ts-node/register ./tutorial.ts",
"build": "tsc && copyfiles -U 1 ./**/*.env ./dist"
}
build script convert all ts files to js and move it to ./dist folder
copyfiles is a tool to help you to move files to destination folder
tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"pretty": true,
"sourceMap": true,
"target": "es6",
"outDir": "./dist",
"baseUrl": ".",
},
"include": [
"./**/*"
],
"exclude": [
"node_modules",
".vscode"
]
}
so once you call tsc command it will build all files specified by tsconfig.json to target
let var1:string|number=44;
let var2:object={};
let var3:any;
let var4:void;//null or undefined
//===============================
let strArr:string[];//accept only array of string
let strArr2:[string,number];//tuple string,number
let strArr3:Array<string>;
//========================
let any:any;//take any value
let fun:(a: string) => void;//function type
TypeScript interface
interface Options {
color: string;
volume: number;
}
let options = {} as Options;
options.color = "red";
options.volume = 11;
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
interface A{
val1:string;
val2:number;
}
class AA{
val1:string;
val2:number;
val3:string;
constructor(name:string,age:number) {
this.val1=name;
this.val2=age;
this.val3=name+age;
}
}
let val:A=new AA("hello",12);
console.log(val);
classes and abstract classes
interface IPerson {
name: string;
display():void;
}
interface IEmployee {
empCode: number;
}
class Employee implements IPerson, IEmployee {
empCode: number;
name: string;
constructor(empcode: number, name:string) {
this.empCode = empcode;
this.name = name;
}
display(): void {
console.log("Name = " + this.name + ", Employee Code = " + this.empCode);
}
}
let per:IPerson = new Employee(100, "Bill");
per.display(); // Name = Bill, Employee Code = 100
let emp:IEmployee = new Employee(100, "Bill");
emp.display(); //Compiler Error: Property 'display' does not exist on type 'IEmployee'
class Car {
name: string;
constructor(name: string) {
this.name = name;
}
run(speed:number = 0) {
console.log("A " + this.name + " is moving at " + speed + " mph!");
}
}
class Mercedes extends Car {
constructor(name: string) {
super(name);
}
run(speed = 150) {
console.log('A Mercedes started')
super.run(speed);
}
}
class Honda extends Car {
constructor(name: string) {
super(name);
}
run(speed = 100) {
console.log('A Honda started')
super.run(speed);
}
}
let mercObj = new Mercedes("Mercedes-Benz GLA");
let hondaObj = new Honda("Honda City")
mercObj.run(); // A Mercedes started A Mercedes-Benz GLA is moving at 150 mph!
hondaObj.run(); // A Honda started A Honda City is moving at 100 mph!
class StaticMem {
static num:number;
static disp():void {
console.log("The value of num is"+ StaticMem.num)
}
}
StaticMem.num = 12 // initialize the static variable
StaticMem.disp() // invoke the static method
abstract class Person {
abstract name: string;
display(): void{
console.log(this.name);
}
}
class Employee extends Person {
name: string;
empCode: number;
constructor(name: string, code: number) {
super(); // must call super()
this.empCode = code;
this.name = name;
}
}
let emp: Person = new Employee("James", 100);
emp.display(); //James
class StaticMem {
static num:number;
static disp():void {
console.log("The value of num is"+ StaticMem.num)
}
}
StaticMem.num = 12 // initialize the static variable
StaticMem.disp() // invoke the static method
namespace
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}
SomeNameSpaceName.SomeClassName;
as keyword
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;
type aliases
type func=(a: string) => void;
type Point = {
x: number;
y: number;
};
// Exactly the same as the earlier example
function printCoord(pt: Point) {
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 100, y: 100 });
