learn-typescript.ts

let id: number = 7 // Int
let company: string = 'Test Company' // String
let isPublished: boolean = true // Boolean
let xxx: any = 'Tests' // Anything
let ids: number[] = [1,2,3,4,5] // Array that only contains numbers
let someArray: any[] = [1, 2, true, 'test'] // Array that can contain anything
// This is called Tuple. The array named person expects values in this specific datatype order
let person: [number, string, boolean] = [30, 'Name', true]

//------------------------------------------------------------------------------------------------//

// This is called array of tuples. We have array called employee, which accepts multiple sets of data in this specific datatype order
let employee: [number, string][]
employee = [
    [1, 'Name'],
    [2, 'Another name'],
    [3, 'Yet Another name']
]

//------------------------------------------------------------------------------------------------//

// This is called a Union. If we have one variable that can contain multple data types, we add them by a | symbol
let identificator: string | number = 28

//------------------------------------------------------------------------------------------------//

/**
 * Enum (set of numeric constants) 
 * If no value provided, first item value is 0, next is 1, etc
 * If value is provided for an item, it will do +1 to the initial value for the next item
*/ 
enum Direction1 {
    Up,
    Down = 20, 
    Left,
    Right
}

/**
 * Enums can also contain Strings
 */
enum Direction2 {
    Up = 'Up',
    Down = 'Down', 
    Left = 'Left',
    Right = 'Right'
}

//------------------------------------------------------------------------------------------------//

// Objects
// First define object type
type User = {
    id: number,
    name: string
}
// Use the already defiend object type (that :User moment)
const user: User = {
    id: 1,
    name: 'John'
}

//------------------------------------------------------------------------------------------------//

/**
 * Type assertion
 * Type assertion tells the TypeScript compiler to treat a variable as a specific type.
 * Has 2 syntaxes
 */
let cId: any = 1

// 1. Angle-bracket syntax (not recommended in React projects as it conflicts with JSX)
// let customerId = <number>cId

// 2. 'as' syntax (recommended and more compatible)
let customerId = cId as number

//------------------------------------------------------------------------------------------------//

// Functions
// Each argument has a type, as well as the return of the function
function addNum(x: number, y:number): number {
    return x + y
}

// Void return type
function log(message: string|number): void{
    console.log(message)
}

//------------------------------------------------------------------------------------------------//

// Interfaces
interface UserInterface {
    id: number,
    name: string,
    age?: number,
    readonly customerSecret?: number 
}
// Use the already defiend object type (that :User moment)
const user1: UserInterface = {
    id: 1,
    name: 'John'
}

//------------------------------------------------------------------------------------------------//

/**
 * Interface with funcitons
 * This interface describes the shape of a function:
 * it must take two numbers as parameters (x and y) and it must return a number
 */
interface MathFunc {
    (x: number, y: number): number
}

// Now, we declare a function named 'add' and explicitly type it as MathFunc.
// TypeScript will enforce that 'add' matches the structure defined in the interface.
const add: MathFunc = (x: number, y: number): number => {
    return x + y
}

//------------------------------------------------------------------------------------------------//

// Classes
interface PersonInterface {
    id: number,
    name: string
    register(): string
}

class Person implements PersonInterface {
    id: number
    name: string

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

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

const myself = new Person(1, 'Marshall');
// console.log(myself.register())

// Subclass that extends the main one
class Employee extends Person {
    position: string

    constructor(id: number, name: string, position: string) {
        super(id, name)
        this.position = position
    }
}
const emp = new Employee(2, 'Jimmy', 'student')
// console.log(emp.register())

//------------------------------------------------------------------------------------------------//

/**
 * Generics
 * We are able to set the placeholder here as T
 * Then use it in getArray<T> place 
 */
function getArray<T>(items: T[]): T[] {
    return new Array().concat(items)
}

let numArray = getArray<number>([1,2,3,4])
let strArray = getArray<string>(['james', 'joe', 'jimmy'])

strArray.push('halo')