Générateur de QR codes en TypeScript : la bibliothèque qrcode et son utilisation

Générateur de QR codes en TypeScript : la bibliothèque qrcode et son utilisation

Les QR codes sont devenus une partie intégrante du web moderne et des applications mobiles. Ils sont utilisés pour transmettre rapidement des liens, des coordonnées, du texte, des mots de passe Wi-Fi et bien plus encore. Dans l'écosystème TypeScript et JavaScript, il existe une bibliothèque puissante et simple d'utilisation appelée qrcode, qui permet de générer des QR codes directement dans le navigateur ou sur le serveur (Node.js). Dans cet article, nous allons détailler comment installer, configurer et utiliser cette bibliothèque pour créer des QR codes en TypeScript.

Qu'est-ce que la bibliothèque qrcode ?

La bibliothèque qrcode est un package npm populaire, écrit en JavaScript et entièrement compatible avec TypeScript. Elle permet de générer des QR codes dans différents formats : sous forme de chaîne de données, en SVG, en Canvas (pour le navigateur) ou en image PNG (pour Node.js). Ses principaux avantages :

• Prise en charge de toutes les versions de QR codes (de 1 à 40).
• Correction d'erreurs configurable (L, M, Q, H).
• Fonctionne à la fois dans le navigateur et dans l'environnement Node.js.
• Prise en charge complète de TypeScript — les types sont inclus dans le package.
• API simple et intuitive.

Installation

Pour commencer, installez le package via npm ou yarn :

npm install qrcode

ou

yarn add qrcode

Si vous utilisez TypeScript, aucun type supplémentaire n'est requis — ils sont déjà intégrés dans le package.

Exemple de base : génération d'un QR code sous forme de chaîne

La façon la plus simple d'obtenir un QR code est de le générer sous forme de chaîne de données (par exemple, une URL). Pour cela, on utilise la méthode toString :

import QRCode from 'qrcode';

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

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

Dans cet exemple, le QR code est affiché dans la console sous forme d'art ASCII. C'est pratique pour le débogage ou la démonstration.

Génération d'un QR code en SVG (pour le web)

Pour insérer un QR code dans une page web, le format SVG est le meilleur choix — il est scalable sans perte de qualité et facilement stylisable via CSS.

import QRCode from 'qrcode';

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

QRCode.toString(data, { type: 'svg' }, (err, svgString) => {  if (err) throw err;  // Insérez svgString dans le DOM, par exemple via innerHTML  document.getElementById('qrcode-container').innerHTML = svgString;});

Vous pouvez également utiliser les promesses au lieu des 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();

Génération d'un QR code en Canvas (pour le navigateur)

Si vous devez intégrer un QR code dans un élément canvas (par exemple, pour un traitement ultérieur ou un téléchargement), utilisez la méthode 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 dessiné avec succès sur le canvas');});

Le paramètre width définit la largeur du canvas (la hauteur est calculée automatiquement).

Génération d'un QR code en PNG (pour Node.js)

Pour une génération côté serveur (par exemple, pour enregistrer l'image sur le disque), utilisez 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 enregistré sous qrcode.png');});

Vous pouvez également définir la couleur des modules et du fond, la taille, le niveau