Neste tutorial, usaremos TypeScript em ambos os lados (client e servidor) para desenvolver uma aplicação de lista de tarefas do zero com React, NodeJS, Express e MongoDB.

Então, vamos começar pelo planejamento da API.

• API com NodeJS, Express, MongoDB e TypeScript
• Início
• Criar um tipo de tarefas
• Criar um modelo de tarefas
• Criar controladores de API
• Get, Add, Update e Delete de tarefas
• Criar rotas da API
• Criar um servidor
• Lado do client com React e TypeScript
• Configuração
• Criar um tipo de tarefas
• Buscar dados da API
• Criar os componentes
• Adicionar formulário de tarefas
• Exibir uma tarefa
• Buscar e exibir dados
• Recursos

Vamos lá.

API com NodeJS, Express, MongoDB e TypeScript

Início

Se você é novo nisso, pode começar com A Practical Guide to TypeScript ou com How to build an API from scratch with Node JS, Express, and MongoDB (textos em inglês) para tirar o máximo possível deste tutorial. Caso contrário, vamos começar.

Para criar uma aplicação do NodeJS, você precisar executar esse comando no terminal:

  yarn init

Ele perguntará algumas coisas e, então, a aplicação será inicializada. Você pode pular isso adicionando uma flag -y ao comando.

Depois, estruture o projeto da seguinte maneira:

├── dist
├── node_modules
├── src
   ├── app.ts
   ├── controllers
   |  └── todos
   |     └── index.ts
   ├── models
   |  └── todo.ts
   ├── routes
   |  └── index.ts
   └── types
      └── todo.ts
├── nodemon.json
├── package.json
├── tsconfig.json

Como você pode observar, a estrutura desse arquivo é relativamente simples. O diretório dist servirá como uma pasta para os resultados uma vez que o código tenha sido compilado para JavaScript simples.

Também temos um arquivo app.ts que é o ponto de entrada do servidor. Os controladores, tipos e rotas também estão em suas respectivas pastas.

Agora, precisamos configurar o arquivo tsconfig.json para auxiliar o compilador a seguir nossas preferências.

• tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist/js",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["src/types/*.ts", "node_modules", ".vscode"]
}

Aqui, temos as quatro principais propriedades para destacar:

outDir: diz para o compilador colocar o código compilado dentro da pasta dist/js.

rootDir: informa ao TypeScript para compilar todos os arquivos .ts que se encontrarem na pasta src.

include: diz ao compilador para incluir arquivos que estão no diretório e nos sub-diretórios de src.

exclude: excluirá os arquivos ou pastas inseridos no array durante o tempo de compilação.

Agora, podemos instalar as dependências para habilitar o TypeScript no projeto. Por padrão, essea aplicação usaria JavaScript.

Existem duas maneiras de usar TypeScript em uma aplicação do NodeJS. Localmente, no projeto, ou globalmente, em nossa máquina. Vou optar pela última opção com base em minha preferência pessoal, mas você pode continuar com a forma local se quiser.

Vamos executar o seguinte comando no terminal e instalar o TypeScript.

  yarn add typescript -g

A flag g permite instalar o TypeScript globalmente. Isso faz com que seja acessível de qualquer lugar no computador.

Depois, vamos adicionar algumas dependências para poder usar o Express e o MongoDB.

  yarn add express cors mongoose

Também precisamos instalar tipos como depêndencias de desenvolvimento para ajudar o compilador do TypeScript a entender os pacotes.

  yarn add -D @types/node @types/express @types/mongoose @types/cors

Agora, o TypeScript não vai mais gritar com você – ele usará esses tipos para definir as bibliotecas que acabamos de instalar.

Também precisamos adicionar outras dependências para poder compilar o código em TypeScript e inicializar o servidor simultaneamente.

  yarn add -D concurrently nodemon

Com isso pronto, podemos atualizar o arquivo package.json com os scripts necessários para iniciar o servidor.

• package.json

  "scripts": {
    "build": "tsc",
    "start": "concurrently \"tsc -w\" \"nodemon dist/js/app.js\""
  }

concurrently ajudará a compilar o código TypeScript, observar mudanças e iniciar o servidor simultaneamente. Dito isso, podemos iniciar o servidor – embora, ainda não tenhamos criado algo significativo nesse sentido. Vamos corrigir isso na próxima sessão.

Criar um tipo de tarefas

• types/todo.ts

import { Document } from "mongoose"

export interface ITodo extends Document {
  name: string
  description: string
  status: boolean
}

Aqui, temos uma interface de tarefas (Todo - em português, tarefa ou afazer) que estende o tipo Document fornecido pelo mongoose. Vamos utilizar essa interface mais tarde para que interaja com o MongoDB. Dito isso, agora, podemos definir como o modelo de tarefa deve ser.

Criar um modelo de tarefa

• models/todo.ts

import { ITodo } from "./../types/todo"
import { model, Schema } from "mongoose"

const todoSchema: Schema = new Schema(
  {
    name: {
      type: String,
      required: true,
    },

    description: {
      type: String,
      required: true,
    },

    status: {
      type: Boolean,
      required: true,
    },
  },
  { timestamps: true }
)

export default model<ITodo>("Todo", todoSchema)

Como podemos ver aqui, começamos implementando a interface ITodo e algumas utilidades do mongoose. Essa última parte ajuda a definir o esquema Todo e também a passar ITodo como um tipo para o model antes de exportá-lo.

Com isso, agora podemos usar o modelo de tarefa em outros arquivos para interagir com o banco de dados.

Criar controladores API

Get, Add, Update e Delete de tarefas

• controllers/todos/index.ts

import { Response, Request } from "express"
import { ITodo } from "./../../types/todo"
import Todo from "../../models/todo"

const getTodos = async (req: Request, res: Response): Promise<void> => {
  try {
    const todos: ITodo[] = await Todo.find()
    res.status(200).json({ todos })
  } catch (error) {
    throw error
  }
}

Aqui, primeiro, precisamos importar alguns tipos do express, pois quero digitar os valores explicitamente. Se você quiser, pode deixar o TypeScript inferi-los para você.

Depois, usamos a função getTodos() para puxar os dados. Ela recebe os parâmetros req e res e retorna uma promise.

Com a ajuda do modelo Todo que criamos mais cedo, agora, podemos receber dados do MongoDB e retornar uma resposta com o array de tarefas.

• controllers/todos/index.ts

const addTodo = async (req: Request, res: Response): Promise<void> => {
  try {
    const body = req.body as Pick<ITodo, "name" | "description" | "status">

    const todo: ITodo = new Todo({
      name: body.name,
      description: body.description,
      status: body.status,
    })

    const newTodo: ITodo = await todo.save()
    const allTodos: ITodo[] = await Todo.find()

    res
      .status(201)
      .json({ message: "Todo added", todo: newTodo, todos: allTodos })
  } catch (error) {
    throw error
  }
}

Como você pode ver, a função addTodo() recebe o objeto body, que contém dados introduzidos pelo usuário.

Depois, fazemos uso de typecasting para evitar erros de digitação e restringir a variável body para que corresponda a ITodo e, então, criamos uma tarefa (um Todo) baseado no modelo.

Com isso pronto, podemos salvar a tarefa no banco de dados e retornar a resposta que contém a tarefa criada, além de atualizar o array de tarefas.

• controllers/todos/index.ts

const updateTodo = async (req: Request, res: Response): Promise<void> => {
  try {
    const {
      params: { id },
      body,
    } = req
    const updateTodo: ITodo | null = await Todo.findByIdAndUpdate(
      { _id: id },
      body
    )
    const allTodos: ITodo[] = await Todo.find()
    res.status(200).json({
      message: "Todo updated",
      todo: updateTodo,
      todos: allTodos,
    })
  } catch (error) {
    throw error
  }
}

Para atualizar uma tarefa, precisamos extrair a id e o body do objeto req e, então, passá-los para findByIdAndUpdate(). Essa utilidade encontrará a tarefa no banco de dados e a atualizará. Uma vez que a operação tenha sido completada, podemos retornar os dados atualizados ao usuário.

• controllers/todos/index.ts

const deleteTodo = async (req: Request, res: Response): Promise<void> => {
  try {
    const deletedTodo: ITodo | null = await Todo.findByIdAndRemove(
      req.params.id
    )
    const allTodos: ITodo[] = await Todo.find()
    res.status(200).json({
      message: "Todo deleted",
      todo: deletedTodo,
      todos: allTodos,
    })
  } catch (error) {
    throw error
  }
}

export { getTodos, addTodo, updateTodo, deleteTodo }

A função deleteTodo() permite que você exclua uma tarefa do banco de dados. Aqui, puxamos a id de req e passamos como um argumento em findByIdAndRemove() para accessar a tarefa correspondente e exclui-la do banco de dados.

Depois, exportamos as funções para que possamos usá-las em outros arquivos. Dito isso, podemos criar algumas rotas para a API e usar esses métodos para lidar com os pedidos.

Criar rotas da API

• routes/index.ts

import { Router } from "express"
import { getTodos, addTodo, updateTodo, deleteTodo } from "../controllers/todos"

const router: Router = Router()

router.get("/todos", getTodos)

router.post("/add-todo", addTodo)

router.put("/edit-todo/:id", updateTodo)

router.delete("/delete-todo/:id", deleteTodo)

export default router

Como você pode ver aqui, temos quatro rotas para obter, adicionar, atualizar e excluir tarefas do banco de dados. Como já criamos as funções, a única coisa que temos que fazer é importar os métodos e passá-los como parâmetros para lidar com os pedidos.

Até então, cobrimos bastante. Ainda não temos, no entanto, um servidor para inicializar. Vamos corrigir isso na próxima seção.

Criar um servidor

Antes de criar o servidor, precisamos, primeiro, adicionar algumas variáveis do ambiente que guardarão as credenciais do MongoDB no arquivo nodemon.json.

• nodemon.json

{
    "env": {
        "MONGO_USER": "seu-nome-de-usuario",
        "MONGO_PASSWORD": "sua-senha",
        "MONGO_DB": "nome-do-banco-de-dados"
    }
}

Você pode obter as credenciais criando um cluster no MongoDB Atlas.

• app.ts

import express, { Express } from "express"
import mongoose from "mongoose"
import cors from "cors"
import todoRoutes from "./routes"

const app: Express = express()

const PORT: string | number = process.env.PORT || 4000

app.use(cors())
app.use(todoRoutes)

const uri: string = `mongodb+srv://${process.env.MONGO_USER}:${process.env.MONGO_PASSWORD}@clustertodo.raz9g.mongodb.net/${process.env.MONGO_DB}?retryWrites=true&w=majority`
const options = { useNewUrlParser: true, useUnifiedTopology: true }
mongoose.set("useFindAndModify", false)

mongoose
  .connect(uri, options)
  .then(() =>
    app.listen(PORT, () =>
      console.log(`Server running on http://localhost:${PORT}`)
    )
  )
  .catch(error => {
    throw error
  })

Aqui, começamos importando a biblioteca express, que permite que acessemos o método use(), que, por sua vez, ajuda a lidar com as rotas das tarefas.

Depois, usamos o pacote mongoose para conectar com o MongoDB, ao adicionar ao URL as credenciais que estão no arquivo nodemon.json.

Dito isso, se agora conectarmos com sucesso ao MongoDB, o servidor iniciará. Se for apropriado, um erro será mostrado.

Terminamos de criar a API com Node, Express, TypeScript e MongoDB. Vamos começar a criar a aplicação do lado do client com React e TypeScript.

Lado do client com React e TypeScript

Configuração

Para criar uma aplicação com React, usarei o create-react-app – você pode usar outros métodos, se quiser.

Então, vamos rodar o seguinte comando no terminal:

  npx create-react-app my-app --template typescript

Depois, instale a biblioteca Axios para poder buscar dados remotamente.

  yarn add axios

Uma vez que a instalação tenha terminado, vamos ter a estrutura do nosso projeto do seguinte modo:

├── node_modules
├── public
├── src
|  ├── API.ts
|  ├── App.test.tsx
|  ├── App.tsx
|  ├── components
|  |  ├── AddTodo.tsx
|  |  └── TodoItem.tsx
|  ├── index.css
|  ├── index.tsx
|  ├── react-app-env.d.ts
|  ├── setupTests.ts
|  └── type.d.ts
├── tsconfig.json
├── package.json
└── yarn.lock

Aqui, temos uma estrutura de arquivos relativamente simples. A principal coisa para se notar é que src/type.d.ts vai manter dois tipos. Como eu vou usá-los em quase todo arquivo, eu adicionei a extensão .d.ts para fazer com que os tipos sejam disponibilizados globalmente. Agora, não precisamos mais importá-los.

Criar um tipo de tarefa

• src/type.d.ts

interface ITodo {
  _id: string
  name: string
  description: string
  status: boolean
  createdAt?: string
  updatedAt?: string
}

interface TodoProps {
  todo: ITodo
}

type ApiDataType = {
  message: string
  status: string
  todos: ITodo[]
  todo?: ITodo
}

Aqui, a interface ITodo precisa espelhar a forma dos dados da API. Como não temos o mongoose aqui, precisamos adicionar outras propriedades para combiná-las com o tipo definido na API.

Depois, usaremos essa mesma interface para o TodoProps, que é a anotação do tipo para a props que será recebida pelo componente responsável por renderizar os dados.

Agora que definimos os nossos tipos, vamos agora começar a buscar dados da API.

Buscar dados da API

• src/API.ts

import axios, { AxiosResponse } from "axios"

const baseUrl: string = "http://localhost:4000"

export const getTodos = async (): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const todos: AxiosResponse<ApiDataType> = await axios.get(
      baseUrl + "/todos"
    )
    return todos
  } catch (error) {
    throw new Error(error)
  }
}

Como você pode ver, precisamos importar o axios para fazer solicitações de dados da API. Depois, usamos a função getTodos() para pegar dados do servidor. Ela retornará uma promise do tipo AxiosResponse, que contém as tarefas buscadas, as quais precisam combinar com o tipo ApiDataType.

• src/API.ts

export const addTodo = async (
  formData: ITodo
): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const todo: Omit<ITodo, "_id"> = {
      name: formData.name,
      description: formData.description,
      status: false,
    }
    const saveTodo: AxiosResponse<ApiDataType> = await axios.post(
      baseUrl + "/add-todo",
      todo
    )
    return saveTodo
  } catch (error) {
    throw new Error(error)
  }
}

Essa função recebe os dados inseridos pelo usuário como um argumento e retorna a promise. Aqui, precisamos omitir a propriedade _id, porque o MongoDB a criará na hora.

• src/API.ts

export const updateTodo = async (
  todo: ITodo
): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const todoUpdate: Pick<ITodo, "status"> = {
      status: true,
    }
    const updatedTodo: AxiosResponse<ApiDataType> = await axios.put(
      `${baseUrl}/edit-todo/${todo._id}`,
      todoUpdate
    )
    return updatedTodo
  } catch (error) {
    throw new Error(error)
  }
}

Para atualizar uma tarefa, precisamos passar os dados atualizados e a _id do objeto. Aqui, precisamos mudar o status da tarefa. É por isso que eu pego apenas a propriedade que precisamos antes de mandar o pedido ao servidor.

• src/API.ts

export const deleteTodo = async (
  _id: string
): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const deletedTodo: AxiosResponse<ApiDataType> = await axios.delete(
      `${baseUrl}/delete-todo/${_id}`
    )
    return deletedTodo
  } catch (error) {
    throw new Error(error)
  }
}

Aqui, também temos a função que recebe como parâmetro a propriedade _id e retorna a promise.

Com isso pronto, agora podemos acessar a pasta components e adicionar algumas linhas de código importantes aos seus arquivos.

Criar os componentes

Adicionar o formulário de tarefas

• components/AddTodo.tsx

import React from "react"

type Props = TodoProps & {
  updateTodo: (todo: ITodo) => void
  deleteTodo: (_id: string) => void
}

const Todo: React.FC<Props> = ({ todo, updateTodo, deleteTodo }) => {
  const checkTodo: string = todo.status ? `line-through` : ""
  return (
    <div className="Card">
      <div className="Card--text">
        <h1 className={checkTodo}>{todo.name}</h1>
        <span className={checkTodo}>{todo.description}</span>
      </div>
      <div className="Card--button">
        <button
          onClick={() => updateTodo(todo)}
          className={todo.status ? `hide-button` : "Card--button__done"}
        >
          Complete
        </button>
        <button
          onClick={() => deleteTodo(todo._id)}
          className="Card--button__delete"
        >
          Delete
        </button>
      </div>
    </div>
  )
}

export default Todo

Como você pode ver, aqui, temos um componente funcional do tipo React.FC (FC significa componente funcional – do inglês, functional component). Ele recebe como prop o método saveTodo(), que nos permite salvar os dados no banco de dados.

Depois, temos o state formData, que precisa combinar com o tipo do ITodo para satisfazer o compilador. Essa é a razão para o passarmos para o hook useState. Também precisamos adicionar um tipo alternativo ({}), pois o state incial será um objeto vazio.

Com isso, podemos seguir em frente e visualizar os dados que foram buscados.

Exibir uma tarefa

• components/TodoItem.tsx

import React from "react"

type Props = TodoProps & {
  updateTodo: (todo: ITodo) => void
  deleteTodo: (_id: string) => void
}

const Todo: React.FC<Props> = ({ todo, updateTodo, deleteTodo }) => {
  const checkTodo: string = todo.status ? `line-through` : ""
  return (
    <div className="Card">
      <div className="Card--text">
        <h1 className={checkTodo}>{todo.name}</h1>
        <span className={checkTodo}>{todo.description}</span>
      </div>
      <div className="Card--button">
        <button
          onClick={() => updateTodo(todo)}
          className={todo.status ? `hide-button` : "Card--button__done"}
        >
          Complete
        </button>
        <button
          onClick={() => deleteTodo(todo._id)}
          className="Card--button__delete"
        >
          Delete
        </button>
      </div>
    </div>
  )
}

export default Todo

Aqui, precisamos estender o tipo TodoProps e acrescentar as funções updateTodo edeleteTodo para lidar apropriadamente com as props recebidas pelo componente.

Agora, uma vez que o objeto Todo (a tarefa) tenha sido passado, poderemos exibir e adicionar as funcões necessárias para atualizar ou excluir uma tarefa.

Ótimo! Podemos agora acessar o arquivo App.tsx e adicionar a última peça do quebra-cabeça.

Buscar e exibir dados

• App.tsx

import React, { useEffect, useState } from 'react'
import TodoItem from './components/TodoItem'
import AddTodo from './components/AddTodo'
import { getTodos, addTodo, updateTodo, deleteTodo } from './API'

const App: React.FC = () => {
  const [todos, setTodos] = useState<ITodo[]>([])

  useEffect(() => {
    fetchTodos()
  }, [])

  const fetchTodos = (): void => {
    getTodos()
    .then(({ data: { todos } }: ITodo[] | any) => setTodos(todos))
    .catch((err: Error) => console.log(err))
  }

Aqui, primeiro, precisamos importar os componentes e funções utilitárias do API.ts.  Depois, passamos um array do tipo ITodo para o useState e o inicializamos com um array vazio.

O método getTodos() retorna uma promise – logo, podemos acessar a função then e atualizar o state com os dados buscados ou lançar um erro, se algum ocorrer.

Com isso pronto, podemos chamar a função fetchTodos() quando o componente é montado com sucesso.

• App.tsx

const handleSaveTodo = (e: React.FormEvent, formData: ITodo): void => {
  e.preventDefault()
  addTodo(formData)
    .then(({ status, data }) => {
      if (status !== 201) {
        throw new Error("Error! Todo not saved")
      }
      setTodos(data.todos)
    })
    .catch(err => console.log(err))
}

Uma vez que o formulário é submetido, o usamos para enviar o pedido ao servidor. Se a tarefa foi salva com sucesso, atualizamos os dados. Caso contrário, um erro será lançado.

• App.tsx

const handleUpdateTodo = (todo: ITodo): void => {
  updateTodo(todo)
    .then(({ status, data }) => {
      if (status !== 200) {
        throw new Error("Error! Todo not updated")
      }
      setTodos(data.todos)
    })
    .catch(err => console.log(err))
}

const handleDeleteTodo = (_id: string): void => {
  deleteTodo(_id)
    .then(({ status, data }) => {
      if (status !== 200) {
        throw new Error("Error! Todo not deleted")
      }
      setTodos(data.todos)
    })
    .catch(err => console.log(err))
}

As funções para excluir ou atualizar uma tarefa são bastante similares. As duas recebem um parâmetro, enviam seu pedido e recebem de volta uma resposta. Então, elas verificam se o pedido teve sucesso e lidam com ele de maneira apropriada.

• App.tsx

  return (
    <main className='App'>
      <h1>My Todos</h1>
      <AddTodo saveTodo={handleSaveTodo} />
      {todos.map((todo: ITodo) => (
        <TodoItem
          key={todo._id}
          updateTodo={handleUpdateTodo}
          deleteTodo={handleDeleteTodo}
          todo={todo}
        />
      ))}
    </main>
  )
}

export default App

Aqui, iteramos pelo array todos e, então, passamos para o TodoItem os dados esperados.

Navegue até a pasta que contém o lado do servidor da aplicação e execute os seguinte comando no terminal:

yarn start

Faça o mesmo no lado do client da aplicação:

Você deve ver que nossa aplicação de lista de tarefas funciona como esperado.

Ótimo! Com esse toque final, terminamos de criar uma aplicação de lista de tarefas com TypeScript, React, NodeJs, Express e MongoDB.

Você pode encontrar o código-fonte aqui.

Você pode encontrar outros ótimos conteúdos como esse no blog do autor (em inglês) e seguir o autor no Twitter para ser notificado.

Agradecemos pela leitura.

Recursos (em inglês, no GitHub e no site do autor)

Ficha informativa de TypeScript e React

Ficha informativa de tipos avançados em TypeScript (com exemplos)

Fichas informativas de TypeScript

Escrito por: Alexey Samoshkin

[Editado em 2/5/2018]: esta publicação, agora, também está disponível em russo. Agradeço a Serj Bulavyk pelos seus esforços.

Conheça as engines

A coerção de tipo é o processo de converter o valor de um tipo em outro (como uma string em um número, um objeto para um valor booleano etc.). Qualquer tipo, seja primitivo ou um objeto, é sujeito a coerção de tipo. Para relembrar, os tipos primitivos são: number, string, boolean, null, undefined e symbol (este último adicionado na ES6).

Como um exemplo de coerção de tipo na prática, observe a Tabela de Comparação do JavaScript, que mostra como o operador de igualdade == se comporta para diferentes tipos, a e b. Essa matriz parece intimidadora devido à coerção de tipo implícita que o operador == realiza, sendo quase impossível lembrar de todas essas combinações. Você, no entanto, não precisa fazer isso. Basta aprender os princípios fundamentais da coerção de tipo.

Este artigo detalha o modo como a coerção de tipo funciona em JavaScript. Ele vai preparar você com o conhecimento essencial para que você se sinta confiante em explicar o que cada uma das expressões a seguir resulta. No final deste artigo, mostrarei as repostas e as explicarei.

true + false
12 / "6"
"number" + 15 + 3
15 + 3 + "number"
[1] > null
"foo" + + "bar"
'true' == true
false == 'false'
null == ''
!!"false" == !!"true"
[‘x’] == ‘x’
[] + null + 1
[1,2,3] == [1,2,3]
{}+[]+{}+[1]
!+[]+[]+![]
new Date(0) - 0
new Date(0) + 0

Sim, essa é uma lista cheia de coisas bobas que você pode fazer como desenvolvedor. Em 90% dos casos de uso, é melhor evitar a coerção de tipo implícita. Considere essa lista como um exercício de aprendizado para testar seu conhecimento sobre o funcionamento da coerção de tipo. Se você estiver entediado, pode encontrar mais exemplos em wtfjs.com.

Falando nisso, às vezes, você pode se deparar com questões desse tipo em uma entrevista para um emprego como desenvolvedor JavaScript. Então, continue lendo.

Coerção implícita x explícita

A coerção de tipo pode ser explícita ou implícita.

Quando um desenvolvedor expressa a intenção de converter entre tipos escrevendo o código apropriado, como Number(valor), isso é chamado de coerção de tipo explícita (ou, em inglês, type casting).

Como o JavaScript é uma linguagem fracamente tipada, valores também podem ser convertidos entre tipos diferentes automaticamente, o que é chamado de coerção de tipo implícita. Isso acontece geralmente quando você aplica operadores à valores de diferentes tipos, como 1 == null, 2/'5', null + new Date(), ou pode ser provocado pelo contexto em torno, como ocorre com if (valor) {…}, onde valor é transformado em booleano.

Um operador que não provoca a coerção de tipo implícita é ===, que é chamado de operador de igualdade estrita. O operador de igualdade fraco == por outro lado, realiza tanto a comparação como a coerção de tipo, se necessário.

A coerção de tipo implícita é uma faca de dois gumes: é uma grande fonte de frustração e defeitos, mas também um mecanismo útil que nos permite escrever menos código sem perder a legibilidade.

Três tipos de conversão

A primeira regra para aprender é que há apenas três tipos de conversão de tipo em JavaScript:

• para string
• para booleano
• para número

A segunda, a lógica de conversão para tipos primitivos e para objetos, funciona de modos diferentes, mas ambos podem ser convertidos apenas desses três modos.

Vamos começar com os tipos primitivos primeiro.

Conversão em strings

Para converter explicitamente valores para uma string, aplique a função String(). A coerção implícita é provocada pelo operador binário +, quando qualquer operando é uma string:

String(123) // explícita
123 + ''    // implícita

Todos os valores primitivos são convertidos para strings naturalmente como você pode imaginar:

String(123)                   // '123'
String(-12.3)                 // '-12.3'
String(null)                  // 'null'
String(undefined)             // 'undefined'
String(true)                  // 'true'
String(false)                 // 'false'

A conversão de symbol é um pouco complicada, porque ele somente pode ser convertido explicitamente, não implicitamente. Leia mais neste artigo (em inglês) sobre as regras de coerção em Symbol.

String(Symbol('my symbol'))   // 'Symbol(my symbol)'
'' + Symbol('my symbol')      // TypeError

Conversão em booleano

Para explicitamente converter um valor para booleano, aplique a função Boolean(). A conversão implícita acontece em um contexto lógico, ou é causada pelos operadores lógicos ( || && !) .

Boolean(2)          // explícita
if (2) { ... }      // implícita devido ao contexto lógico
!!2                 // implícita devido ao operador lógico
2 || 'hello'        // implícita devido ao operador lógico

Nota: os operadores lógicos, como  || e &&, realizam a conversão em booleano internamente, mas, na verdade,  retornam o valor dos operandos originais, mesmo se eles não forem booleanos.

// retorna o número 123, em vez de retornar true
// 'hello' e 123 ainda são coagidos à boleano internalmente para calcular a expressão
let x = 'hello' && 123;   // x === 123

Assim, existem apenas 2 resultados possíveis de conversão para booleano: true ou false. Fica mais fácil lembrar a lista de valores falsos.

Boolean('')           // false
Boolean(0)            // false     
Boolean(-0)           // false
Boolean(NaN)          // false
Boolean(null)         // false
Boolean(undefined)    // false
Boolean(false)        // false

Qualquer valor que não está na lista é convertido para true, incluindo objetos, funções, Array, Date, tipos definidos pelo usuário, entre outros. Símbolos são valores verdadeiros. Objetos vazios e arrays são valores verdadeiros também.

Boolean({})             // true
Boolean([])             // true
Boolean(Symbol())       // true
!!Symbol()              // true
Boolean(function() {})  // true

Conversão em números

Para uma conversão explícita, basta aplicar a função Number(), da mesma maneira que você fez com Boolean() e String() .

A conversão implícita é complicada, pois ocorre em mais casos:

• operadores de comparação (>, <, <=,>=)
• operadores bitwise ( | & ^ ~)
• operadores aritméticos (- + * / % ). Observe que o binário + não causa a conversão numérica, quando qualquer operando é uma string.
• operador + unário
• operador de igualdade == (incluindo !=). Observe que == não causa conversão numérica quando ambos os operandos são strings.

Number('123')   // conversão explícita
+'123'          // conversão implícita
123 != '456'    // conversão implícita
4 > '5'         // conversão implícita
5/null          // conversão implícita
true | 0        // conversão implícita

Aqui vemos como os valores primitivos são convertidos para números:

Number(null)                   // 0
Number(undefined)              // NaN
Number(true)                   // 1
Number(false)                  // 0
Number(" 12 ")                 // 12
Number("-12.34")               // -12.34
Number("\n")                   // 0
Number(" 12s ")                // NaN
Number(123)                    // 123

Quando uma string está sendo convertida para um número, a engine primeiro remove espaços em branco no começo e final, caracteres \n, \t, retornando NaN se a string aparada não representar um número válido. Se a string estiver vazia, ela retorna 0.

null e undefined são tratados de maneira diferente: null se torna 0 e undefined se torna NaN.

Símbolos não podem ser convertidos em números, seja explicitamente, seja implicitamente. Além disso, TypeError é lançado, em vez de converter silenciosamente para NaN, como acontece com undefined. Veja mais sobre as regras de conversão de símbolos na MDN.

Number(Symbol('my symbol'))    // TypeError
+Symbol('123')                 // TypeError

Há duas regras especiais para se lembrar:

1. Quando == está sendo aplicado a null ou undefined, a conversão numérica não acontece. null se iguala somente a null ou undefined e nada mais.

null == 0               // false, null não é convertido em 0
null == null            // true
undefined == undefined  // true
null == undefined       // true

2. NaN não se iguala a nada, nem a si mesmo.

if (valor !== valor) { console.log("Nós estamos lidando com NaN aqui") }

Coerção de tipo para objetos

Até agora, vimos a coerção de tipo para valores primitivos. Isso não é muito emocionante.

Quando se trata de objetos e qunado a engine encountra expressões como [1] + [2,3], primeiro é preciso converter um objeto para um valor primitivo, que então é convertido para o tipo final. Ainda são apenas três os tipos de conversão: em números, em strings e em booleanos.

O caso mais simples é a conversão em booleano: qualquer valor não primitivo é sempre coagido a true, não importando se um objeto ou array é vazio ou não.

Objetos são convertidos para números primitivos através do método interno [[ToPrimitive]], que é responsável tanto pela conversão em números como em strings.

Aqui está uma pseudoimplementação do método [[ToPrimitive]]:

[[ToPrimitive]] é passado com um valor de entrada e com uma preferência de tipo de conversão: Number ou String. O preferredType (tipo preferido, em português) é opcional.

As conversões em números e em strings fazem uso de dois métodos do objeto de entrada: valueOf e toString . Ambos os métodos são declarados em Object.prototype e, assim, estão disponíveis para qualquer método derivado, como Date, Array etc.

Em geral, o algoritmo é o seguinte:

1. Se a entrada já é um valor primitivo, não faça nada e retorne-a.
2. Chame input.toString() e, se o resultado for de um tipo primitivo, retorne-o.
3. Chame input.valueOf() e, se o resultado for de um tipo primitivo, retorne-o.
4. Se nem input.toString() nem input.valueOf() resultam em um tipo primitivo, lance TypeError.

As conversões em números primeiro chamam valueOf (3) indo depois para toString (2). A conversão em strings faz o oposto: toString (2) seguido de valueOf (3).

A maior parte dos tipos integrados não possui valueOf, nem tem valueOf retornando o próprio objeto this, que, então, é ignorado porque não é de um tipo primitivo. Por isso, conversões em números e em strings podem funcionar do mesmo jeito — ambas acabam chamando toString().

Operadores diferentes podem ocasionar conversões em números ou em strings com a ajuda do parâmetro preferredType. Existem, contudo, duas exceções: o operador de igualdade == e o operador binário +, que acarretam modos de conversão padrão (preferredType não é especificado, ou é iguala ao default). Nesse caso, a maior parte dos tipos integrados assume uma conversão em número por padrão, com exceção de Date, que faz a conversão em string.

Um exemplo de comportamento de conversão de Date:

Você pode sobrescrever os métodos padrão toString() e valueOf() para associar a conversão lógica de objeto para tipo primitivo.

Perceba como bj + '' retorna'101' como string. O operador + ocasiona um método de conversão padrão e, como dito antes, Object assume uma conversão em número como padrão, usando, assim, o método valueOf() primeiro, em vez de toString().

Método Symbol.toPrimitive da ES6

Na ES5, você pode associar à lógica de conversão de objeto para tipo primitivo sobrescrevendo os métodos toString evalueOf.

Na ES6, você pode ir mais longe e substituir completamente a rotina interna [[ToPrimitive]], implementando o método [Symbol.toPrimtive] em um objeto.

Exemplos

Armados com a teoria, agora, vamos voltar aos nossos exemplos:

true + false             // 1
12 / "6"                 // 2
"number" + 15 + 3        // 'number153'
15 + 3 + "number"        // '18number'
[1] > null               // true
"foo" + + "bar"          // 'fooNaN'
'true' == true           // false
false == 'false'         // false
null == ''               // false
!!"false" == !!"true"    // true
['x'] == 'x'             // true 
[] + null + 1            // 'null1'
[1,2,3] == [1,2,3]       // false
{}+[]+{}+[1]             // '0[object Object]1'
!+[]+[]+![]              // 'truefalse'
new Date(0) - 0          // 0
new Date(0) + 0          // 'Thu Jan 01 1970 02:00:00(EET)0'

Abaixo, você pode encontrar explicações para cada um das expressões.

O operador binário + causa a conversão para números para true e false:

true + false
==> 1 + 0
==> 1

O operador aritmético de divisão / causa a conversão em número para a string '6' :

12 / '6'
==> 12 / 6
==>> 2

Abaixo, vemos que o operador + tem associatividade da esquerda para a direita. Assim, a expressão "number" + 15 roda primeiro. Como um dos operandos é uma string, o operador + ocasiona a conversão em string para o número 15. No segundo passo, a expressão "number15" + 3 é avaliada de maneira similar.

“number” + 15 + 3 
==> "number15" + 3 
==> "number153"

Aqui, vemos que a expressão 15 + 3 é avaliada primeiro. Não há necessidade nenhuma de coerção, já que ambos os operandos são números. No segundo passo, a expressão 18 + 'number' é avaliada e, como um dos operandos é uma string, isso causa a conversão em string.

15 + 3 + "number" 
==> 18 + "number" 
==> "18number"

Neste exemplo, o operador de comparação > ("maior que") ocasiona em conversão para números de [1] e null .

[1] > null
==> '1' > 0
==> 1 > 0
==> true

Aqui, vemos que o operador unário + tem maior precedência sobre operador binário +. Assim, a expressão +'bar' é avaliada primeiro. O sinal positivo unário acarreta em conversão em números para a string 'bar'. Como a string não representa um número válido, o resultado é NaN. No segundo passo, a expressão 'foo' + NaN é avaliada.

"foo" + + "bar" 
==> "foo" + (+"bar") 
==> "foo" + NaN 
==> "fooNaN"

Neste exemplo, o operador == acarreta em uma conversão para números, a string 'true' é convertida em NaN e o booleano true é convertido em 1.

'true' == true
==> NaN == 1
==> false

false == 'false'   
==> 0 == NaN
==> false

Aqui, temos que o operador == geralmente causa a conversão em número, mas esse não é o caso com null. null iguala somente a null ou a undefined e mais nada.

null == ''
==> false

O operador !! converte ambas as strings, 'true' e'false', em booleano, já que elas não são strings vazias. Então, == apenas verifica a igualdade de dois booleanos true sem nenhuma coerção.

!!"false" == !!"true"  
==> true == true
==> true

O operador == ocasiona em uma conversão em número para um array. O método de arrays valueOf() retorna o próprio array, sendo ignorado porque não é um tipo primitivo. O método de array toString() converte ['x'] na string 'x'.

['x'] == 'x'  
==> 'x' == 'x'
==>  true

O operador + acarreta a conversão em número para []. O método de array valueOf() é ignorado, porque retorna o próprio array, o qual é não primitivo. O método de array toString retorna uma string vazia.

No segundo passo, a expressão '' + null + 1 é avaliada.

[] + null + 1  
==>  '' + null + 1  
==>  'null' + 1  
==> 'null1'

Os operadores lógicos || e && coagem os operandos para booelano, mas retornam os operandos originais (não booleanos). 0 é falso, enquanto '0' é verdadeiro, porque é uma string não vazia. O objeto vazio {} é também verdadeiro.

0 || "0" && {}  
==>  (0 || "0") && {}
==> (false || true) && true  // internamente
==> "0" && {}
==> true && true             // internamente
==> {}

Nenhuma coerção é necessária, pois ambos os operandos têm o mesmo tipo. Como == verifica a identidade do objeto (e não sua igualdade) e como os dois arrays são instâncias diferentes, o resultado é false.

[1,2,3] == [1,2,3]
==>  false

Todos os operandos são valores não primitivos. Assim, + começa pela esquerda, desencadeando a conversão em número. O método valueOf de Object e de Array retorna o próprio objeto, sendo, então, ignorado. toString() é usado como substituto. O truque aqui é que, primeiro, {} não é considerado um objeto literal, mas uma declaração em bloco, sendo ignorado. A avaliação começa com a próxima expressão +[], que é convertida em uma string vazia através do método toString() e, então, para 0 .

{}+[]+{}+[1]
==> +[]+{}+[1]
==> 0 + {} + [1]
==> 0 + '[object Object]' + [1]
==> '0[object Object]' + [1]
==> '0[object Object]' + '1'
==> '0[object Object]1'

Este exemplo abaixo é melhor explicado passo a passo de acordo com a precedência de operador.

!+[]+[]+![]  
==> (!+[]) + [] + (![])
==> !0 + [] + false
==> true + [] + false
==> true + '' + false
==> 'truefalse'

O operador - acarreta em conversão em números para Date. Date.valueOf() retornando o número de milissegundos desde a epoch do Unix.

new Date(0) - 0
==> 0 - 0
==> 0

O operador + acarreta em um conversão padrão. Date assume a conversão em string como padrão. Então, o método toString() é usado em vez de valueOf().

new Date(0) + 0
==> 'Thu Jan 01 1970 02:00:00 GMT+0200 (EET)' + 0
==> 'Thu Jan 01 1970 02:00:00 GMT+0200 (EET)0'

Recursos adicionais

Eu gostaria de recomendar o excelente livro Understanding ES6, escrito por Nicholas C. Zakas. É um grande recurso de aprendizado sobre ES6, não muito avançado e que não entra muito nos detalhes.

Aqui temos um bom livro apenas sobre a ES5 – SpeakingJS, escrito por Axel Rauschmayer.

(Russo) Современный учебник Javascript (Livro didático moderno do JavaScript, em português) — https://learn.javascript.ru/. Em especial, essas duas páginas sobre conversão de objetos e de tipo.

Tabela de comparação do JavaScript — https://dorey.github.io/JavaScript-Equality-Table/

wtfjs — um pequeno blog de código sobre essa linguagem que nós amamos, embora nos dê tanta raiva — https://wtfjs.com/