TypeScript

Intro to TypeScript

TS Data Types

(primative types are lower case)

  exploringArrays() {
    const myArray1 = new Array<number>();
    const myArray2: number[] = [1, 2, 3, 4];
  }

Take the below code for example

export class AppComponent {
  title = 'ExploringTypeScript';

  readonly myNumber: number;

  someMethod(): void {
    let anotherNumber;
    const aThirdNumber = 1;

    anotherNumber = 2;
  }
}

Working with Arrays

Loops

for (let i = 0; i < 10; i++) {
	console.log(i);
} 

for (let next of myArrray){
	console.log(next);
}

Classes and Objects

Because TypeScript is compiled to JavaScript classes don't actaully exist at runtime.

export class Book {
  title: string;
  author: string;
  price: number;
  readonly id: number = 1;

  constructor(author: string, title?: string) {
    this.author = author;
    if (title) {
      this.title = title;
    }
  }
}
enum SubjectArea {
  ART, HISTORY, SCIENCE, LITURATURE
}

printArrays(): void {
    for (const subject in SubjectArea) {
      if (true) {	// the if statement just surpresses a warning
        console.log(subject); 
      }
    } // output: 0, 1, 2, 3, ART, HISTORY, SCIENCE, LITURATURE

    const enumArray = Object.keys(SubjectArea);
    for (const value of enumArray.slice(enumArray.length / 2)) {
      console.log(value);
    } // output: ART, HISTORY, SCIENCE, LITURATURE
}

export enum SubjectArea {
  ART = 'Arts and Shit', HISTORY = 'History', SCIENCE = 'Science and Math', LITURATURE = 'English'
}

printArrays(): void {
	let label;
    for (const subject in SubjectArea) {
        console.log(subject);
        console.log(SubjectArea[subject]);
        if (SubjectArea[subject] === 'History') {
          label = subject;
        }
    }

    let label2 = Object.keys(SubjectArea).find( it => SubjectArea[it] === 'History' );
}

Methods and Functions

methodName(paramName: paramType): ReturnType

export class User {
  id: number;
  name: string;

  getRole(): string {
    return 'standard';
  }

  static fromHttp(user: User): User {
    const newUser = new User();
    newUser.id = user.id;
    newUser.name = user.name;
    return newUser;
  }
}
    this.dataService.getUser(13).subscribe(
      next => {
        console.log(next);
        console.log(typeof next);
        let user: User = next;
        console.log(user)
        console.log(typeof user)
        let user2: User = next as User;
        console.log(user2)
        console.log(typeof user2)
        let user3: User = User.fromHttp(next);
        console.log(user3);
        console.log(typeof user3)
		// this will only work for users created from the created method
        console.log(user3.getRole()) 
      });

Output:

{ id: 13, name: "matt" }
object
{ id: 13, name: "matt" }
object
{ id: 13, name: "matt" }
object
{ id: 13, name: "matt" }
object
standard

Reminder: JavaScript SUCKS

JavaScript is not an 'opinionated' langauge, meaning there are a million ways to do the same fucking thing with no reccomendation on how to optimize. Ex:

console.log(`To buy this book it will cost: ${myBook.priceWithTax(.2)} dollars`);
console.log('To buy this book it will cost: ' + myBook.priceWithTax(.2) + ' dollars');
console.log('To buy this book it will cost: ', myBook.priceWithTax(.2), ' dollars');

All do the same thing. Notice the backticks instead of quotes in the first.

    const oddNumbers = numbers.filter(
      num => {
        return num % 2 === 1;
      }
    );
	
    const evenNumbers = numbers.filter( num => num % 2 === 0 );

But by far the most mind-bogglingly stupid feature of JS is eqaulity.       == Abstract eqaulity       === Strict eqaulity The short story is always use Strict eqaulity. As abstract eqaulity will attempt to cast parameters to the same type before comparision.


Revision #1
Created 16 April 2022 23:35:30 by Elkip
Updated 16 April 2022 23:40:55 by Elkip