knowledgebase/journals/2023_07_14.md

• Per impostare alias in #TypeScript
  • Mostrami con un esempio come utilizzare import in Typescript. L'esempio deve contenere due file. Il file importato dev'essere in una sottocartella.
  • Supponiamo di avere due file TypeScript: main.ts e helper.ts. Il file helper.ts si trova in una sottocartella chiamata utils.
  • Prima, definiamo alcune funzioni nel file helper.ts.

  • // utils/helper.ts
    export function saluta(nome: string): string {
      return `Ciao, ${nome}!`;
    }
    - export function somma(a: number, b: number): number {
      return a + b;
    }
    

  • In questo file, abbiamo definito due funzioni: saluta e somma. Utilizziamo l'istruzione export per rendere queste funzioni disponibili per l'importazione in altri file.
  • Ora, nel file main.ts, possiamo importare queste funzioni utilizzando l'istruzione import.

  • // main.ts
    import { saluta, somma } from './utils/helper';
    console.log(saluta('Mario'));  // Stampa: Ciao, Mario!
    console.log(somma(5, 3));  // Stampa: 8
    

  • In main.ts, abbiamo importato le funzioni saluta e somma dal file helper.ts utilizzando l'istruzione import. Ora, possiamo utilizzare queste funzioni come se fossero definite nel file main.ts.
  • Ora vorrei importare l'alias $ut in modo da importare dalla cartella ./utils utilizzando un nome più breve. Come si fa?
  • Per utilizzare un alias per i tuoi percorsi di importazione, dovrai configurare il tsconfig.json nel tuo progetto TypeScript. Puoi utilizzare l'opzione paths per definire gli alias dei percorsi.
  • Ecco un esempio di come potrebbe essere configurato:

  • {
      "compilerOptions": {
          "baseUrl": ".", // Questo deve essere specificato se "paths" è specificato.
          "paths": {
              "$ut/*": ["./utils/*"] // Aggiunge un alias che mappa $ut/ -> ./utils/
          }
      }
    }
    

  • In questo esempio, l'alias $ut/ mappa alla cartella ./utils/. Ora puoi importare i tuoi moduli come segue:

  • // main.ts
    import { saluta, somma } from '$ut/helper';
    console.log(saluta('Mario'));  // Stampa: Ciao, Mario!
    console.log(somma(5, 3));  // Stampa: 8
    

  • Ricorda, tuttavia, che questa configurazione funziona solo durante la compilazione con il compilatore TypeScript. Se stai utilizzando un bundler come webpack, dovrai configurare separatamente l'alias del percorso nel tuo file di configurazione webpack.
• 16:10 quick capture: Podman Desktop 1.2 Released: Compose and Kubernetes Support #podman