TypeScript basics

0.primitiveTypes.ts

/** PRIMITIVES TYPES **/

// boolean (true / false)
let isOpen: boolean

// string ('foo', "foo", `foo`)
let message: string
message = `foo ${isOpen}`

// number (int, float, hex, binary)
let total: number
total = 0xff0

// array (type[])
let items: string[]
items: ["foo", "bar"]

let values: Array<number>
values = [1, 2, 3]

// tuple
let title: [number, string]
title = [1, 'foo']

// enum
enum Colors {
  white = '#fff',
  black = '#000'
}

// any (qualquer coisa) NÃO É LEGAL
  let coisa: any
  coisa = [1]

// void (vazio)
function logger(): void {
  console.log('foo')
}

// null | undefined

// never
function error(): never {
  throw new Error("error")
}

// object
let cart: object
cart = { key: 1 }

1.typeInference.ts

// Type Inference
let message  = "mensagem definida"

// Não precisa explicitar o tipo do evento de click (MouseEvent)
window.addEventListener("click", (e) => {
  console.log(e.target)
})

2.typeAliasWithIntersection.ts

// accountInfo
// charInfo
// playerInfo

type AccountInfo = {
  id: number
  name: string
  email?: string //optional. Same as string | undefined
}

const account: AccountInfo = {
  id: 123,
  name: "Tonho"
}

type CharInfo = {
  nickname: string
  level: number
}

const char: CharInfo = {
  nickname: 'tonhoEstarke',
  level: 100
}

// INTERSECTION
type PlayerInfo = AccountInfo & CharInfo

const player: PlayerInfo = {
  id: 69,
  name: "Anthony",
  nickname: "AntonTiler",
  level: 8000
}
  

3.typeAliasUnion.ts

// type alias
type Uid = number | string | undefined

function logDetails(uid: Uid, item: string) {
  console.log(`An user with ${uid} has a title as ${item}.`)
}

logDetails(234, "Anthony")
logDetails("234", "Anthony")
logDetails(undefined, "Anthony")

type Platform = "windows" | "Linux" | "Mac Os" | "ios"

function renderPlatform(plataform: Platform) {
 return platform
}

4.classes.ts

abstract class UserAccount {
  name: string
  age: number

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

  logDetails(): void {
    console.log(`user ${this.name} is ${this.age}`)
  }
}

<!-- const tonho = new UserAcount('Tonho', 30)
tonho.logDetails() -->

/** Herança **/
class ChartAcoount extends UserAccount {
  private nickname: string
  readonly level: number

  constructor(name: string, age: number, nickname: string, level: number) {
    super(name, age)

    this.nickname = nickname
    this.level: level
  }

  get getLevel(){
    return this.level
  }

  set setLevel(level: number){
    this.level = level
  }
}

const tonho2 = new ChartAcount('Tonho2', 33, 'tonhoEstarke', 100)
tonho2.logDetails()

5.interfaces.ts

interface Game {
  title: string
  description: string
  genre: string
  platform: string[]
  getSimilars (title: string) => void
}

const tlou: Game = {
  title: 'The Last of Us',
  description: 'The best Game in the world',
  readonly genre: 'Action'
  platform?: ['PS3', 'PS4'], //optional parameter
  getSimilars: (title: string) => {
    console.log(`Similar games to ${title}: Uncharted, Metro...`)
  }
}

tlou.getSimilars(tlou.title)

interface DLC extends Game {
  originalGame: Game
  newContent: string[]
}

const leftBehind: DLC = {
  title: 'The Last of US - Left Behind',
  description: 'You play as Ellie before the original game',
  genre: 'Action',
  originalGame: tlou,
  newContent: ['3 hours story', 'new characteres']
}

class CreateGame implements Game {
  title: string
  description: string
  genre: string

  constructor(t: string, d: string, genre: string) {
    this.title = t
    this.description = d
    this.genre = g
  }
}

6.generics.ts

// Generics Conventions
// S => State
// T => Type
// K => Key
// V => Value
// E => Element

function useState<S extends number | string = string>() {
  let state: S

  function getState() {
    return state
  }

  function setState(newState: S) {
    state = newState
  }

  return { getState, setState }
}

const newState = useState<number>()

newState.setState(123)
console.log(newState.getState())

7.typeUtlities.ts

// Readonly
const todo: Readonly<Todo> = {
  title: 'Assistir Dark de novo',
  description: 'Relembrar os detalhes',
  completed: false
}

console.log(todo)
// todo.completed = true -> NÃO PODE

// Partial
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate }
}

const todo2: Todo = updateTodo(todo, { completed: true })

console.log(todo2)

// Pick
type TodoPreview = Pick<Todo, "title" | "completed">

const todo3: TodoPreview = {
    title: 'Finalizar curso de TS'
    completed: false
}

// Omit
type TodoPreview2 = Omit<Todo, "description">

const todo4: TodoPreview2 = {
    title: 'Finalizar curso de TS'
    completed: false
}

8.decorators.ts

// @Component
// @Selector
// @useState("asd")


// Class decorator
// Factory - decorator - anotar a versão da API
function setAPIVersion(apiVersion: string) {
  return (constructor) => {
     return class extends constructor {
       version = apiVersion
     }
  }
}

@setAPIVersion("1.0.0")
class API {}

console.log(new API())

// Property decorator

function minLength(lenght: number) {
  return (target: any, key: string) => {
    let val = target[key]
    
    const getter = () => val
    
    const setter = (value: string) => {
      if (value.length < length) {
        console.log(`Error: ${key} cant be less then ${length}`)
      } else {
        val = value
      }
    }
    
    Object.defineProperty(target, key, {
      get: getter,
      set: setter
    })
  }
}

class Movie {
  // validaço - se for menor que 5 - erro
  @minLength(5)
  title: string
  
  constructor(t: string) {
     this.title = t
  }
}

const movie = new Movie('Interstellar')
console.log(movie)

// Method decorator

function delay(ms: number) {
  return (target: any, key: string, descriptor: PropertyDescriptor) => {
    const originalMethod = descriptor.value
    
    descriptor.value = function(...args) {
      console.log(`Esperando ${ms}...`)
      setTimeout(() => {
        originalMethod.apply(this, args)
      }, ms)
      
      return descriptor
    }
  }
}

class Person {
  name: string
  
  constructor(n: string) {
     this.name = n
  }
  
  @delay(2000)
  showName() {
    console.log(this.name)
  }
}

const Tonho = new Person('Anthony')
Tonho.showName() // will wait for 2 segs