DEV Community: Mago Acadêmico

🧙‍♂️ Aprenda Conditional Types no TypeScript

Mago Acadêmico — Tue, 10 Jun 2025 07:32:58 +0000

Se você quer levar seu conhecimento de TypeScript para o próximo nível, você precisa entender sobre Conditional Types (Tipos Condicionais). Aprender isso com certeza irá te colocar na frente da maioria dos desenvolvedores Typescript, já que poucos conhecem sobre.

Antes de tudo: Conceitos fundamentais

Para entender os Conditional Types, é necessário dominar três conceitos do TypeScript:

Generics
extends
Ternário

1. Generics

Leia esse outro artigo que fiz caso você não saiba o que é:

🧙‍♂️ Typescript Generics - O que é, porque existe e como utilizar

2. Extends

Usado para impor que um tipo herda (ou estende) outro tipo.

interface A {
  name: string;
}

// B tem todas as propriedades de A
interface B extends A {
  age: number;
}

Nos Conditional Types, o extends é usado como parte de uma condição (não é a mesma funcionalidade do examplo, mas você irá entender mais pra frente)

3. Operador Ternário

Muito conhecido de outras linguagens, o ternário permite retornar valores diferentes baseado em uma condição:

condição ? valorSeVerdadeiro : valorSeFalso

Esses três elementos formam a base dos Conditional Types.

O que são Conditional Types?

Um Conditional Type permite criar um tipo baseado em uma condição lógica entre dois tipos.

A base dos Conditional Types:

Usar um Conditional Types, nada mais é do que você colocar uma verificação no seu tipo, onde você usa extends para verificar e usa o ternário para retornar o tipo dependendo da verificação.

type Teste<T> = T extends string ? true : false;

type A = Teste<string>; // true
type B = Teste<number>; // false

Aqui, o tipo Teste verifica se T é uma string. Se sim, retorna true, senão false.

Para simplificar, você pode imaginar o seguinte:

T extends string => T === string
... ? true : false; => if(...) { return true } else { return false }

A syntax pode parecer complicada, mas você pode imaginar como se fosse vários if e else.

Usos práticos com Conditional Types

1. Remover tipos null ou undefined

O TypeScript já possui o tipo NonNullable, mas ele pode ser recriado usando Conditional Types:

type NonNullableCustom<T> = T extends null | undefined ? never : T;

type A = NonNullableCustom<string | null>; // string

Nesse caso, para "excluir" um tipo, você retorna o tipo never.

2. Recriando o tipo Extract

O TypeScript já possui o tipo Extract, mas ele pode ser recriado usando Conditional Types:

type ExtractCustom<T, U> = T extends U ? T : never;

Por exemplo:

type A = ExtractCustom<string | number, string>; // string

Nesse caso, você pode ver como é possível passar vários parâmetros genéricos e usa-los nas condições.

Recursividade com Conditional Types

Como exemplo, suponha que você quer extrair qual é o tipo de um array. No Typescript, você pode usar [number] para accessar o tipo do array.

type ArrayValue<T extends any[]> = T[number];

type A = ArrayValue<string[]>; // => string
// Mesma coisa que fazer "string[][number]" => string

Mas esse exemplo tem um problema, porque ele não funciona para arrays de multiplas dimensões:

type ArrayValue<T extends any[]> = T[number];

type A = ArrayValue<string[][]>; // => string[], mas era para ser apenas string

E é ai que entra o Conditional Types para resolver esse problema.

Porque no Conditional Types, você pode chamar o próprio tipo recursivamente

type DeepArrayValue<T> = T extends any[] // verifica se é um array qualquer
  ? DeepArrayValue<T[number]> // extrai o tipo do array e passa de novo para o próprio tipo
  : T; // retorna o tipo quando ele não é mais um array

type A = DeepArrayValue<string[][][]>; // string

Você poderia "traduzir" o código a cima como se fosse um if e else da seguinte forma:

function DeepArrayValue(T) {
  if(T === qualquer_array) { // verifica se é um array qualquer
    const tipo_do_array = T[number] // extrai o tipo do array
    return DeepArrayValue(tipo_do_array) // chama de novo a função com o tipo extraido
  } else {
    return T // retorna o tipo quando ele não é mais um array qualquer
  }
}

Para acabar com a recursividade, você acaba retornando o próprio T quando ele não é mais um "array qualquer".

Considerações Finais

Conditional Types é extremamente poderosos no TypeScript e com ele foi criado a maioria dos tipos já existentes (como o NonNullable e Extract que vimos anteriormente)

Não vai ser todos os dias que vai criar um Conditional Types do zero, mas pode ter certeza que você vai usar bastante algum tipo já existente do Typescript que usa ele e por isso é sempre bom entender como funciona o Conditional Types.

Esse artigo foi baseado no meu vídeo: Apenas 1% dos devs sabem disso no TypeScript

Se tiver dúvidas ou sugestões, deixe nos comentários!

Como Usar a API do ChatGPT com Node.js

Mago Acadêmico — Sun, 08 Jun 2025 12:03:04 +0000

Neste artigo, vamos te ensinar passo a passo como usar a API da OpenAI, desde a criação da conta até o uso avançado com funções (tools) e boas práticas.

Esse conteúdo foi criado primeiro em video e depois convertido para um artigo

Criando Sua Conta na OpenAI

Para começar, você precisa criar uma conta diretamente na plataforma da OpenAI, e não no site do ChatGPT (são coisas diferentes). Essa conta te dará acesso à API Key necessária para autenticar suas requisições.

Vá em Settings > API Keys e crie uma nova chave secreta.

Guarde-a em local seguro, nunca a exponha publicamente, pois ela permite consumo pago da API.

Se for sua primeira vez, a OpenAI pode fornecer créditos gratuitos de teste. Após o fim dos créditos, será necessário adicionar um cartão de crédito na aba Billing.

Dica Importante

Por padrão vem habilitado a opção "Auto Recharge", que irá cobrar no seu cartão de credito sempre que acabar seus creditos.

Se você não tiver um aplicativo rodando em produção, recomendo desabilitar essa opção.

Se você quiser ir além, você pode até excluir o cartão de crédito da conta.

Configurando a API da OpenAI com com Node.js

Instale os pacotes:

npm install openai dotenv

Crie um arquivo .env e adicione sua chave:

OPENAI_API_KEY=sua_chave_secreta

import { OpenAI } from 'openai';
import * as dotenv from 'dotenv';
dotenv.config();

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

Dica Importante:

Adicione o seu arquivo .env no .gitignore para evitar que você faça um commit com esse arquivo, pois se a sua API Key vazar na internet, qualquer um poderá fazer chamadas com a sua chave e gastar seus créditos.

Usando a API de Chat

A OpenAI oferece várias APIs, mas para criar um chatbot, usamos o chat.completions.

const completion = await openai.chat.completions.create({
  model: "gpt-4",
  messages: [
    { role: "user", content: "Olá, tudo bem?" }
  ],
});
console.log(completion.choices[0].message.content);

Essa API recebe as mensagens do chat e cada mensagem tem uma role, que indica quem mandou a mensagem.

Roles mais comuns:

user: mensagem enviada pelo usuário
assistant: resposta gerada pelo modelo
system: define regras ou contexto do modelo

Usando Functions (Tools)

Eu diria que essa é uma das melhores funcionalidades dessa API.

Com as tools, o modelo pode chamar funções do seu backend dinamicamente.

Primeiro você irá definir quais funções da sua aplicação a sua AI pode chamar.

Exemplo:

const tools = [
  {
    type: "function",
    function: {
      name: "getWeather",
      description: "Retorna o clima atual de uma cidade",
      parameters: {
        type: "object",
        properties: {
          city: { type: "string", description: "Nome da cidade" }
        },
        required: ["city"]
      }
    }
  }
];

A partir das descrições fornecidas, a IA pode entender que precisa chamar essa função e então ela retornará tool_calls que contêm qual função chamar e os parâmetros para passar.

const completion = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: [
    { role: "user", content: "Qual o clima em São Paulo?" }
  ],
  tools,
  tool_choice: "auto"
});

const toolCall = completion.choices[0].message.tool_calls?.[0];

if (toolCall) {
  const { name, arguments: args } = toolCall.function;
  // Chame a sua função com os parâmetros fornecidos.
}

Você irá chamar a sua função e chamar de volta a API com o resultado da sua função passando role: "tool"

const finalResponse = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [
      // ... resto das mensagens
      {
        role: "tool",
        tool_call_id: toolCall.id,
        content: JSON.stringify(result),
      },
    ],
  });

Moderação de Conteúdo Gratuita

A OpenAI oferece uma API gratuita chamada moderations, usada para identificar conteúdo sensível, ofensivo ou perigoso.

const result = await openai.moderations.create({
  input: "mensagem do usuário"
});
console.log(result.results[0].flagged); // true ou false

Eu recomendo muito você usar isso, principalmente quando você tiver algo em produção, porque além de trazer uma segurança para sua aplicação, também é de graça.

Mas também vale ressaltar que seus requests poderão ficar mais lentos, pois você irá chamar duas APIs, a moderations e a API que você estiver utilizando.

Gerando imagens

E para gerar imagens, é muito fácil:

const img = await client.images.generate({
  model: "gpt-image-1",
  prompt: "A cute baby sea otter",
  n: 1,
  size: "1024x1024"
});

Conclusão

É muito fácil usar a API da OpenAI e a tools te permite integrar IA em sua aplicação. Se você quer ter um projeto de destaque no seu portifólio, recomendo criar uma aplicação simples e integrar um um chat que faz as ações para você.

Você também precisa ficar atento a alguns detalhes:

Cuidado ao armazenar a API_KEY
Use ferramentas gratuitas de moderação
Fique atento com os preços de cada modelo e se você não estiver rodando algo em produção, teste sempre com o mais barato: https://platform.openai.com/docs/pricing
Leia Safety best practices e Production best practices

Video original desse artigo: Como Usar ChatGPT com API da OpenAI no NodeJs
*Esse artigo foi convertido para texto usando IA

Se ficou com alguma dúvida, deixe seu comentário ou sugestão!

🧙‍♂️ Todas as novas funcionalidades do Javascript desde 2016 até 2025

Mago Acadêmico — Sat, 30 Nov 2024 11:19:00 +0000

O Javascript evoluiu bastante com o passar do tempo e nem todo mundo sabe como funcionam os métodos mais recentes da linguagem, portanto fiz um compilado simplificado explicando a maioria dos métodos e funcionalidades lançados desde 2016 até 2025.

Não coloquei funcionalidades que são mais complexas, como promises ou mudanças no regex, mas veja o link da fonte caso você queira mais detalhes

array.includes: Este método permite verificar se um array contém um determinado elemento. É muito bom para elementos do tipo number e string, mas tome cuidado ao verificar objetos, pois ele irá verificar por referência e não se o objeto contém as mesmas propriedades
Operador de exponenciação (`)**: Este operador é usado para calcular a potência de um número, substituindo a necessidade de usar o método Math.pow. E se você está se quanto é zero elevado a zero (0 ** 0`), sim, é 1.
Object.values e Object.entries: Object.values retorna um array com os valores das propriedades enumeráveis de um objeto. Object.entries retorna um array de pares [chave, valor] das propriedades enumeráveis de um objeto. Esses métodos são úteis quando você usa em conjunto com métodos de array, como Array.map ou Array.filter.
string.{padStart,padEnd}: Esses métodos permitem preencher uma string no início ou no final com um caractere especificado, até que a string atinja o comprimento desejado.
Vírgulas finais em listas de parâmetros e chamadas de função: Permite adicionar uma vírgula após o último parâmetro de uma função ou argumento em uma chamada de função. Isso faz com que na hora de editar um código, você só mude uma unica linha, criando menos edições no código e permitindo que o git blame mostre a pessoa certa.
Spread Operator ...: Você pode usar o operador ... para passar todas as propriedades de um objeto para outro. Você tambem pode usar isso com arrays, passando todos os elementos de um array para o outro, mas tome cuidado para não juntar um objeto com um array, pois dará erro.
Object.fromEntries: Este método é o inverso de Object.entries, permitindo criar um objeto a partir de uma lista de pares [chave, valor].
string.{trimStart,trimEnd}: Estes métodos permitem remover espaços em branco do início (trimStart) ou do final (trimEnd) de uma string.
array.{flat,flatMap}: flat achata arrays dentro de arrays, podendo diminuir o número das dimensões de uma matrix. Por exemplo, você pode transformar uma matrix de 2 dimensões em um array (uma dimensão)
string.matchAll: Este método retorna todas as correspondências de uma expressão regular em uma string. A vantagem desse método é que ele retorna um iterator e você pode computar o regex dentro de um loop e só executar o que for necessário.
BigInt: Introduz o tipo de dado BigInt, que permite representar e operar em números inteiros muito grandes, além do limite dos números inteiros tradicionais (Number). Para representar um BitInt, basta colocar um n depois do número. Por exemplo 123n. Mas tome cuidado ao comparar BigInts com número "normais", pois você precisará converter os números.
Encadeamento opcional (Optional Chaining): Este operador (?.) permite acessar propriedades profundamente aninhadas em objetos sem precisar verificar manualmente se cada referência no caminho é null ou undefined.
Operador de coalescência nula (??): Este operador retorna o valor à direita se o valor à esquerda for null ou undefined, permitindo um fallback mais seguro.
string.replaceAll: Este método substitui todas as ocorrências de uma string ou expressão regular em uma string por outra string, sem precisar usar o flag g manualmente.
Operadores de atribuição lógica: Combina operadores lógicos (&&, ||, ??) com atribuição, permitindo expressões mais curtas e legíveis para certas operações lógicas.
Separador numérico _: Que numero é esse 100000000? É dificil de falar o nome do numero e ver quantas casas decimais ele tem imediatamente, mas você pode usar um separador numerico (_) para separar dígitos do número, tornando-os mais legíveis sem afetar seu valor. Por exemplo 100_000_000 ficaria muito mais facil de entender. Lembrando que pode ser qualquer quantidade de casas, por exemplo 1_0_0_0_0_0, que é estranho, mas funciona.
array.at(): Este método fornece uma maneira de acessar elementos de arrays e strings usando índices positivos ou negativos, fazendo com que acessar o ultimo index do array seja muito mais facil. Basta passar .at(-1).
Object.groupBy e Map.groupBy: Permite agrupar valores de um array baseado no valor retornado por uma função. Object.groupBy retorna um objeto e Map.groupBy retorna um Map.
Novos métodos da classe Set: Para explicar esses novos métodos eu achei muito mais fácil você ver os Vens Diagrams da própria documentação: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set_composition

Para ver a lista completa: https://github.com/tc39/proposals/blob/HEAD/finished-proposals.md
Se você prefere consumir esse conteúdo em video e com códigos de exemplo, veja em https://youtu.be/7ZRLIztfD6U

🧙‍♂️ Tutorial Typescript para Iniciantes

Mago Acadêmico — Tue, 09 Apr 2024 07:28:45 +0000

Nesse artigo você irá aprender o básico do Typescript.

Está incluso:

Declarar variáveis
Objetos com tipos e interfaces
Arrays e tuplas
Funções

É bom que você saiba pelo menos o básico do Javascript ou de alguma outra linguagem de programação.

Tipos Básicos do Typescript.

O primeiro conceito que você precisa entender são os tipos básicos do Typescript.

No Javascript, existem classes (que não são a mesma coisa que tipos) para strings, booleans, arrays, etc. Essas classes do Javascript são diferentes do tipos do Typescript.

As classes do Javascript começam com letra maiúscula e os tipos do Typescript com letra minúscula.

//  Tipo TS \/    
cont foo: string = String('foo') 
//                   /\ Class JS

Você até pode usar a classe como sendo o tipo no Typescript, mas o recomendado é usar com letra minúscula.

//         \/ Funciona, mas não é recomendado    
cont foo: String = String('foo')

E os tipos básicos do Typescript são

string
boolean
number
null
undefined

Existem outros tipos, mas por enquanto esses são os básicos

Declarando Variáveis

Com esses tipos básicos, você pode declarar variáveis da seguinte forma:

const foo: string = 'foo'
const num: number = 123
const check: boolean = true

Na maioria dos casos, se você não passar o tipo da variável, o Typescript vai inferir o tipo automaticamente.

// Typescript já saberá que 'num' é do tipo number
const num = 123

Objetos com Tipos e Interfaces

Existem dois jeitos de definir um tipo para um objeto.

Você pode usar type

