typescript crash course

ts

let id: number = 5;
let company: string = 'Traversy Media';
let isPublished: boolean = true;
let x: any = 'Hello';

x = true;

let age: number;

age = 33;

// arrays
let ids: number[] = [1, 2, 3, 4, 5];

let arr: any[] = [1, true, 'Hello'];
// ids.push('Hello'); // Error
ids.push(50);
console.log(ids);

// Tuple
let person: [number, string, boolean] = [1, 'Brad', true];

// Tuple Array
let employee: [number, string][];
employee = [
  [1, 'Brad'],
  [2, 'John'],
  [3, 'Jill'],
];

// Union - let a variable have multiple types
let productId: string | number = 22;
productId = 22;
productId = '22';

// Enum
console.log('\n\nENUMS');
enum Direction1 {
  Up = 1,
  Down,
  Left,
  Right,
}
console.log(Direction1.Up); // 1
console.log(Direction1.Down); // 2
console.log(Direction1.Left); // 3
console.log(Direction1.Right); // 4

// Enum
enum Direction2 {
  Up = 'Up',
  Down = 'Down',
  Left = 'Left',
  Right = 'Right',
}
console.log(Direction2.Up); // Up
console.log(Direction2.Down); // Down
console.log(Direction2.Left); // Left
console.log(Direction2.Right); // Right

// declare object types (kinda like an Interface)
type User = {
  id: number;
  name: string;
};

const user = {
  id: 1,
  name: 'John',
};

// Type Assertion
let cid: any = 1;
// 2 diff ways to assert the type
let customerId = <number>cid;
customerId = cid as number;

// error if trying to set customerId to a string
// customerId = 'Hello';

// Functions
// last one is return type
function addNum(x: number, y: number): number {
  return x + y;
}

console.log(addNum(1, 2));

// function with no return type
// message can be a string or a number so using a union
// VOID type is used when a function does not return anything
function log(message: string | number): void {
  console.log(message);
}
log('Hello');
log(1);
// log(true); // bad

// Interfaces
console.log('\nInterfaces');
// interface is like a contract
// it says that if you create an object with this interface, it must have these properties
interface UserInterface {
  readonly id: number; // cannot change
  name: string;
  age?: number; // optional
}

const user1: UserInterface = {
  id: 1,
  name: 'John',
};
// user1.id = 5; // error

// types are different than interfaces
//  because they can be used with primitives, unions, tuples, etc
type Point = number | string;
const p1: Point = 1;

// best to just use interfaces for objects

// Interface with functions
interface MathFunc {
  (x: number, y: number): number;
}

const add: MathFunc = (x: number, y: number): number => x + y;
const subtract: MathFunc = (x: number, y: number): number => x - y;

// Classes
console.log('\n\nCLASSES');

interface PersonInterface {
  id: number; // cannot change
  name: string;
  age?: number; // optional
  register(): string;
}

class Person implements PersonInterface {
  // default is public but can be private or protected
  id: number; // private - only accessible within the class
  name: string;

  constructor(id: number, name: string) {
    console.log(123); // runs when a new instance of Person is created
    this.id = id;
    this.name = name;
  }

  register() {
    return `${this.name} is now registered`;
  }
}

const nick = new Person(1, 'Nick');
console.log(nick.name);
const jack = new Person(2, 'Jack');
console.log(jack.name);
console.log(jack.register());
// console.log(nick.id); // error

// Subclasses
console.log('\n\nSUBCLASSES');
class Employee extends Person {
  position: string;

  constructor(id: number, name: string, position: string) {
    super(id, name);
    this.position = position;
  }
}

const emp = new Employee(3, 'Kristen', 'Boss');
const emp2 = new Employee(4, 'Charlie', 'Developer');

console.log(emp);
console.log(emp.register());

// Generics
console.log('\n\nGENERICS');
// used to create reusable components
// T is a placeholder for the type
function getArray(items: any[]): any[] {
  return new Array().concat(items);
}

let numArray = getArray([1, 2, 3, 4]);
let strArray = getArray(['Brad', 'John', 'Jill']);
numArray.push('hello'); // no error
console.log(numArray);

// better to use generics
function getArray2<T>(items: T[]): T[] {
  return new Array().concat(items);
}

let numArray2 = getArray2<number>([1, 2, 3, 4]);
// numArray2.push('hello'); // error
console.log(numArray2);
let strArray2 = getArray2<string>(['Brad', 'John', 'Jill']);

// react and typescript and nextjs support typescript