Last active
December 6, 2019 17:21
-
-
Save ObsidianCat/451d419183a260b59f9491d6234f9b75 to your computer and use it in GitHub Desktop.
Examples of type script basics types and their use
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//inferance bottom up | |
// the compiler know function result type, baesed on it`s arguments | |
let userId = (a: string, b: number): string =>a+b; | |
//******************************* | |
//Union type (variable can be any of these types) | |
let thing: string | number | string[]; | |
// Alias | |
type thing = string | number | string[]; | |
let anotherThing: thing; | |
let returnSomething = (something: thing)=>{ | |
//type guards | |
if(typeof something === "number"){ | |
console.log('something is a number') | |
} | |
if(something instanceof Array){ | |
let joinedThings = something.join(''); | |
} | |
} | |
//******************************* | |
// Annotation as string type | |
let unit: string; | |
// annotation as string literal type | |
let miles: "MILES"; //can be null, undefined or "MILES" | |
type distanceMetrics = "MILES"| "KILOMETERS" | "METERS" | "YARDS" | "FEET" | "INCHES"; | |
function moveCharacter(distance: number, value: distanceMetrics){ | |
console.log(distance, value) | |
} | |
//valid | |
moveCharacter(3, 'MILES') | |
//not valid | |
// moveCharacter(3, 'dragon') | |
//******************************* | |
// Interfaces | |
interface AttackFunction { | |
// Definition of function parameters, and return type (number) | |
(opponent: {alias: string; health: number;}, attackWith: number): number; | |
} | |
function attackFunc(opponent, attackWith){ | |
opponent.health -= attackWith; | |
console.log(`Attacked by ${opponent.alias}, who\` health = ${opponent.health}`) | |
return opponent.health; | |
} | |
interface OptionalAttributes { | |
strength?: number; | |
insanity?: number; | |
dexterity?: number; | |
healingFactor?: number; | |
} | |
// Inr=terface inheritance of optional params | |
interface ComicBookCharacter extends OptionalAttributes{ | |
secretIdentity?: string; | |
alias: string; | |
health: number; | |
attack: AttackFunction; | |
} | |
let superHero: ComicBookCharacter = { | |
alias: "She-Hulk", | |
health:500, | |
strength: 500, | |
attack: attackFunc, | |
} | |
let superVillain: ComicBookCharacter = { | |
secretIdentity:'Jack Napier', | |
alias: "Jocker", | |
health: 75, | |
insanity: 145, | |
attack: attackFunc | |
} | |
//******************************* | |
// Classes | |
interface Opponent { | |
alias: string; | |
health: number; | |
} | |
// Class definition with long initialization | |
class ComicBookCharacterClassLong { | |
// Properties are public by default | |
// We can add modifiers, as "public alias: string", but it is unnecessary | |
alias: string; | |
health: number; | |
strength:number; | |
private secretIdentity: string; | |
// getter for private property | |
getSecretIdentity(){ | |
return console.log(`this ${this.alias}'s secret identity is ${this.secretIdentity}`); | |
} | |
//Long version of constructor | |
constructor( | |
alias: string, | |
health: number, | |
strength:number, | |
secretIdentity: string){ | |
this.alias = alias; | |
this.health = health; | |
this.strength = strength; | |
this.secretIdentity = secretIdentity; | |
} | |
attackFunct(opponent: Opponent, attackWith: number){ | |
opponent.health -= attackWith; | |
console.log(`${this.alias} attacked ${opponent.alias}, who\` health = ${opponent.health}`) | |
return opponent.health; | |
} | |
} | |
// Class definition with shortcut initialization | |
class ComicBookCharacterClassShort { | |
// Constructor short version | |
constructor( | |
public alias: string, | |
public health: number, | |
public strength: number, | |
private secretIdentity: string){} | |
// Static method, exist on Class, but not on instance | |
static createTeam(teamName: string, members: ComicBookCharacterClassShort[]){ | |
return { | |
name: teamName, | |
members: members | |
} | |
} | |
attackFunct(opponent: Opponent, attackWith: number){ | |
opponent.health -= attackWith; | |
console.log(`${this.alias} attacked ${opponent.alias}, who\` health = ${opponent.health}`) | |
return opponent.health; | |
} | |
} | |
let storm = new ComicBookCharacterClassShort('Storm', 100, 100, 'Ororo Munroe'); | |
let blob = new ComicBookCharacterClassShort('The Blob', 1000, 5000, 'Fred J. Dukes'); | |
ComicBookCharacterClassShort.createTeam('team1', [storm, blob]); | |
storm.attackFunct(blob, storm.strength); | |
// Classes inheritance | |
class ComicBookCharacterClassAncestor { | |
// Constructor short version | |
constructor( | |
public alias: string, | |
public health: number, | |
public strenght: number, | |
// private properties accessible only in the class | |
// protected property can be assessed in the derived class (class which inherit from this class) | |
protected secretIdentity: string){} | |
} | |
class SuperHero extends ComicBookCharacterClassAncestor { | |
//When no constructor is derived class, ancestor (super) constructor will be used | |
traits = ['empathy', 'strong moral code']; | |
getSecretIdentity(){ | |
return console.log(`this ${this.alias}'s secret identity is ${this.secretIdentity}`); | |
} | |
} | |
class SuperVillain extends ComicBookCharacterClassAncestor { | |
flaws = ['hubris', 'always explains evil plan'] | |
numOfEvilDeeds: number | |
constructor(alias, health, strenght, secretIdentity, numOfEvilDeeds){ | |
// Super will call ComicBookCharacterClass3 constructor | |
super(alias, health, strenght, secretIdentity); | |
this.numOfEvilDeeds = numOfEvilDeeds; | |
console.log('New villain is created') | |
} | |
} | |
let jubilee = new SuperHero('Jubilee', 23, 233, 'Julilation Lee'); | |
let scarletWitch = new SuperVillain('Scarlet Witch', 233, 4444, 'Wanda Maximoff', 5); | |
//******************************* | |
// Convert types | |
interface goodGuyWithSuperPowers { | |
powers: string[]; | |
savesTheDay: ()=> void; | |
} | |
interface BadGuy { | |
badDeeds: string[]; | |
getRandomBadDeed: ()=> string; | |
commitBadDeed: ()=> void; | |
} | |
let dazzler: goodGuyWithSuperPowers = { | |
powers: ['Transcude sonic vibrations into light'], | |
savesTheDay: ()=>{ console.log('Dazzler saves the day') } | |
} | |
let baddy: BadGuy = { | |
badDeeds: ['Doesn`t pick up his dog poop', 'Steal candies from the local super market'], | |
getRandomBadDeed: ()=>{ return this.badDeeds[Math.floor(Math.random()*this.badDeeds.length)]}, | |
commitBadDeed: () => { | |
console.log(`Bad guy ${this.getRandomBadDeed()}`) | |
} | |
} | |
function saveTheDayOrDoBadDeed(someone: goodGuyWithSuperPowers | BadGuy){ | |
//'assertion as' syntax | |
if((someone as goodGuyWithSuperPowers).powers){ | |
(someone as goodGuyWithSuperPowers).savesTheDay(); | |
} else{ | |
(someone as BadGuy).commitBadDeed(); | |
} | |
} | |
saveTheDayOrDoBadDeed(dazzler); | |
saveTheDayOrDoBadDeed(baddy); | |
//******************************* | |
// Generics | |
interface SuperHeroType {name: string} | |
//Hello world of Generics | |
// It is better than use type:any, because we validate that return value ype is equal to arg value type | |
function identity<T>(arg:T):T { | |
return arg; | |
} | |
// Explicitly pass type | |
identity('Identity'); | |
// Rely on type inference | |
identity<string>('Identity'); | |
//T is a convention placeholder, may be anything | |
function pushSomethingIntoCollection<T>(something: T, collection: T[]) { | |
collection.push(something); | |
console.log(collection) | |
} | |
let jeanGrey = { name:'Jean Grey' } | |
let wolverine = { name: 'Wolverine' } | |
let superHeroes = [jeanGrey] | |
let powers = ['telekinesis', 'levitation'] | |
pushSomethingIntoCollection('change forms', powers) | |
pushSomethingIntoCollection<SuperHeroType>(wolverine, superHeroes) | |
pushSomethingIntoCollection<String>('adamantium claws', powers) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment