- Use the following cmd in your terminal window (might need sudo prefix)
npm install -g typescript ts-node- Use the following command to check status
tsc --help- Compile the TS code using the following cmd in the TS file directory
tsc <fine_name>.ts- Run using node
node <file_name>.js- Use the following cmd to compile and run the TS code in one go
ts-node <file_name>.tsThis doesn't create a new JS file from this TS file. Simply compiles it and executes to show the output.
- We use something called an INTERFACE to define what all properties is a thing going to have. Example -
interface Todo {
id: number;
title: string;
completed: boolean;
}- Then we link it up with a variable with the as clause. Example -
interface Todo {
id: number;
title: string;
completed: boolean;
}
const data = {
id: 1,
title: "This is a title",
completed : false
}
const task = data as Todo;Example
const logTodo = (id: number, title: string, comple: boolean) => {
console.log(`
ID : ${id}
Title : ${title}
Status : ${comple}
`);
};Easy way to refer to the different properties + functions that a value has. There are two kind of types -
- Primitive Types
- Object Types
- String | "Hi There"
- Number | 0.00025 | -22 | 600000
- Boolean | true | false
- Date | new Date()
- User Defined Types | Like we defined Todo in previous section
- Void
- Undefined
- Null
- Symbol
- Never
- Function
- Arrays
- Classes
- Objects
- Tuples
Code we add to tell Typescript what type of value a variable will refer to.
// example
let apples: number = 5;
let speed: string = 'fast';
let hasName: boolean = true;
let nothungMuch: null = null;
let nothing: undefined = undefined;
// built in objects
let now: Date = new Date();
// Array
let colors: string[] = [
'red',
'green',
'blue'
];
let myNumbers: number[] = [
1,
2,
3
];
let truths: boolean[] = [
true,
true,
false
];
// classes
class Car {}
let car: Car = new Car();
// Object literal
let point: { x: number; y: number } = {
x: 10,
y: 20
};
// functions
const logNumber: (i: number) => void = (i: number) => {
console.log(i);
};
const add = (a: number, b: number): number => {
return a + b;
};Typescript tries to figure out what type of value a variable refers to.
// example
let apples = 5;
let speed = 'fast';
let hasName = true;
let nothungMuch = null;
let nothing = undefined;
// built in objects
let now = new Date();- Function that returns the any type
const json = '{"x":10, "y":20}';
const coord: { x: number; y: number } = JSON.parse(json);
console.log(coord); // { x: 10, y: 20 }- When we declare a variable on one line and initialize it later.
const words = [
'red',
'green',
'blue'
];
let foundWord: boolean;
for (let i = 0; i < words.length; i++) {
if (words[i] === 'green') {
foundWord = true;
}
}- Var whose type cannot be infered correctly
const numbers = [
-10,
-1,
12
];
let numberAboveZero: boolean | number = false;
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] > 0) {
numberAboveZero = numbers[i];
}
}const add = (a: number, b: number): number => {
return a + b;
};
function divide(a: number, b: number): number {
return a / b;
}
const multiply = function(a: number, b: number): number {
return a * b;
};
const logger = (message: string): void => {
console.log(message);
// return null;
// return undefined;
};
const throwError = (message: string): never => {
throw new Error(message);
// the end of this function is never reached
// so we used never as the return type
// as it never returns anything
};
const todaysWeather = {
date: new Date(),
weather: 'sunny'
};
const logWeather = ({
date,
weather
}: {
date: Date;
weather: string;
}): void => {
console.log(date);
console.log(weather);
};
logWeather(todaysWeather);const profile = {
name: 'alex',
age: 20,
coords:
{
lat: 0,
lng: 15
},
setAge(age: number): void {
this.age = age;
}
};
const { age, name }: { age: number; name: string } = profile;
const {
coords: { lat, lng }
}: { coords: { lat: number; lng: number } } = profile;const carMakers: string[] = [
'bmw',
'toyota',
'chevy'
];
const dates = [
new Date(),
new Date()
];
// two dim array
const carsByMake: string[][] = [];
// help with inference when extracting values
const a_car_maker = carMakers[0];
const myCar = carMakers.pop();
// preventing incompatible values
// carMakers.push(100); //this is incompatible
carMakers.push('hyundai');
// help with map
carMakers.map((car: string): string => {
return car.toUpperCase();
});
// flexible types
const impDates: (Date | string)[] = [
new Date(),
'06-08-1996'
];
impDates.push(new Date());
impDates.push('06-08-1997');
// impDates.push(1234); //incompatibleArray-like structure where each element represents some property of a record, in a particular order.
// with object
const drink = {
color: 'brown',
carbonated: true,
sugar: 40
};
// with tuple
type Drink = [string, boolean, number];
const pepsi: Drink = [
'brown',
true,
40
];
// pepsi[0] = 40; //not compatible
pepsi[0] = 'clear'; //compatible
const sprite: Drink = [
'clear',
true,
40
];
const tea: Drink = [
'brown',
false,
10
];Creates a new type, describing the property name & value types of an object.
const oldCivic = {
name: 'civic',
year: 2000,
broken: true
};
// without interface
const printVehicle = (vehicle: {
name: string;
year: number;
broken: boolean;
}): void => {
console.log(`Name: ${vehicle.name}`);
console.log(`Year: ${vehicle.year}`);
console.log(`Broken: ${vehicle.broken}`);
};
printVehicle(oldCivic);
// using interface
interface Vehicle {
name: string;
year: number;
broken: boolean;
}
const printVehicle2 = (vehicle: Vehicle): void => {
console.log(`Name: ${vehicle.name}`);
console.log(`Year: ${vehicle.year}`);
console.log(`Broken: ${vehicle.broken}`);
};
printVehicle2(oldCivic);interface Vehicle {
name: string;
year: Date;
broken: boolean;
summary(): string;
}
const oldCivic = {
name: 'civic',
year: new Date(),
broken: true,
summary(): string {
return `Name: ${this.name}`;
}
};
const printVehicle = (vehicle: Vehicle): void => {
console.log(vehicle.summary());
}<
57AE
span class="pl-kos">;
printVehicle(oldCivic);interface HasInfo {
summary(): string;
}
const oldCivic = {
name: 'civic',
year: new Date(),
broken: true,
summary(): string {
return `Name: ${this.name}`;
}
};
const coldDrink = {
color: 'brown',
carbonated: true,
sugar: 40,
summary(): string {
return this.color;
}
};
const printInfo = (item: HasInfo): void => {
console.log(item.summary());
};
printInfo(oldCivic);
printInfo(coldDrink);In easy terms, it can be thought of as a blueprint to create an Object with some fields (values) & methods (functions) to represent a 'thing'
class Vehicle {
drive(): void {
console.log('Reeevvvvv! Reeevvvv!');
}
honk(): void {
console.log('Beep! Beep!');
}
}
const vehicle = new Vehicle();
vehicle.drive();
vehicle.honk();class Vehicle {
drive(): void {
console.log('Reeevvvvv! Reeevvvv!');
}
honk(): void {
console.log('Beep! Beep!');
}
}
// const vehicle = new Vehicle();
// vehicle.drive();
// vehicle.honk();
// inheritance
class Car extends Vehicle {
drive(): void {
console.log('Vroommmm Vroommm !');
}
}
const car = new Car();
car.drive();
car.honk();PUBLIC : This method can be called anywhere, anytime. (it is default, and need not be explicitly specified)
PRIVATE : This method can only be called by other methods in this class.
PROTECTED : This method can be called by other methods in this class, or by other methods in child class.
class Vehicle {
honk(): void {
console.log('Beep! Beep!');
}
}
// inheritance
class Car extends Vehicle {
private drive(): void {
console.log('Vroommmm Vroommm !');
}
startToDrive(): void {
this.drive();
}
}
const car = new Car();
car.startToDrive();
car.honk();class Vehicle {
protected honk(): void {
console.log('Beep! Beep!');
}
}
// inheritance
class Car extends Vehicle {
private drive(): void {
console.log('Vroommmm Vroommm !');
}
startToDrive(): void {
this.drive();
this.honk();
}
}
const car = new Car();
car.startToDrive();
// car.honk();class Vehicle {
// FIELDS
color: string;
// constructor to initialize the field in first run
constructor(color: string) {
this.color = color;
}
protected honk(): void {
console.log('Beep! Beep!');
}
}
// inheritance
class Car extends Vehicle {
private drive(): void {
console.log('Vroommmm Vroommm !');
}
startToDrive(): void {
this.drive();
this.honk();
}
}
const car = new Car('Blue');
car.startToDrive();
const vehicle = new Vehicle('White');
console.log(vehicle.color);
// car.honk();class Vehicle {
// FIELDS
// constructor to initialize the field in first run
constructor(public color: string) {}
protected honk(): void {
console.log('Beep! Beep!');
}
}
// inheritance
class Car extends Vehicle {
private drive(): void {
console.log('Vroommmm Vroommm !');
}
startToDrive(): void {
this.drive();
this.honk();
}
}
const car = new Car('Blue');
car.startToDrive();
const vehicle = new Vehicle('White');
console.log(vehicle.color);
// car.honk();NOTE: The modifiers (public, protected, private) work exactly same for fields, just like classes. But for fields we need to mention public modifier too just like protected and private.
class Vehicle {
// FIELDS
// constructor to initialize the field in first run
constructor(public color: string) {}
protected honk(): void {
console.log('Beep! Beep!');
}
}
// inheritance with field
class Car extends Vehicle {
constructor(public wheels: number, color: string) {
super(color);
}
private drive(): void {
console.log('Vroommmm Vroommm !');
}
startToDrive(): void {
this.drive();
this.honk();
}
}
const car = new Car(4, 'Blue');
car.startToDrive();
console.log(car.wheels);
const vehicle = new Vehicle('White');
console.log(vehicle.color);
// car.honk();Tells the TS compiler all the different functions that are available inside the JS library that is being imported or referenced inside a TS file. We can find type definition file for a library in the following website.
Alternatively, we can do a search for Type Definition File in the NPM modules website using the following format
@types/<library_name>