type Foo = {
   prop1: number
   prop2: string
}

Ou usar interface

interface Foo {
   prop1: number
   prop2: string
}

Existe uma certa diferença entre type e interface, mas os dois podem ser usados um no lugar do outro na maioria dos casos. Para iniciantes eu recomendo usar qual você preferir e aprender depois a diferença quando chegar em algo mais avançado.

E você usa esses tipos ao declarar objetos da seguinte forma:

const foo: Foo = {
  prop1: 123,
  prop2: 'abc'
}

Você pode definir uma propriedade opcional no tipo do seu objeto usando o ? antes do :.

interface Foo {
   prop1: number
   prop2?: string
}

Assim, você poderia criar um objeto sem passar prop2, pois ela é opcional

const foo: Foo = {
  prop1: 123,
  // não da erro se você não passar prop2
}

Definindo Array e Tuplas

Para definir um array, você pode passar [] depois do tipo do array.

//                \/ Array de string
const strs: string[] = ['foo', 'FOO']

//             \/ Array de "Foo"s
const foos: Foo[] = [{ ... }]

Você também pode definir uma matrix (array de array) passando [] novamente

//                \../ Matrix de strings
const strs: string[][] = [['foo'], ['FOO']]

//             \../ Matrix de "Foo"s
const foos: Foo[][] = [[{ ... }], [{ ... }]]

Outra forma de criar um array é usando o tipo Array, que ira receber o tipo do array através de um parâmetro genérico.

Talvez essa parte já seja um pouco mais avançada, mas Generics é um conceito muito importante para aprender que existem em varias linguagens de programação. Eu fiz um video no youtube sobre Generics que explica desde como surgiu e para o que server Generics que irá ficar bem fácil de entender.

//           \/ Array de string
const strs: Array<string> = ['foo', 'FOO']

//           \/ Array de "Foo"s
const foos: Array<Foo> = ['foo', 'FOO']

Uma outra forma de definir um array é definindo uma Tupla (Tuple em inglês).

Uma Tupla é um array em que o numero de elementos é fixo e os tipos de cada elemento também são fixos

Abaixo temos uma tupla, que possui dois elementos, onde o primeiro é uma string e o segundo é um numero.

const tupla: [string, number] = ['foo', 123]

Você pode definir quantos elementos quiser na sua Tupla, basta continuar acrescentando tipos.

const tupla: [string, number, boolean, Foo, ...] = [ ... ]

Funções

Ao criar uma função no Typescript, você pode definir os tipos dos parâmetros e o tipo do retorno da função.

//   Tipo do parâmetro \/      \/ Tipo do retorno da função   
const setFoo = (bar: string): void => {}

void é um tipo especial que significa que a função não retorna nada.

Se você não passar o tipo do retorno da função o Typescript irá inferir automaticamente o que está sendo retornado.

//   Sem o tipo do retorno \/ 
const getFoo = (bar: string) => {
  // Typescript irá inferir que essa função retorna 'number'
  return 123
}

Se você tiver alguma duvida, comente aqui em baixo que eu vou responder você pessoalmente.

Se você prefere assistir o conteúdo desse artigo, eu fiz um video no youtube com o mesmo conteúdo:

Tutorial Typescript Iniciantes: Aprenda o Básico do Typescript

🧙‍♂️ 7 dicas para iniciantes em Typescript

Mago Acadêmico — Sun, 12 Mar 2023 13:46:39 +0000

Fala aprendizes, nesse artigo eu vou ensinar 7 dicas para você que está começando a aprender Typescript ou que quer começar, mas não sabe como.

Algumas dicas vão ser para quem está começando do zero com Typescript e outras pra quem já explorou um pouco mais do Typescript.

1. Use o Typescript Playground para praticar

No Typescript Playground você pode começar a programar em typescript sem precisar configurar todo o seu ambiente.

Ele também te da diversas informações extras que podem te ajudar a entender melhor como o Typescript funciona, como por exemplo:

Ver e editar o TS Config
Escolher diferentes versões
Ver o código JS e TS gerado
Ver erros, logs

2. Aprenda sobre as diferentes configurações do Typescript

O Typescript possui muitas configurações e aprender todas pode ser difícil, mas algumas são importantes e podem fazer muita diferença na hora de programar, portanto recomendo que você aprenda ou de uma olhada nas seguintes configurações:

strictNullChecks
- Verifica todas as variáveis que são null ou undefined e da erro caso você tente acessar uma propriedade de uma variável que é null ou undefined
- Muito util para evitar erros como Cannot read property X of null|undefined
noImplicitAny
- Typescript dará um erro quando você declarar algo sem um tipo
- Ajuda a manter o código sempre com tipos
allowJs
- Permite que você use arquivos Javascript junto com Typescript
- Ajuda muito caso você queria converter um projeto de Javascript para Typescript, mas de maneira incremental, aos poucos.

Video curto sobre essas 3 configurações

3. Entenda o que acontece quando se usa o Typescript

Quando você usa o Typescript, o que ele de fato faz é verificar se todos os tipos estão corretos e depois transformar o seu código Typescript em Javascript. Mas é importante lembrar que só porque não teve nenhum error no Typescript, não quer dizer que o seu código Javascript também não terá nenhum erro.

A verificação dos tipos no Typescript acontece só no seu editor de texto e na hora de compilar para Javascript, mas na hora de rodar o código Javascript, não tem como garantir que os tipos estarão certos.

Isso nos leva para a próxima dica…

4. Utilize o "strict mode" para garantir maior segurança e robustez no seu código.

Essa dica é para enfatizar a necessidade de usar a configuração strictNullChecks.

Isso te salvará de muitos erros no Javascript.

5. Converta códigos que você escreveu em Javascript para Typescript

Começar direto com Typescript pode ser um pouco complicado para um iniciante, então pegar um código em Javascript que você escreveu e converter para Typescript irá te ajudar muito, pois você já irá estar familiarizado com os tipos que você estará usando.

6. Aprenda sobre Generics

Essa dica é um pouco mais avançada, mas é fundamental para programar.
Quase tudo que você usar no Typescript estará usando Generics (Um array [] usa Generics).

Existem diversos conteúdos online e de graça para aprender Generics no Typescript, mas recomendo que você assista um video que fiz onde eu explico desde o começo do porque existe Generics até como usa-lo no Typescript.

Video: Aprenda Generics com Typescript do jeito certo!

7. Como a decifrar os erros do Typescript

Quando você começar a usar alguns tipos mais avançados no Typescript, pode ser que você encontre erros enormes e difíceis de entender.
A dica para entender esses erros é olhar para o fim do erro, no ultimo paragrafo, pois normalmente la estará a real causa do erro.

Caso você prefira assistir esse conteúdo em video: 7 dicas para iniciantes em Typescript

Dark Theme com React Navigation + Typescript + React Native Paper

Mago Acadêmico — Mon, 22 Aug 2022 15:00:43 +0000

Nesse artigo você irá aprender a como implementar temas claros e escuros e utiliza-los em todo seu aplicativo com React Native, React Navigation, React Native Paper e Typescript.

Você também pode ver esse tutorial em video e o repositório no Github.

Criando projeto React Native com Typescript

Para começar um projeto React Native com Typescript, basta rodar o seguinte comando.

npx react-native init NavigationTypescriptPaper --template react-native-template-typescript

Referência da documentação

Instalando React Navigation

Para instalar o React Navigation precisamos instalar os seguintes pacotes

yarn add @react-navigation/native react-native-screens react-native-safe-area-context

E dependendo do tipo de navegação que você usar, você instala apenas o pacote para aquele tipo. Para usarmos um Stack, precisamos instalar

yarn add @react-navigation/stack

Caso vocês esteja usando Mac, rode o comando

npx pod-install ios

E para Android, você precisa editar o arquivo MainActivity.java que fica em android/app/src/main/java/<nome do projeto>/MainActivity.java

import android.os.Bundle;
// ...

public class MainActivity extends ReactActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }

  // ...
}

Referência da documentação

Instalando React Native Paper

Para instalar o React Native Paper precisamos instalar os seguintes pacotes

yarn add react-native-paper react-native-vector-icons

Referência da documentação

Caso você esteja usando Mac, edite sei PodFile e adicione o seguinte código

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

E para Android, adicione a seguinte linha no arquivo android/app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Referência da documentação

Criando o ThemeContext e ThemeContextProvider

Primeiro iremos importar os temas tanto do React Navigation como do React Native Paper

import {
  DarkTheme as NavigationDarkTheme,
  DefaultTheme as NavigationDefaultTheme,
  NavigationContainer,
} from '@react-navigation/native';
import {
  DarkTheme as PaperDarkTheme,
  DefaultTheme as PaperDefaultTheme,
  Provider as PaperProvider,
} from 'react-native-paper';

E assim iremos dar um merge nos temas, criando um tema light com a junção dos dois temas default e um tema dark com a junção dos dois temas dark.

const lightTheme = {
  ...NavigationDefaultTheme,
  ...PaperDefaultTheme,
  colors: {
    ...NavigationDefaultTheme.colors,
    ...PaperDefaultTheme.colors,
  },
};

const darkTheme = {
  ...NavigationDarkTheme,
  ...PaperDarkTheme,
  colors: {
    ...NavigationDarkTheme.colors,
    ...PaperDarkTheme.colors,
  },
};

Assim teremos os dois temas definidos com os valores default dos dois pacotes e poderemos adicionar nossas próprias cores caso desejado.

Em seguida já podemos definir 2 tipos que usaremos sobre o nosso tema. O primeiro é criar um tipo que definira o nosso tema, utilizando o typeof do lightTheme, assim caso adicionemos alguma configuração a mais no nosso tema, ele é refletido para o tipo.

export type Theme = typeof lightTheme;

E também definiremos os tipos de temas que teremos, que no caso será light e dark.

export type ThemeType = 'dark' | 'light';

Assim já podemos definir quais dados teremos no nosso context. Passaremos o tema atual, assim como seu tipo, um booleano indicando se o tema é dark, para facilitar a comparação na hora de utilizar, uma função para alternar o valor do tema e outra para atualizar diretamente o tema caso seja necessário.

export interface ThemeContextValue {
  theme: Theme;
  themeType: ThemeType;
  isDarkTheme: boolean;
  toggleThemeType: () => void;
  setThemeType: React.Dispatch<React.SetStateAction<ThemeType>>;
}

E assim utilizaremos React.createContext para criar o contexto e passaremos valores default para cara propriedade.

export const ThemeContext = React.createContext<ThemeContextValue>({
  theme: lightTheme,
  themeType: 'light',
  isDarkTheme: false,
  setThemeType: () => {},
  toggleThemeType: () => {},
});

Como vamos utilizar hooks, já podemos criar o nosso próprio hook que chamaremos de useTheme, simplesmente para facilitar a utilização desse contexto.

export const useTheme = () => useContext(ThemeContext);

Agora iremos para a implementação do context, onde criaremos um componente ThemeContextProvider e a interface para suas props.

export interface ThemeContextProviderProps {
  children: React.ReactNode;
}

