Cuadro de autor


Discuta su proyecto

Sobre Nosotros

Somos un socio de Microsoft Gold con presencia en los Estados Unidos y la India. Somos un proveedor de servicios de TI dinámico y profesional que sirve a empresas y nuevas empresas, ayudándolas a enfrentar los desafíos de la economía global. Ofrecemos servicios en el área de Consulta e implementación CRM, Desarrollo de aplicaciones, Desarrollo de aplicaciones móviles, Desarrollo web y Desarrollo Offshore.

Interfaces en Typescript

Interfaces en Typescript: ¿Qué son y cómo usarlas?

By Pooja sharma / 23 de febrero de 2022

13 de Octubre de 2022
Interfaces en Typescript: ¿Qué son y cómo usarlas?

¿Qué es mecanografiado?

El texto mecanografiado es un "Mecanografiado” versión del lenguaje JavaScript cuyo objetivo es introducir escritura estática en el lenguaje. TypeScript agrega tipos al Código JavaScript para acelerar el desarrollo mediante la identificación de problemas antes de que se ejecute el código JavaScript. Sin embargo, a veces eso puede complicarse y esa es la razón por la que algunos programadores también lo odian.

Interfaces

Las interfaces, en las palabras más simples, describen la estructura del objeto, lo que significa que describe cómo debería verse el objeto. En Mecanografiado, podemos trabajar con “Interfaces”. En TypeScript, una interfaz solo contiene la definición de métodos y propiedades, no su implementación. Es la funcionalidad de la clase que realiza la conexión entre la interfaz proporcionando la conexión con todos los parámetros de la interfaz.

Crear una interfaz

Al crear una nueva interfaz, el interfaz. debe usarse la palabra clave. Esta palabra clave debe ir seguida del nombre de la interfaz. Los corchetes deben contener la forma de un objeto, las propiedades y los tipos. Las propiedades y tipos se especifican como “valor clave” pares al crear la interfaz.

A continuación se muestra un ejemplo de interfaces simples de TypeScript. 

// Create an empty interface:
interface EmptyObject {}

// Create interface Person:
interface Person {
  name: string;
  age: number;
  hairColor: string;
  weight: number;
  height: number;
}

// Create interface Car:
interface Car {
  model: string;
  manufacturer: string;
  numberOfWheels: number;
  type: string;
}

// Create interface User:
interface User {
  name: string;
  pass: string;
  email: string;
}

También, lea: Principales marcos de desarrollo de aplicaciones web para 2022: obtenga la mayor escalabilidad a menores costos

Propiedades opcionales en interfaces

La interfaz declarada también puede tener propiedades opcionales. Para declarar una propiedad opcional, se utiliza el signo de interrogación (?) al final del nombre de la propiedad durante la declaración.

Por ejemplo, si tomamos la interfaz de persona que declaramos anteriormente:

// Create interface Person:
interface Person {
  name: string;
  weight? : number;
  age: number;
  hairColor? : string;
   height: number;
}

En el ejemplo anterior, la interfaz Persona  tiene dos propiedades opcionales con el “?”. es decir "color de pelo' "peso', mientras que las otras tres propiedades son las propiedades requeridas.

Anotación de interfaz en componentes funcionales

Puesto que el Person La interfaz ha sido definida, ahora se puede usar como un tipo, también se puede anotar el parámetro de la función con el nombre de la interfaz:

Veamos nuevamente la interfaz de persona que declaramos anteriormente:

interface PersonData {
  name: string;
 weight? : number;
  age: number;
  hairColor? : string; 
  height: number;
}

function getPersonDetail(person: PersonData) {
    return `${person.name} ${person.age} ${person.height}`;
}

let johnDoe = {
    name: 'John Doe',
    age: 25,
    height: 170,
};

console.log(getPersonDetail(johnDoe));

Salida:

John Doe 25 170

En el ejemplo anterior, el compilador de TypeScript verifica los parámetros o propiedades que se pasan al obtenerDetallePersona() función.

Si el argumento tiene dos propiedades cuyos tipos son números y una propiedad cuyo tipo es una cadena, el compilador de TypeScript pasa la verificación. De lo contrario, arrojará un error.

Interfaz como funciones

Los objetos, incluidas las clases, no son las únicas cosas que pueden utilizar interfaces. Las interfaces de TypeScript también se pueden usar para anotar funciones. Puede lograr esto proporcionando a la interfaz una firma de llamada. Esto significa que asigna la interfaz a la firma de función que contiene la lista de parámetros con tipos y tipos devueltos.

Por ejemplo:

interface multiplyFunc {
// Specify only parameters and return type:
    (a: number, b: number, c: number): string;  
}
// Annotate the "multiply" function
// with "MultiplyFunc" interface:
const multiply: multiplyFunc = (a, b, c) => {
  return a * b * c
}

Una cosa sobre interfaces y funciones. El nombre de los parámetros en una interfaz no tiene que coincidir con el nombre de los parámetros en la función real. También puede usar un nombre similar para el parámetro de la interfaz y para la declaración de la función. Usando el orden, TypeScript relacionará adecuadamente los argumentos con sus tipos. Por ejemplo:

interface myFunction {
// Specify only parameters and return type:
    (a: string, b: Boolean, c: number): string;  
}
const myFunc: myFunction = (x, y, z) => {
  return `x is ${x}, y is ${y}, z is ${z}`
}
// TypeScript will correctly infer "a" to be number,
// "b" to be string and "c" to be boolean.

También, lea: Costo de desarrollo de aplicaciones web: desglose de precios de 2021

Interfaz como tipos de clase

Una clase crea un modelo de cómo debe aparecer y comportarse un objeto y luego implementa ese modelo definiendo métodos e inicializando atributos de clase. Como resultado, cuando creamos una instancia de la clase, obtenemos un objeto con atributos específicos y funciones procesables.

La interfaz con clases de JavaScript también es posible con TypeScript. La implementación de clases, por otro lado, es ligeramente diferente. La interfaz todavía se especifica después del nombre, en este caso, el nombre de la clase. Sin embargo, no utilice dos puntos entre el nombre de la clase y la interfaz.

En su lugar, simplemente actualiza los dos puntos con el implementos palabra clave. Esto le indica a TypeScript que utilice una interfaz que viene después de esta palabra clave en cada clase.

// Create interface Person:
interface Person {
  // Define some class properties
  // of type string and number:  
  name: string;
  weight? : number; 
  age: number;
  height: number;
  hairColor? : string;
}
  // Define class method that returns a string:
  sayHello: () => string;
}

// Annotate the class "Myself" with the "Person" interface:
class Myself implements Person { 
   name: string;
   weight? : number;
   age: number;
   height: number;
  hairColor? : string;
}

  // Create constructor and assign existing properties:
  constructor(name: string, age: number, weight? : number,  hairColor? : string,    height: number) {
    this.name = name
    this.weight = weight
    this.hairColor = hairColor
    this.age = age
    this.height = height 
  }

  // Define required class method:
  sayHello() {
    return `Hello, my name is ${this.name}.`
  }
}

Propiedades de solo lectura

Es posible que desee restringir la actualización de algunos atributos al crear un objeto. Las interfaces de TypeScript también se pueden usar para indicar este propósito. los solo lectura La palabra clave se usa antes del nombre de la propiedad para lograr esto. Esto indica a TypeScript que la siguiente propiedad es una propiedad de solo lectura. Solo puede establecer el valor de la propiedad de solo lectura durante la inicialización si usa la interfaz para anotar un objeto. El compilador de TypeScript generará un error si intenta modificar el valor de la propiedad más adelante.

interface CarProperties {
    readonly length: number;
    readonly width: number;
    readonly wheelbase: number;
    readonly seatingCapacity: number;
}

Las propiedades de solo lectura no se pueden modificar después de que se hayan inicializado. Los atributos largo, ancho, distancia entre ejes y capacidad de asientos nunca se pueden cambiar después de que se hayan inicializado con un valor establecido.

También, lea: Principales errores de desarrollo de aplicaciones web que se deben evitar en 2022

Ampliación de interfaces

Las interfaces extensibles pueden extender cualquier otra interfaz para importar las propiedades de esa interfaz. Esto ayuda a crear componentes pequeños y reutilizables. Al extender las interfaces con múltiples interfaces, tenemos que separarlas con comas. Usamos palabras clave extendidas entre la primera interfaz y la segunda interfaz para extender sus propiedades.

// Create "Person" interface:
interface Person {
  name: string;
}

// The "Male" interface created extends the "Person" interface:
interface Male extends Person {
  gender: 'Male';
}
// In terms of Interface, this means:
// interface Male {
//   name: string;
//   gender: 'Male';
// }

// Now the "Female" interface is created to extend the "Person" interface:
interface Female extends Person {
  gender: 'Female';
}
// This Interface mean:
// interface Female {
//   name: string;
//   gender: 'Female';
// }

// Now the "Boy" interface is created to extend both “Male” and "Person" interfaces:
interface Boy extends Person, Male {
  age: number;
}
// which usually mean:
// interface Boy {
//   age: number;
//   gender: 'Male';
//   name: string;
// }

// Now the "Girl" interface is created to extend both "Female" and "Person" interfaces:
interface Girl extends Person, Female {
  age: number;
}
// which converts to:
// interface Girl {
//   age: number; 
//   gender: 'Female';
//   name: string;
// }

const akshay: Person = {
  name: 'Akshay'
}

const suraj: Male = {
  name: Suraj,
  gender: 'Male'
}

const sarah: Female = {
  name: 'Sarah',
  gender: 'Female'
}

const ahmad: Boy = {
  name: ‘Ahmad’,
  gender: 'Male',
  age: 26
}

const aayat: Girl = {
  name: 'Aayat',
  gender: 'Female',
  age: 18
}

Tipos indexables

Los objetos indexados son los objetos a cuyas propiedades se puede acceder mediante una firma de índice como obj[`perfecta']. Esta es la forma estándar de acceder a los elementos de la matriz, pero también puede hacerlo para los objetos. Por ejemplo, podemos definir un tipo seleccionarCoche como:

Interface selectCar{
[index: number]: string
}
let cars: selectCar = ['Hatchback', 'Sedan', 'Land Rover', 'Premium']
console.log('Element at position 1', cars[1])       // 'Sedan'

Veamos otro ejemplo:

La interfaz con el nombre PersonaObjeto define la forma de un objeto con claves se utiliza como un tipo de cadena y los valores del objeto pueden ser cualquier tipo de datos. Aquí el clave La propiedad solo se usa como marcador de posición porque está encerrada entre corchetes.

// declare indexable interface types
Interface PersonObject {
	[key: string]: any;
}

// declare few objects of type ‘PersonObject’
Let akshay: PersonObject = { name: “Akshay Bisht”, age: 27 };
Let ahmad: PersonObject = { name: “Ahmed”, 1: 26 };

// print values
console.log(‘akshay == > ’, akshay);	
--> akshay = = > { name : ‘Akshay Bisht’, age: 27 }
console.log(‘ahmed == > ’, ahmed);
--> ahmed = = > { name : ‘Ahmed’, 1: 26 }

También, lea: ¿Cómo llamar a la API web con el gancho useEffect en React TypeScript?

Interfaces genéricas

TypeScript también le permite crear los llamados "interfaces genéricas". Estas interfaces le permiten especificar el tipo de propiedad en función de uno o más parámetros que pone a disposición de la interfaz cuando la usa. Los genéricos de TypeScript se usan cuando necesita crear componentes genéricos que funcionan con múltiples tipos de datos.

Por ejemplo:, no queremos limitar una función para aceptar solo números como parámetros de entrada. Debe ampliarse en función de los casos de uso para aceptar tipos distintos. La especificación de las interfaces genéricas se realiza mediante corchetes angulares (<>) como se muestra en el ejemplo que se muestra a continuación.

let cars: CarSpecification<CarModels> = Stack
let carModels = [
    {
        company: 'Tata',
        modelid: 1,
        length: 112,
    },
]
let newCar = new cars(carModels)
console.log(newCar)        --- >   // prints the value of `carModels`

Using Generics in Asynchronous tasks: 
// Create interface for PersonObject:
interface PersonObject {
  name: string;
  email: string;
}

// Create a generic interface:
interface ApiData<T> {
  payload: T[];
  code: number;	
  date: Date;
}

// Create function to fetch API
async function fetchAPI() {
  // Use ApiData "interface" and pass the "UserData" interface as argument (for T argument):
  const data: ApiData<UserData> = await fetch('/URL_endpoints')

  // The "ApiData<UserData>" converts to:
  // interface ApiDatae<T> {
  //   code: number;
  //   date: Date;
  //   payload: UserData[];
  //  }
}

¿Por qué utilizar interfaces?

Un ejemplo específico: Las interfaces son una forma productiva de especificar los tipos que deben cumplir otros códigos. Las interfaces permiten que JavaScript conozca la versión escrita de los objetos que se utilizarán en la biblioteca de código.

Supongamos que estamos escribiendo algún tipo de código de biblioteca, lo que significa que tenemos que escribir ese código, ya que también es válido para los objetos, los objetos que tienen un determinado conjunto de propiedades. La forma más efectiva es especificar esas propiedades en una interfaz (sin implementación, solo una descripción) y usar las referencias a los objetos para implementar la interfaz en nuestro código de biblioteca.

Lo que hace es permitir que cualquier persona al azar cree una clase que implemente esa interfaz, y para usar un objeto de la clase creada e implementarlo, nuestro código necesita trabajar con él.

Conclusión

Las interfaces son la forma más efectiva de definir tipos en TypeScript. Veamos un pequeño resumen de lo que hemos aprendido en este tutorial:

  • Las interfaces definen las especificaciones de las entidades, los tipos de objetos y la implementación mediante el uso de funciones o clases. Podemos especificar propiedades opcionales en una interfaz usando '?' y use la palabra clave 'solo lectura' para las propiedades que no se pueden cambiar (propiedades de solo lectura) en el nombre de la propiedad.
  • El compilador de TypeScript también verifica las propiedades de abundancia en un artículo y da un error al suponer que un elemento contiene una propiedad que ya se ha definido en la interfaz.
  • Aprendimos cómo definir propiedades indexables, parámetros opcionales, extender interfaces usando interfaces.
  • Las clases y funciones también se pueden implementar con una interfaz. La interfaz contiene la definición solo para las variables de instancia de una clase.
  • Las interfaces también se pueden usar para importar las propiedades de otras interfaces, lo hacemos usando la palabra clave extends.
  • También podemos construir los componentes reutilizables que podemos usar repetidamente en nuestra biblioteca de código usando los genéricos con las interfaces.
[sc name = "Desarrollo web"] [add_newsletter] [add_related_page_diff_contents blog_cat = "aplicación web"]

¿Qué es mecanografiado?

El texto mecanografiado es un "Mecanografiado” versión del lenguaje JavaScript cuyo objetivo es introducir escritura estática en el lenguaje. TypeScript agrega tipos al Código JavaScript para acelerar el desarrollo mediante la identificación de problemas antes de que se ejecute el código JavaScript. Sin embargo, a veces eso puede complicarse y esa es la razón por la que algunos programadores también lo odian.

Interfaces

Las interfaces, en las palabras más simples, describen la estructura del objeto, lo que significa que describe cómo debería verse el objeto. En Mecanografiado, podemos trabajar con “Interfaces”. En TypeScript, una interfaz solo contiene la definición de métodos y propiedades, no su implementación. Es la funcionalidad de la clase que realiza la conexión entre la interfaz proporcionando la conexión con todos los parámetros de la interfaz.

Crear una interfaz

Al crear una nueva interfaz, el interfaz. debe usarse la palabra clave. Esta palabra clave debe ir seguida del nombre de la interfaz. Los corchetes deben contener la forma de un objeto, las propiedades y los tipos. Las propiedades y tipos se especifican como “valor clave” pares al crear la interfaz.

A continuación se muestra un ejemplo de interfaces simples de TypeScript. 

// Create an empty interface:
interface EmptyObject {}

// Create interface Person:
interface Person {
  name: string;
  age: number;
  hairColor: string;
  weight: number;
  height: number;
}

// Create interface Car:
interface Car {
  model: string;
  manufacturer: string;
  numberOfWheels: number;
  type: string;
}

// Create interface User:
interface User {
  name: string;
  pass: string;
  email: string;
}

También, lea: Principales marcos de desarrollo de aplicaciones web para 2022: obtenga la mayor escalabilidad a menores costos

Propiedades opcionales en interfaces

La interfaz declarada también puede tener propiedades opcionales. Para declarar una propiedad opcional, se utiliza el signo de interrogación (?) al final del nombre de la propiedad durante la declaración.

Por ejemplo, si tomamos la interfaz de persona que declaramos anteriormente:

// Create interface Person:
interface Person {
  name: string;
  weight? : number;
  age: number;
  hairColor? : string;
   height: number;
}

En el ejemplo anterior, la interfaz Persona  tiene dos propiedades opcionales con el “?”. es decir "color de pelo' "peso', mientras que las otras tres propiedades son las propiedades requeridas.

Anotación de interfaz en componentes funcionales

Puesto que el Person La interfaz ha sido definida, ahora se puede usar como un tipo, también se puede anotar el parámetro de la función con el nombre de la interfaz:

Veamos nuevamente la interfaz de persona que declaramos anteriormente:

interface PersonData {
  name: string;
 weight? : number;
  age: number;
  hairColor? : string; 
  height: number;
}

function getPersonDetail(person: PersonData) {
    return `${person.name} ${person.age} ${person.height}`;
}

let johnDoe = {
    name: 'John Doe',
    age: 25,
    height: 170,
};

console.log(getPersonDetail(johnDoe));

Salida:

John Doe 25 170

En el ejemplo anterior, el compilador de TypeScript verifica los parámetros o propiedades que se pasan al obtenerDetallePersona() función.

Si el argumento tiene dos propiedades cuyos tipos son números y una propiedad cuyo tipo es una cadena, el compilador de TypeScript pasa la verificación. De lo contrario, arrojará un error.

Interfaz como funciones

Los objetos, incluidas las clases, no son las únicas cosas que pueden utilizar interfaces. Las interfaces de TypeScript también se pueden usar para anotar funciones. Puede lograr esto proporcionando a la interfaz una firma de llamada. Esto significa que asigna la interfaz a la firma de función que contiene la lista de parámetros con tipos y tipos devueltos.

Por ejemplo:

interface multiplyFunc {
// Specify only parameters and return type:
    (a: number, b: number, c: number): string;  
}
// Annotate the "multiply" function
// with "MultiplyFunc" interface:
const multiply: multiplyFunc = (a, b, c) => {
  return a * b * c
}

Una cosa sobre interfaces y funciones. El nombre de los parámetros en una interfaz no tiene que coincidir con el nombre de los parámetros en la función real. También puede usar un nombre similar para el parámetro de la interfaz y para la declaración de la función. Usando el orden, TypeScript relacionará adecuadamente los argumentos con sus tipos. Por ejemplo:

interface myFunction {
// Specify only parameters and return type:
    (a: string, b: Boolean, c: number): string;  
}
const myFunc: myFunction = (x, y, z) => {
  return `x is ${x}, y is ${y}, z is ${z}`
}
// TypeScript will correctly infer "a" to be number,
// "b" to be string and "c" to be boolean.

También, lea: Costo de desarrollo de aplicaciones web: desglose de precios de 2021

Interfaz como tipos de clase

Una clase crea un modelo de cómo debe aparecer y comportarse un objeto y luego implementa ese modelo definiendo métodos e inicializando atributos de clase. Como resultado, cuando creamos una instancia de la clase, obtenemos un objeto con atributos específicos y funciones procesables.

La interfaz con clases de JavaScript también es posible con TypeScript. La implementación de clases, por otro lado, es ligeramente diferente. La interfaz todavía se especifica después del nombre, en este caso, el nombre de la clase. Sin embargo, no utilice dos puntos entre el nombre de la clase y la interfaz.

En su lugar, simplemente actualiza los dos puntos con el implementos palabra clave. Esto le indica a TypeScript que utilice una interfaz que viene después de esta palabra clave en cada clase.

// Create interface Person:
interface Person {
  // Define some class properties
  // of type string and number:  
  name: string;
  weight? : number; 
  age: number;
  height: number;
  hairColor? : string;
}
  // Define class method that returns a string:
  sayHello: () => string;
}

// Annotate the class "Myself" with the "Person" interface:
class Myself implements Person { 
   name: string;
   weight? : number;
   age: number;
   height: number;
  hairColor? : string;
}

  // Create constructor and assign existing properties:
  constructor(name: string, age: number, weight? : number,  hairColor? : string,    height: number) {
    this.name = name
    this.weight = weight
    this.hairColor = hairColor
    this.age = age
    this.height = height 
  }

  // Define required class method:
  sayHello() {
    return `Hello, my name is ${this.name}.`
  }
}

Propiedades de solo lectura

Es posible que desee restringir la actualización de algunos atributos al crear un objeto. Las interfaces de TypeScript también se pueden usar para indicar este propósito. los solo lectura La palabra clave se usa antes del nombre de la propiedad para lograr esto. Esto indica a TypeScript que la siguiente propiedad es una propiedad de solo lectura. Solo puede establecer el valor de la propiedad de solo lectura durante la inicialización si usa la interfaz para anotar un objeto. El compilador de TypeScript generará un error si intenta modificar el valor de la propiedad más adelante.

interface CarProperties {
    readonly length: number;
    readonly width: number;
    readonly wheelbase: number;
    readonly seatingCapacity: number;
}

Las propiedades de solo lectura no se pueden modificar después de que se hayan inicializado. Los atributos largo, ancho, distancia entre ejes y capacidad de asientos nunca se pueden cambiar después de que se hayan inicializado con un valor establecido.

También, lea: Principales errores de desarrollo de aplicaciones web que se deben evitar en 2022

Ampliación de interfaces

Las interfaces extensibles pueden extender cualquier otra interfaz para importar las propiedades de esa interfaz. Esto ayuda a crear componentes pequeños y reutilizables. Al extender las interfaces con múltiples interfaces, tenemos que separarlas con comas. Usamos palabras clave extendidas entre la primera interfaz y la segunda interfaz para extender sus propiedades.

// Create "Person" interface:
interface Person {
  name: string;
}

// The "Male" interface created extends the "Person" interface:
interface Male extends Person {
  gender: 'Male';
}
// In terms of Interface, this means:
// interface Male {
//   name: string;
//   gender: 'Male';
// }

// Now the "Female" interface is created to extend the "Person" interface:
interface Female extends Person {
  gender: 'Female';
}
// This Interface mean:
// interface Female {
//   name: string;
//   gender: 'Female';
// }

// Now the "Boy" interface is created to extend both “Male” and "Person" interfaces:
interface Boy extends Person, Male {
  age: number;
}
// which usually mean:
// interface Boy {
//   age: number;
//   gender: 'Male';
//   name: string;
// }

// Now the "Girl" interface is created to extend both "Female" and "Person" interfaces:
interface Girl extends Person, Female {
  age: number;
}
// which converts to:
// interface Girl {
//   age: number; 
//   gender: 'Female';
//   name: string;
// }

const akshay: Person = {
  name: 'Akshay'
}

const suraj: Male = {
  name: Suraj,
  gender: 'Male'
}

const sarah: Female = {
  name: 'Sarah',
  gender: 'Female'
}

const ahmad: Boy = {
  name: ‘Ahmad’,
  gender: 'Male',
  age: 26
}

const aayat: Girl = {
  name: 'Aayat',
  gender: 'Female',
  age: 18
}

Tipos indexables

Los objetos indexados son los objetos a cuyas propiedades se puede acceder mediante una firma de índice como obj[`perfecta']. Esta es la forma estándar de acceder a los elementos de la matriz, pero también puede hacerlo para los objetos. Por ejemplo, podemos definir un tipo seleccionarCoche como:

Interface selectCar{
[index: number]: string
}
let cars: selectCar = ['Hatchback', 'Sedan', 'Land Rover', 'Premium']
console.log('Element at position 1', cars[1])       // 'Sedan'

Veamos otro ejemplo:

La interfaz con el nombre PersonaObjeto define la forma de un objeto con claves se utiliza como un tipo de cadena y los valores del objeto pueden ser cualquier tipo de datos. Aquí el clave La propiedad solo se usa como marcador de posición porque está encerrada entre corchetes.

// declare indexable interface types
Interface PersonObject {
	[key: string]: any;
}

// declare few objects of type ‘PersonObject’
Let akshay: PersonObject = { name: “Akshay Bisht”, age: 27 };
Let ahmad: PersonObject = { name: “Ahmed”, 1: 26 };

// print values
console.log(‘akshay == > ’, akshay);	
--> akshay = = > { name : ‘Akshay Bisht’, age: 27 }
console.log(‘ahmed == > ’, ahmed);
--> ahmed = = > { name : ‘Ahmed’, 1: 26 }

También, lea: ¿Cómo llamar a la API web con el gancho useEffect en React TypeScript?

Interfaces genéricas

TypeScript también le permite crear los llamados "interfaces genéricas“. Estas interfaces le permiten especificar el tipo de propiedad en función de uno o más parámetros que pone a disposición de la interfaz cuando la usa. Los genéricos de TypeScript se utilizan cuando necesita crear componentes genéricos que funcionen con varios tipos de datos.

Por ejemplo:, no queremos limitar una función para aceptar solo números como parámetros de entrada. Debe ampliarse en función de los casos de uso para aceptar tipos distintos. La especificación de las interfaces genéricas se realiza mediante corchetes angulares (<>) como se muestra en el ejemplo que se muestra a continuación.

let cars: CarSpecification<CarModels> = Stack
let carModels = [
    {
        company: 'Tata',
        modelid: 1,
        length: 112,
    },
]
let newCar = new cars(carModels)
console.log(newCar)        --- >   // prints the value of `carModels`

Using Generics in Asynchronous tasks: 
// Create interface for PersonObject:
interface PersonObject {
  name: string;
  email: string;
}

// Create a generic interface:
interface ApiData<T> {
  payload: T[];
  code: number;	
  date: Date;
}

// Create function to fetch API
async function fetchAPI() {
  // Use ApiData "interface" and pass the "UserData" interface as argument (for T argument):
  const data: ApiData<UserData> = await fetch('/URL_endpoints')

  // The "ApiData<UserData>" converts to:
  // interface ApiDatae<T> {
  //   code: number;
  //   date: Date;
  //   payload: UserData[];
  //  }
}

¿Por qué utilizar interfaces?

Un ejemplo específico: Las interfaces son una forma productiva de especificar los tipos que deben cumplir otros códigos. Las interfaces permiten que JavaScript conozca la versión escrita de los objetos que se utilizarán en la biblioteca de código.

Supongamos que estamos escribiendo algún tipo de código de biblioteca, lo que significa que tenemos que escribir ese código, ya que también es válido para los objetos, los objetos que tienen un determinado conjunto de propiedades. La forma más efectiva es especificar esas propiedades en una interfaz (sin implementación, solo una descripción) y usar las referencias a los objetos para implementar la interfaz en nuestro código de biblioteca.

Lo que hace es permitir que cualquier persona al azar cree una clase que implemente esa interfaz, y para usar un objeto de la clase creada e implementarlo, nuestro código necesita trabajar con él.

Conclusión

Las interfaces son la forma más efectiva de definir tipos en TypeScript. Veamos un pequeño resumen de lo que hemos aprendido en este tutorial:

  • Las interfaces definen las especificaciones de las entidades, los tipos de objetos y la implementación mediante el uso de funciones o clases. Podemos especificar propiedades opcionales en una interfaz usando '?' y use la palabra clave 'solo lectura' para las propiedades que no se pueden cambiar (propiedades de solo lectura) en el nombre de la propiedad.
  • El compilador de TypeScript también verifica las propiedades de abundancia en un artículo y da un error al suponer que un elemento contiene una propiedad que ya se ha definido en la interfaz.
  • Aprendimos cómo definir propiedades indexables, parámetros opcionales, extender interfaces usando interfaces.
  • Las clases y funciones también se pueden implementar con una interfaz. La interfaz contiene la definición solo para las variables de instancia de una clase.
  • Las interfaces también se pueden usar para importar las propiedades de otras interfaces, lo hacemos usando la palabra clave extends.
  • También podemos construir los componentes reutilizables que podemos usar repetidamente en nuestra biblioteca de código usando los genéricos con las interfaces.

Servicios de Desarrollo Web

¿Está buscando una empresa de desarrollo web confiable? Nuestros desarrolladores web altamente calificados nos permiten ofrecer servicios de desarrollo web orientados a resultados. Póngase en contacto con nuestro equipo para comprender cómo podemos ayudarlo a lograr sus objetivos comerciales.



invitado
0 Comentarios
Comentarios en línea
Ver todos los comentarios
0
Me encantaría tus pensamientos, por favor comenta.x