Gerador de QR Codes em TypeScript: biblioteca qrcode |…

Gerador de QR Codes em TypeScript: biblioteca qrcode e seu uso

Os QR Codes se tornaram parte essencial da web moderna e dos aplicativos móveis. Eles são usados para transferência rápida de links, dados de contato, texto, senhas de Wi-Fi e muito mais. No ecossistema TypeScript e JavaScript, existe uma biblioteca poderosa e fácil de usar chamada qrcode, que permite gerar QR Codes diretamente no navegador ou no servidor (Node.js). Neste artigo, vamos detalhar como instalar, configurar e usar esta biblioteca para criar QR Codes em TypeScript.

O que é a biblioteca qrcode?

A biblioteca qrcode é um pacote npm popular, escrito em JavaScript e totalmente compatível com TypeScript. Ela permite gerar QR Codes em vários formatos: como string de dados, como SVG, como Canvas (para navegador) ou como imagem PNG (para Node.js). Principais vantagens:

Suporte a todas as versões de QR Code (de 1 a 40).
Correção de erros configurável (L, M, Q, H).
Funciona tanto no navegador quanto no ambiente Node.js.
Suporte completo a TypeScript — os tipos estão incluídos no pacote.
API simples e intuitiva.

Instalação

Para começar, instale o pacote via npm ou yarn:

npm install qrcode

yarn add qrcode

Se você usa TypeScript, tipos adicionais não são necessários — eles já estão embutidos no pacote.

Exemplo básico: geração de QR Code como string

A maneira mais simples de obter um QR Code é gerá-lo como uma string com os dados (por exemplo, uma URL). Para isso, usa-se o método toString:

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'terminal' }, (err, string) => {  if (err) throw err;  console.log(string);});

Neste exemplo, o QR Code é exibido no console como arte ASCII. Isso é útil para depuração ou demonstração.

Geração de QR Code como SVG (para web)

Para inserir um QR Code em uma página web, o melhor formato é SVG — ele é escalável sem perda de qualidade e facilmente estilizável via CSS.

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'svg' }, (err, svgString) => {  if (err) throw err;  // Insira svgString no DOM, por exemplo via innerHTML  document.getElementById('qrcode-container').innerHTML = svgString;});

Você também pode usar Promises em vez de callbacks:

import QRCode from 'qrcode';

async function generateQR() {  const svgString = await QRCode.toString('https://pythonlib.ru', { type: 'svg' });  document.getElementById('qrcode-container').innerHTML = svgString;}

generateQR();

Geração de QR Code como Canvas (para navegador)

Se você precisar incorporar o QR Code em um elemento canvas (por exemplo, para processamento ou download posterior), use o método toCanvas:

import QRCode from 'qrcode';

const canvas = document.getElementById('canvas') as HTMLCanvasElement;

QRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 400 }, (err) => {  if (err) throw err;  console.log('QR Code renderizado com sucesso no canvas');});

O parâmetro width define a largura do canvas (a altura é calculada automaticamente).

Geração de QR Code como PNG (para Node.js)

Para geração no servidor (por exemplo, para salvar a imagem em disco), use toFile:

import QRCode from 'qrcode';

QRCode.toFile('./qrcode.png', 'https://pythonlib.ru', {  color: {    dark: '#000000',    light: '#ffffff'  }}, (err) => {  if (err) throw err;  console.log('QR Code salvo como qrcode.png');});

Você também pode definir a cor dos módulos e do fundo, o tamanho, o nível