export const ThemeContextProvider = ({children}: ThemeContextProviderProps) => {
    // ...
}

Dentro dele utilizaremos o useColorScheme para saber se o celular está no modo normal ou dark mode e passaremos esse valor para um useState onde armazenaremos o tipo do tema.

export const ThemeContextProvider = ({children}: ThemeContextProviderProps) => {
    const colorScheme = useColorScheme();
    const [themeType, setThemeType] = useState<ThemeType>(colorScheme || 'light');

    // ...
}

Criaremos uma simples função para alternar o tipo do tema.

export const ThemeContextProvider = ({children}: ThemeContextProviderProps) => {
    // ...

    const toggleThemeType = useCallback(() => {
      setThemeType(prev => (prev === 'dark' ? 'light' : 'dark'));
    }, []);

    // ...
}

E também definiremos isDarkTheme e o tema em si a ser utilizado

export const ThemeContextProvider = ({children}: ThemeContextProviderProps) => {
    // ...

    const isDarkTheme = useMemo(() => themeType === 'dark', [themeType]);
  const theme = useMemo(
    () => (isDarkTheme ? darkTheme : lightTheme),
    [isDarkTheme],
  );

    // ...
}

Agora que temos todos os valores do nosso context definidos, podemos renderizar o NavigationContainer e o PaperProvider para passar o tema e também nosso provider com os valores do context.

O componente completo ficaria da seguinte forma

export const ThemeContextProvider = ({children}: ThemeContextProviderProps) => {
  const colorScheme = useColorScheme();
  const [themeType, setThemeType] = useState<ThemeType>(colorScheme || 'light');

  const toggleThemeType = useCallback(() => {
    setThemeType(prev => (prev === 'dark' ? 'light' : 'dark'));
  }, []);

  const isDarkTheme = useMemo(() => themeType === 'dark', [themeType]);
  const theme = useMemo(
    () => (isDarkTheme ? darkTheme : lightTheme),
    [isDarkTheme],
  );

  return (
    <NavigationContainer theme={theme}>
      <PaperProvider theme={theme}>
        <ThemeContext.Provider
          value={{
            theme,
            themeType,
            isDarkTheme,
            setThemeType,
            toggleThemeType,
          }}>
          {children}
        </ThemeContext.Provider>
      </PaperProvider>
    </NavigationContainer>
  );
};

Utilizando o Context e alterando o tema

Em nosso App.tsx iremos renderizar o ThemeContextProvider e dentro dele utilizaremos um stack para a navegação através do createStackNavigator. Dentro desse stack teremos uma tela apenas para demonstrar que o tema está funcionando.

const TestScreen = () => {
    // ...
};

const Stack = createStackNavigator();

const App = () => {
  return (
    <ThemeContextProvider>
      <Stack.Navigator>
        <Stack.Screen name="Test" component={TestScreen} />
      </Stack.Navigator>
    </ThemeContextProvider>
  );
};

Dentro da nossa tela de teste, podemos utilizar o custom hook que criamos useTheme para pegar os valores do context e utilizarmos da forma que preferirmos.

const TestScreen = () => {
  const {toggleThemeType, themeType, isDarkTheme, theme} = useTheme();

  return (
    <View>
      <Button mode="contained" onPress={toggleThemeType}>
        Toggle Theme
      </Button>
      <Headline>{themeType}</Headline>
      <Headline>isDarkTheme: {`${isDarkTheme}`}</Headline>
      <Headline>Primary: {theme.colors.primary}</Headline>
    </View>
  );
};

Assim, apertando o botão podemos ver que o tema muda.

Podemos analisar também que se você colocar o celular no modo escuro, o aplicativo já inicia o tema como dark.

ES6? ECMAScript? Entenda o que isso tem a ver com o Javascript

Mago Acadêmico — Mon, 13 Jun 2022 16:03:41 +0000

ES6 se refere a 6ª versão do ECMAScript.
ECMAScript é uma especificação de uma linguagem de script e o Javascript é a implementação dessa especificação.

O ECMAScript existe pois cada browser, seja chrome, firefox ou qualquer outro, possui diferentes implementações para que você possa rodar seu código Javascript, mas todos devem seguir a mesma especificação.

Imagina se para cada browser tivesse uma especificação diferente? Seria uma loucura

Algumas features novas no ES6

// Declaração de variáveis com let e const
let varLet = 123;
const varConst = 456;

// Arrow function
const arrowFunction = () => {};

// Classes
class Classes {}

// Template string
const templateStr = `${varLet} ${varConst}`;

// Promises
const delay = (duration = 0) =>
  new Promise((resolve, reject) => {
    setTimeout(resolve, duration);
  });

await delay(1000)

// E muito mais ...

ES7

// Array includes
[1, 2, 3].includes(1) // => true
[1, 2, 3].includes(9) // => false
// Operador de exponenciação
10 ** 3 // => 10 * 10 * 10 = 1000

ES8

// Async function
const asyncFunc = async () => {
    await delay();
}

// Object.entries e Object.values
const obj = { siga: 'agora', like: true }
Object.entries(obj) 
// => [['siga', 'agora'], ['like', true]]
Object.values(obj)
// => ['agora', 'true']

// E muito mais ...

E existem varias outras versões como ES9, ES10, etc.

Se você quer ver todas as versões e entender mais sobre:

Cuidado com esse código no Javascript

Mago Acadêmico — Sun, 01 May 2022 11:43:43 +0000

Cuidado com labels em javascript

Você sabe qual é o problema nesse código?

[1, 2, 3].map(x => {id: x})

Se você executar esse código, você verá que não terá nenhum erro, mas retornará um array de elementos undefined ao invés de retornar um array de objetos com a propriedade id.

Porque isso acontece? Primeiramente é importante entender como arrumar esse código.

Para retornar um objeto diretamente de uma arrow function é necessário utilizar () envolta do objeto, da seguinte forma:

// ❌ 
[1, 2, 3].map(x =>   {id: x}   ) // => [undefined, undefined, undefined]

// ✅ 
[1, 2, 3].map(x => ( {id: x} ) ) // => [{id: 1}, {id: 2}, {id: 3}]

Outra forma seria utilizar return

[1, 2, 3].map(x => {
    return {id: x} 
})

Então o que seria esse x => {id: x} ?

Na verdade, esse código deve ser visto da seguinte forma

[1, 2, 3].map(x => {
    id: x
})

E o que ele realmente representa é a utilização de um labeled statement ou também conhecido como label no Javascript.

Um label serve como um identificador para depois ser utilizador por um break ou um continue. Um exemplo seria quando se tem mais de um for loop dentro do outro e você deseja dar um break ou continue em um loop fora do escopo em que o código se encontra, ou seja, você está no loop de dentro, mas deseja dar um break no loop de fora.

loop1: for(let i = 0; i < 10; i++) { // loop de fora
    loop2: for(let i = 0; i < 10; i++) { // loop de dentro
        if(condition1) {
            break; // sai do loop2
        }
        if(condition2) {
            break loop2; // sai do loop2, igual a usar somente "break;"
        }
        if(condition3) {
            break loop1; // sai do loop1
        }
        if(condition4) {
            // labels tambem podem ser usados com "cotinue"
            continue loop1; // continua o loop1
        }
    }
}

Um label pode ser atribuído para qualquer variável, até mesmo for , while e escopos como label: { /* codigo javascript */ } e é dai que surge o erro no código.

Portanto, fique atento ao retornar objetos diretamente em uma arrow function para não cair no perigo de utilizar um label statement de maneira indesejada.

Diferença entre Any e Unknown do Typescript

Mago Acadêmico — Wed, 13 Apr 2022 16:04:53 +0000

Você sabe a diferença entre any e unknown?

any e unknown são tipos bem parecidos e podem parecer que são até iguais, mas possuem suas diferenças.

A confusão que se tem sobre esses dois tipos vem do fato de que, se criarmos uma função que recebe dois parâmetros, um do tipo any e outro do tipo unknown, veremos que podemos passar qualquer variável para ambos os tipos sem erros.

const foo = (anyType: any, unknownType: unknown) => {}

foo({}, {})
foo(123, 456)
foo(null, null)
foo(() => {}, () => {})

Mas é possível ver a diferença quando se usa essas variáveis.

Com any você pode atribuir qualquer tipo e usar como se fosse qualquer tipo. Já unknown você pode atribuir qualquer tipo, mas ao usar ele não é nenhum tipo e você precisará verificar qual é o tipo.

Uma variável do tipo any você pode ser usada como uma string ou como uma função e até mesmo como um objeto, mostrando que any é equivalente a todos os tipos.

const foo = (anyType: any, unknownType: unknown) => {
  const str1: string = anyType; // => ok
  anyType(); // => ok
  anyType.foo; // => ok
}

Já o unknown, mesmo podendo receber qualquer tipo, ele da erro quando se tenta usa-lo como qualquer tipo, portanto não se pode usa-lo como uma string, função, objeto ou qualquer outro tipo diferente de unknown.

const foo = (anyType: any, unknownType: unknown) => {
  const str1: string = anyType; // => ok
  anyType(); // => ok
  anyType.foo; // => ok

  const str2: string = unknownType; // => erro
  unknownType(); // => erro
  unknownType.foo; // => erro
}

Para você poder usar uma variável do tipo unknown, é preciso que se verifique o tipo antes. Para atribuir unknown para uma string, pode-se verificar utilizando typeof e ver se o tipo da variável é de fato string, e o mesmo pode ser feito para uma função.

const str2: string = unknownType; // => erro
if(typeof unknownType === 'string') {
  const str2: string = unknownType; // => ok
}

unknownType(); // => erro
if(typeof unknownType === 'function') {
    unknownType(); // => ok
}

Para verificar se uma variável é de um tipo mais especifico, como um objeto com algumas propriedades especificas, é necessário utilizar um user-defined type guard, que é uma função que o retorno dela define um type predicate, ou seja, define que uma variável é de um determinado tipo utilizando is.

interface Foo {
  foo: string
}

// user-defined type guard      *type predicate*
const isFooType = (foo: unknown): foo is Foo => {
  return (foo as Foo)?.foo !== undefined
}

unknownType.foo; // => erro
if(isFooType(unknownType)) {
    unknownType.foo; // => ok
}

Ao utilizar unknown ao invés de any você permite que seu código seja utilizado de forma muito mais segura.

Você sabe a diferença entre string[] e [string] no typescript?

Mago Acadêmico — Fri, 04 Mar 2022 00:48:37 +0000

Você sabe a diferença entre os tipos string[] e [string] ?

string[] é um array de strings, podendo ser um array vazio, com uma string, duas ou quantas strings você quiser.

let a: string[] = [] // => ok
let b: string[] = ['hello'] // => ok
let c: string[] = ['hello', 'world'] // => ok

Já o tipo [string] também pode ser considerado um array, mas possui uma característica específica, é um array que possui um numero de elemento fixo em que se sabe o tipo exato de cada elemento. Esse tipo também é conhecido como tupla (tuple).

Portanto, para a tupla [string] só se pode atribuir um array com um único elemento na posição inicial do tipo string, caso seja um array vazio ou com mais de um elemento, dará erro.

