Last active
October 21, 2020 02:32
-
-
Save AnthonyTailer/6635d01f07e5710d10ccf35821a8da4c to your computer and use it in GitHub Desktop.
TypeScript basics
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
/** 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 } |
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
// 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) | |
}) |
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
// 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 | |
} | |
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
// 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 | |
} |
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
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() |
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
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 | |
} | |
} |
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
// 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()) |
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
// 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 | |
} |
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
// @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 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment