Característica de tipo de importación de TypeScript

1. Definir tipos personalizados en TypeScript
2. Use tipo de importación para importar los tipos personalizados en TypeScript

TypeScript es un lenguaje de programación utilizado principalmente para desarrollar aplicaciones web y es un superconjunto de JavaScript.

El lenguaje se usa principalmente con marcos como Angular. TypeScript tiene tipos de datos primitivos y no primitivos que podemos aprovechar en la programación.

El desarrollo de aplicaciones que definen tipos personalizados suele ser inevitable. Estos tipos personalizados están definidos para ser utilizados en otros módulos de aplicación.

Este tutorial le enseñará cómo incluir estos tipos personalizados en nuestros módulos. Estos tipos personalizados se pueden incluir en la aplicación mediante los métodos importar tipo e importar.

La siguiente fase cubre estos métodos en detalle.

Definir tipos personalizados en TypeScript

Vaya a su software Visual Studio Code y cree una nueva carpeta llamada export-import-type o use el nombre que prefiera.

Cree un archivo llamado foo.ts debajo de la carpeta. Copie y pegue el siguiente código en el archivo.

export type Employee = {
    firstName: string
    lastName: string
    email: string
}

export function logEmployee(employee: Employee){
    return employee;
}

export type Account = {
    username: string
    password: string
}

export function logAccount(account: Account){
   return account
}

Los siguientes son los tipos personalizados definidos en el archivo foo.ts. Todos los tipos personalizados usan la palabra clave exportar para indicar que otro módulo fuera de su archivo puede acceder a ellos.

El tipo Empleado define tres propiedades: firstName, lastName y email. El método logEmployee() acepta un parámetro de tipo Empleado y registra los detalles del empleado en la consola.

El tipo Cuenta define dos propiedades nombre de usuario y contraseña. El método logAccount() acepta un parámetro del tipo Cuenta y registra los detalles de la cuenta en la consola.

Use tipo de importación para importar los tipos personalizados en TypeScript

Cree un archivo llamado bar.ts en la misma carpeta. Copie y pegue el siguiente código en el archivo.

import type {Employee, Account} from "./foo"
import {logEmployee, logAccount} from "./foo"

function logEmployeeTwice(employee: Employee){
    console.log(logEmployee(employee))
    console.log(logEmployee(employee))
}

let employee: Employee ={
    firstName: "david",
    lastName: "mbochi",
    email: "david@gmail.com"
}

logEmployeeTwice(employee)

function logUserAccount(account: Account){
    console.log(logAccount(account))
}

let account: Account={
    username: "johndoe",
    password: "@john123"
}

logUserAccount(account)

En el código anterior, hemos usado el enfoque de importar tipo para importar las declaraciones que podemos usar para las declaraciones y anotaciones de tipos.

Hemos utilizado el enfoque de importación para importar los elementos de valor. Esta es la convención predeterminada que debe usarse para los dos métodos.

Si intenta utilizar el tipo de importación en los elementos de valor, obtendrá el siguiente error.

import type {logEmployee, logAccount} from "./foo"

Error:

'logEmployee' cannot be used as a value because it was imported using 'import type'.ts(1361)
bar.ts(2, 14): 'logEmployee' was imported here.

'logAccount' cannot be used as a value because it was imported using 'import type'.ts(1361)
bar.ts(2, 27): 'logAccount' was imported here.

Genere un archivo tsconfig.json para agregar configuraciones de TypeScript usando el siguiente comando.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ tsc init

Asegúrese de que el archivo tsconfig.json generado tenga las siguientes propiedades de configuración.

{
    "compilerOptions":{
        "target": "es5",
        "noEmitOnError":true
    }
}

Utilice el siguiente comando para transpilar todos los archivos TypeScript a JavaScript.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ tsc

Use el siguiente comando para ejecutar el archivo bar.js usando node.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ node bar.js

Producción :

{ firstName: 'david', lastName: 'mbochi', email: 'david@gmail.com' }
{ firstName: 'david', lastName: 'mbochi', email: 'david@gmail.com' }
{ username: 'johndoe', password: '@john123' }