let d: [string] = [] // => error
let e: [string] = ['hello'] // => ok
let f: [string] = ['hello', 'world']  // => error

Também é possível ter tuplas com vários elementos e nem todos precisam ser do mesmo tipo

let g: [string, string] = ['hello', 'world'] // => ok
let h: [string, number] = ['hello', 123] // => ok
let i: [number, number, boolean] = [0, 1, true] // => ok

Também é possível adicionar labels para cara elemento da tupla, assim na hora de utilizar esse tipo, é possível saber ao que se refere cada posição do array.

let i: [x: number, y: number, z: boolean] = [0, 1, true]

Caso você queria assistir em vez de ler, segue o link do video.

Typescript Generics - O que é, porque existe e como utilizar

Mago Acadêmico — Mon, 28 Feb 2022 22:50:59 +0000

Entendendo como surgiu o Generics

Digamos que você não sabe nada sobre Generics e você quer criar uma função para verificar se dois números são iguais e caso não sejam, estourar um error.

Você poderia implementar essa função da seguinte forma:

const numMustBeEqual = (x: number, y: number) => {
  if (x !== y) throw new Error(`${x} isn't equal to ${y}`)
}

Mas digamos que depois de um também, você quer fazer o mesmo, só que com strings, então você poderia fazer algo como:

const numMustBeEqual = (x: number, y: number) => {
  if (x !== y) {
    throw new Error(`${x} isn't equal to ${y}`);
  }
};

const strMustBeEqual = (x: string, y: string) => {
  if (x !== y) {
    throw new Error(`${x} isn't equal to ${y}`);
  }
};

Mas criar duas funções que fazem a mesma coisa, apenas para poder receber tipos diferentes, não é algo muito bom.

Então você decide usar any para poder receber qualquer tipo.

const anyMustBeEqual = (x: any, y: any) => {
  if (x !== y) {
    throw new Error(`${x} isn't equal to ${y}`);
  }
};

Mas usar any não é uma boa pratica e também pode permitir com que se faça coisas como

anyMustBeEqual(123, "abc");

Onde se comprara strings com números, que claramente não são iguais.

E é ai que você percebe a necessidade de usar Generics.

Você quer fazer uma função que possa ser utilizada com mais de um tipo, mas sem especificar-lo, tendo parâmetros que são genéricos.

Utilizando Generics

Para utilizarmos um tipo genérico em nossa função, passaremos um parâmetro de tipo utilizando < e >, e dentro passaremos o nome do tipo que queremos.

const mustBeEqual = <T>(x: T, y: T) => {
  if (x !== y) {
    throw new Error(`${x} isn't equal to ${y}`);
  }
};

Você pode visualizar uma função genérica como tendo dois tipos de parâmetros. Parâmetros que se referem a um tipo (generics) e que se referem a uma variável.

Da mesma forma que você você criar um parâmetro em uma função utilizando ( + nome da variável + ), com parâmetros de tipo, utilizamos < + nome do tipo + >. Portanto T poderia ser qualquer outro nome.

Você também pode passar quantos parâmetros do tipo você quiser, utilizando , entre eles, pode passar valores default usando = e utilizar outros parâmetros também

const func = <T, V = number, K = V[]>(foo: T, bar: V, baz: K) => {}

Generics é usado não só em funções, mas em classes, interfaces e tipos. Para criar uma interface genérica, basta passar os parâmetros de tipo logo após o nome e utiliza-los como um tipo dentro da função.

interface Data<T> {
  id: T;
}

Um exemplo para utilizar essa interface genérica seria fazer uma função que filtra um array de Data<T> através de seu id

const filterById = <T>(id: T, data: Data<T>[]) => {
  return data.filter((x) => x.id !== id);
};

Utilizando Type Constraints

Essa função tem um pequeno detalhe, ela permite que se use id de qualquer tipo, podendo ser até mesmo um objeto ou um array, mas o id deve ser apenas string ou number.

Para resolver esse problema, precisamos definir que data apenas estenda a interface e não que seja idêntica a ela. Para isso, criaremos um novo parâmetro de tipo e definiremos uma restrição (type constraint) usando extends que restringirá esse tipo para extender Data<T>.

interface Data<T extends string | number> {
  id: T;
}

const filterByIdExtended = <T extends string | number>(id: T, data: Data<T>[]) => {
  return data.filter((x) => x.id !== id);
};

Dessa forma a função aceitará qualquer objeto que tiver uma propriedade id do mesmo tipo que o id utilizado.

Observações

Agora que você sabe o que é, porque existe e com usar Generics, você pode ter percebido que você já viu ou já utilizou Generics antes sem saber.

O melhor exemplo disso é o array que pode ser utilizado como string[], mas esse [] no final de um tipo é apenas um syntax sugar para o tipo genérico de array que é Array<string>.

Outro fator interessante para saber é que você pode passar explicitamente os parâmetros genéricos utilizando < + tipo generico + > ao chamar uma função ou utilizar um tipo.

Quando não é explicitamente utilizado o parâmetro genérico, o typescript infere o tipo automaticamente pelas variáveis, mas quando é explícito, as variáveis devem seguir estritamente o tipo passado.

const last = <T>(arr: T[]): T => arr[arr.length - 1]

const nArr = [123, 456]

last(nArr)
last<number>(nArr)
last<string>(nArr) // => error

No caso a cima, temos uma função com parâmetro genérico que funciona com o parâmetro não explícito e explícito, mas da erro quando o parâmetro explícito é diferente do da variável utilizada.

Caso você queria assistir em vez de ler, segue o link do video.