Anterior

Siguientes

Laboratorio: Exportación e importación de componentes de módulo

Completado

En este laboratorio, se organizará algo de código TypeScript mediante módulos. Como desafío adicional, importará una biblioteca de tipos externa.

Ejercicio 1

En este ejercicio, organizará el código de un proyecto mediante módulos. El proyecto contiene tres archivos TypeScript:

• module07_main.ts: contiene el código principal de la aplicación.

• module07_loans.ts: contiene dos interfaces, Loan y ConventionalLoan.

• module07_loan-programs.ts: contiene tres funciones:

  • calculateInterestOnlyLoanPayment, que calcula el pago de un préstamo de interés solamente.
  • calculateConventionalLoanPayment, que calcula el pago de un préstamo convencional.
  • calculateInterestRate, una función de trabajo que calcula el tipo de interés mensual del préstamo.

Las funciones calculateInterestOnlyLoanPayment y calculateConventionalLoanPayment aceptan los parámetros principle y interestRate. La diferencia entre ellos es que la función calculateConventionalLoanPayment acepta una tercera propiedad, months, que la función calculateInterestOnlyLoanPayment no acepta.

Propiedad	Descripción
principle	Importe principal del préstamo.
interestRate	Tipo de interés anual del préstamo. Por ejemplo, el 5 % se especifica como 5.
months	Plazo del préstamo, especificado en meses. Un préstamo de interés solamente no requiere esta propiedad porque el número de meses es irrelevante (el préstamo nunca se reembolsará cuando se realice un pago de interés solamente cada mes).

Agregue el código necesario para definir las relaciones entre los módulos.

1. Escriba lo siguiente en el símbolo del sistema para clonar el repositorio de inicio.

   git clone https://github.com/MicrosoftDocs/mslearn-typescript
   cd mslearn-typescript/code/module-07/m07-start
   code .
   

2. Abra el archivo module07_loans.ts y agregue la palabra clave export en las declaraciones de la interfaz.

   export interface Loan {
       principle: number,
       interestRate: number        //* Interest rate percentage (eg. 14 is 14%)
   }
   export interface ConventionalLoan extends Loan {
       months: number      //* Total number of months
   }
   

3. Abra el archivo module07_loan-programs.ts.

4. En la parte superior del archivo, agregue una instrucción import que importe las interfaces Loan y ConventionalLoan desde module07_loans.ts. Importe ambas interfaces mediante una instrucción import y asígnelas a una variable denominada Loans.

   import * as Loans from './module07_loans.js';
   

5. Busque TODO Update the calculateInterestOnlyLoanPayment function.

6. Agregue la palabra clave export a la declaración de función calculateInterestOnlyLoanPayment.

7. Actualice el tipo del parámetro de función loanTerms a la interfaz Loans.Loan.

   export function calculateInterestOnlyLoanPayment(loanTerms: Loans.Loan): string {
       let payment: number;
       payment = loanTerms.principle * calculateInterestRate(loanTerms.interestRate);
       return 'The interest only loan payment is ' + payment.toFixed(2);
   }
   

8. Busque TODO Update the calculateConventionalLoanPayment function.

9. Agregue la palabra clave export a la declaración de función calculateConventionalLoanPayment.

10. Actualice el tipo del parámetro de función loanTerms a la interfaz Loans.ConventionalLoan.

    export function calculateConventionalLoanPayment(loanTerms: Loans.ConventionalLoan): string {
        let interest: number = calculateInterestRate(loanTerms.interestRate);
        let payment: number;
        payment = loanTerms.principle * interest / (1 - (Math.pow(1/(1 + interest), loanTerms.months)));
        return 'The conventional loan payment is ' + payment.toFixed(2);
    }
    

11. Abra el archivo module07_main.ts.

12. Busque TODO Add the import statement.

13. Agregue una instrucción import que importe las funciones interestOnlyLoan y conventionalLoan desde module07_loan-programs.ts. Asigne las funciones a una variable denominada LoanPrograms.

    import * as LoanPrograms from './module07_loan-programs.js';
    

14. Busque TODO Update the function calls.

15. En las dos declaraciones de variables, actualice las llamadas de función para hacer referencia a la variable LoanPrograms de la instrucción import.

    let interestOnlyPayment = LoanPrograms.calculateInterestOnlyLoanPayment({principle: 30000, interestRate: 5});
    let conventionalLoanPayment = LoanPrograms.calculateConventionalLoanPayment({principle: 30000, interestRate: 5, months: 180});
    

16. Guarde los archivos.

17. En el símbolo del sistema, ejecute el comando tsc con la opción --module commonjs para compilar module07_main.ts.

    tsc --module commonjs module07_main.ts
    

18. Pruebe su trabajo en node mediante la ejecución del archivo module07_main.js.

Desafío

Seleccione una biblioteca de JavaScript con la que esté familiarizado e intente importarla a un archivo TypeScript mediante la instrucción import. Una vez importada, debe funcionar exactamente igual que en JavaScript.

Solución del laboratorio

Para ver la versión final del código, escriba lo siguiente en el símbolo del sistema.

cd ../m07-end
code .

Abra los archivos module07_main.ts, module07_loans.ts y module07_loan-programs.ts para ver la solución a este laboratorio. Vea la sección Configuración del laboratorio más arriba para obtener más información sobre cómo configurar el entorno de desarrollo a fin de ejecutar la solución.

Continuar