{"id":25982675,"url":"https://github.com/combizera/origamid-typescript","last_synced_at":"2025-09-05T22:33:25.778Z","repository":{"id":238896692,"uuid":"797883074","full_name":"combizera/origamid-typescript","owner":"combizera","description":null,"archived":false,"fork":false,"pushed_at":"2024-08-03T02:10:53.000Z","size":44,"stargazers_count":0,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-04T03:37:05.883Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/combizera.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-08T17:11:37.000Z","updated_at":"2024-08-03T02:10:56.000Z","dependencies_parsed_at":"2024-05-18T23:19:21.392Z","dependency_job_id":"1d45f20d-d771-4592-8b47-d773210f8cd0","html_url":"https://github.com/combizera/origamid-typescript","commit_stats":null,"previous_names":["combizera/origamid-typescript"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/combizera%2Forigamid-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/combizera%2Forigamid-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/combizera%2Forigamid-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/combizera%2Forigamid-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/combizera","download_url":"https://codeload.github.com/combizera/origamid-typescript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242003913,"owners_count":20056362,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-05T09:40:08.025Z","updated_at":"2025-03-05T09:40:08.504Z","avatar_url":"https://github.com/combizera.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Aprendendo Typescript\n\n## Configuração básica do TypeScript\n\nArquivo tsconfig.json\n\n```\n{\n  \"compilerOptions\": {\n    \"target\": \"ESNext\",\n    \"strict\": true,\n  }\n}\n\n```\n\nDocumentação oficial para ver quais elementos herdam de quem no DOM\n\n[Documentação Mozilla](https://developer.mozilla.org/en-US/docs/Web/API)\n\n## any\n\nSempre que possível (pra não dizer sempre), evitar criar variáveis que recebam 'any', pois fica muito vago e quase perde-se o sentido de usar Typescript. Perde-se a segurança e facilidade de uso.\n\n### Quando faz sentido?\n\nQuando estivermos recebendo os dados de uma API, pq dela pode vir string, number, array, etc, então quando vamos padronizar essa recebimento para json é aconselhavel usar any;\n\n## null\n\nnull é um tipo primitivo que representa a ausência de valor. É comum em funções do DOM que fazem uma busca, retornarem null quando não são bem sucedidas.\n\n## undefined\n\nundefined representa variáveis/propriedades que foram instanciadas, porém, os seus valores ainda não foram definidos.\n\n## instanceof\n\nExistem funções que retornam diferente tipos de objetos. Com a palavra chave _instaceof_ podemos verificar se um objeto é uma instância (foi construído ou herda) de uma função construtora (class)\n\n## querySelectorAll\n\nO querySelectorAll retorna uma NodeList de elementos. Não confundir o nome da interce NodeListOf com o nome da classe NodeList\n\n### Anotação\n\nEle reforçou bastante na aula que o querySelectorAll retorna uma NodeList, que é diferente de um array, em um array por exemplo podemos passar uma função de filter, em uma NodeList não, então via de regra o ideal é transformarmos a NodeList em array, exemplo\n\n```\n// Aqui é NodeList\nconst $links = document.querySelectorAll('.link');\n\n// Aqui é um array\nconst array = [1,2,3];\n\n// Transformamos em array\nconst arrayLinks = Array.from($links);\n```\n\n## Event e instanceof\n\nUma função, quando criada para ser executada em diferentes tipos de eventos, deve receber como parâmetro o tipo comum entre elas Event\n\n## this\n\nDentro de uma função, o this faz referência ao objeto que executou a mesma. No JS o this pode ser passado como o primeiro parâmetro da função, mesmo não sendo necessário informar ele durante a execução.\n\n### atenção\n\nO TS não executa o JS, assim ele não consegue assumir qual será o target ou currentTarget do evento executado. Os elementos são definidos como o tipo EventTarget, pois é o tipo mais comum entre os elementos que podem receber um evento. Ou seja, no TS evitar usar this, preferir o event.currentTarget;\n\nAo invés disso:\n\n```\nconst $button = document.querySelector('button');\n\nfunction handleClick(this: HTMLButtonElement, event:MouseEvent){\n  console.log(this);\n}\n\nhandleClick();\n\n$button?.addEventListener('click', handleClick);\n```\n\nOptar por isso:\n\n```\n\n```\n\n## generic\n\nUm tipo genérico é uma forma de declararmos um parâmetro para a nossa função, classe ou interface. Esse tipo poderá ser indicado no momento do uso da função através de \u003cTipo\u003e.\n\n## extends\n\nÉ possível indicar que o tipo genérico deve herdar de uma interface específica com o extends\n\n## void\n\nNo Js, uma função sem reeturn irá retornar undefined. No TS o retorno é definido como void. Isso evita usos errados como checagens booleans de métodos que não possuem retorno.\n\n## never\n\nO never é utilizado em casos onde a função gera um erro ou termina a aplicação\n\n## overload\n\nExistem funções que retornam diferentes dados dependendo do argumento.\n\nPodemos declarar a interface dessas funções utilizando function overload. Basta declarar a interface antes da definição da mesma, utilizando o mesmo nome.\n\nO overload deve ser compatível com a função original.\n\n## Guard, Safety e Narrowing\n\nO Type Guard(defesa) garante a Type Safety (segurança) do dado dentro do bloco condicional. Esse processo é chamdo de Type Narrowing (estreitamento).\n\nO TS faz Control Flow para entender qual o dado dentro da condicional.\n\n## Unknown\n\nIndica que não sabemos o tipo de dados que pode ser passado. Diferente do any, o unknown só irá permitir o uso de métodos quando a Type Safety estiver garantida.\n\n### uso\n\nVamos usar o unknown bem mais que o any pq ele meio que força vc a passar um typeguard para o elemento, deixando o código menos suscetível a erros.\n\n## as\n\nCom o Type Assertion é possível \"indicar\" ao TS qual o tipo de dado esperado com a palavra-chave `as`. Só é possível indicar tipos que possuam relação com o tipo original.\n\nEvitar ao máximo o uso de Type Assertion, pos a segurança (Type Safety) é perdida quando indicamos algo que nem sempre será verdade.\n\n### !non-null operator\n\nIndica que não existe a possibilidade do dado ser null. Cuidado com o uso, pois pode levar a erros no runtime. Use apenas se tiver certeza.\n\nEsse é um operador de TS `!.` e não de JS como o `?.`. Durante a compilação ele será removido.\n\n### Outras sintaxes\n\n```\nconst video1 = document.querySelector('.player') as HTMLVideoElement;\nconst video2 = \u003cHTMLVideoElement\u003edocument.querySelector('.player');\nconst video3 = document.querySelector\u003cHTMLVideoElement\u003e('.player');\nconst video4 = document.querySelector('.player');\n\nvideo1.volume;\nvideo2.volume;\nvideo3?.volume;\n(video4 as HTMLVideoElement).volume\n```\n\n## Destructuring\n\nDurante a desestruturação é necessário indicar o tipo exato do dado esperado pelo TS. Ex: um `currentTarget` pode ser `EventTarget | null`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcombizera%2Forigamid-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcombizera%2Forigamid-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcombizera%2Forigamid-typescript/lists"}