El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Integració amb TypeScript

Següent ►
►

En aquest tema, aprendrem com integrar TypeScript amb Webpack per aprofitar els avantatges del tipatge estàtic en els nostres projectes JavaScript. TypeScript ens ajuda a detectar errors en temps de compilació, millorar la mantenibilitat del codi i proporcionar una millor experiència de desenvolupament.

  1. Configuració del Projecte

1.1. Instal·lació de TypeScript i ts-loader

Primer, necessitem instal·lar TypeScript i ts-loader, que és un loader de Webpack per compilar fitxers TypeScript.

npm install --save-dev typescript ts-loader

1.2. Creació del fitxer tsconfig.json

El fitxer tsconfig.json és necessari per configurar el compilador TypeScript. Creem aquest fitxer a l'arrel del nostre projecte amb el següent contingut:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

1.3. Actualització del fitxer de configuració de Webpack

Afegim ts-loader a la configuració de Webpack per processar fitxers .ts i .tsx.

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

  1. Estructura del Projecte

2.1. Creació de la carpeta src

Creem una carpeta src a l'arrel del projecte i afegim un fitxer index.ts dins d'aquesta carpeta.

mkdir src
touch src/index.ts

2.2. Exemple de codi TypeScript

Afegim un exemple de codi TypeScript al fitxer index.ts per verificar que la configuració funciona correctament.

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

  1. Construcció del Projecte

3.1. Comanda de construcció

Afegim un script al fitxer package.json per construir el projecte amb Webpack.

"scripts": {
  "build": "webpack"
}

3.2. Executar la construcció

Executem la comanda de construcció per generar el bundle.

npm run build

Si tot està configurat correctament, hauríem de veure un fitxer bundle.js generat a la carpeta dist.

  1. Exercicis Pràctics

Exercici 1: Afegir una interfície

  1. Crea una interfície Person amb les propietats firstName i lastName.
  2. Modifica la funció greet per acceptar un objecte de tipus Person i retorna un missatge de benvinguda amb el nom complet.

Solució

interface Person {
  firstName: string;
  lastName: string;
}

function greet(person: Person): string {
  return `Hello, ${person.firstName} ${person.lastName}!`;
}

const user: Person = { firstName: 'John', lastName: 'Doe' };
console.log(greet(user));

Exercici 2: Utilitzar classes

  1. Crea una classe Student que implementi la interfície Person.
  2. Afegeix un mètode getFullName que retorni el nom complet de l'estudiant.
  3. Modifica la funció greet per utilitzar una instància de Student.

Solució

interface Person {
  firstName: string;
  lastName: string;
}

class Student implements Person {
  constructor(public firstName: string, public lastName: string) {}

  getFullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

function greet(person: Person): string {
  return `Hello, ${person.firstName} ${person.lastName}!`;
}

const student = new Student('Jane', 'Doe');
console.log(greet(student));

  1. Resum

En aquest tema, hem après com integrar TypeScript amb Webpack, des de la instal·lació de les dependències necessàries fins a la configuració del fitxer tsconfig.json i el fitxer de configuració de Webpack. També hem vist exemples pràctics de codi TypeScript i hem realitzat exercicis per reforçar els conceptes apresos.

Amb aquesta base, estem preparats per aprofitar els avantatges de TypeScript en els nostres projectes Webpack, millorant la qualitat i mantenibilitat del nostre codi.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats