Interfaces

Jose Daniel Hernandez Quiceno

student•

Hasta donde tenia entendido en POO, una interfaz definia unicamente los METODOS de un objeto y no las propiedades como lo muestra el ejemplo que nos da el profesor. Tanto de las propiedades como los metodos se encargan las clases. Aqui es donde entra Typescript, en TS podemos tambien definir propiedades, no unicamente metodos.

Y si es util, creo que esta definicion de interfaz es un poco mas clara: Una interfaz (En TypeScript) es un tipo (como string, boolean, number, etc) mas "complejo", en el cual defines (como enun contrato) las propiedades y metodos que se deben cumplir de cualquier objeto que lo instancie.

La diferencia entre una interfaz y una clase es que en la interfaz solo hacemos mencion de que esperamos de un objeto, en una clase mencionamos las propiedades (igual que una interfaz) pero definimos los metodos (osea, especificamos que hara ese metodo, en la interfaz solo mencionamos el nombre de la funcion)

Albert Eduardo Hidalgo Tavera

student•

Puedes contactar esto en la documentación oficial de TS https://www.typescriptlang.org/docs/handbook/interfaces.html

Juan Sarmmiento

student•

En C# y creo que en la mayoría de lenguajes que conozco las interfaces pueden definir tanto como atributos/propiedades y métodos, la diferencia entre una interfaz y una clase es que la primera solo define los tipos y métodos que debe tener la clase u objeto que la implemente pero no su implementación en si

Marco Antonio Macedo Preciado

student•

Pro tip Impriman object literals en la consola para tener todo bien mostrado desde la consola

console.log( { picture }):

Luis Abdel Rangel Castro

student•

{ picture: { title: 'New year', date: '02/07/1980', orientation: 1 } }

Emerson Cedeño

student•

elevemos un poco la barra 🤓, qué tal les parece usar table en lugar de log, quedando de la siguiente forma:

console.table( {picture} );

Miguel de la Rosa

student•

Una interfaz es como un molde para un objeto. Si el objeto no encaja en el molde, te va a dar error.

Moisés Manuel Morín Hevia

student•

Una interface para defir los parámetros y el tipado para invocarlo en las funciones.

Roberto Pérez

student•

Excelente ejemplo compañero

Boris Vargas Paucara

student•

// INTERFACES
/* Las interfaces una forma poderosa de definir 'contratos' tanto para tu proyecto, como para el codigo externo */

// Funcion para mostrar una Fotografia
export {}

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}
interface Picture {
    title: string,
    date: string,
    orientation: PhotoOrientation
}
function showPicture(picture: Picture) {
    console.log(`[title: ${picture.title}, date: ${picture.date}, orientation: ${picture.orientation}]`);
}
let myPic = {
    title: 'Test title',
    date: '2020-03',
    orientation: PhotoOrientation.Landscape
}
showPicture(myPic);
showPicture({
    title: 'Test Title',
    date: '2020-03',
    orientation: PhotoOrientation.Portrait,
    // extra: 'test'   // --&gt; Error
}); // objecto anonimo

Helí Fernando Jerez Rincón

student•

Cuando defines un objeto por ejemplo:

let obj = {
    user: "Heli",
    pwd: "1345"
};

typescript crea una interface anónima con los tipos de los objetos y es posible castearlo a una interface definida

interface ObjInterface {
    user:string;
    pwd:string;
}


let obj = {
    user: "Heli",
    pwd: "1345"
};


let obj2 = obj as ObjInterface;

console.log(obj["user"]);

Miguel Angel Reyes Moreno

student•

Interfaces

Las interfaces en TS constituyen una forma poderosa de definir "contratos" tanto para tu proyecto, como para el código externo del mismo.

Documentación oficial sobre interfaces en TS

Interfaces en TS explicado en TutorialsTeacher

Interfaces en TS explicado en Desarrollo Web

Interfaces en TS explicado en TutorialsPoint

//* Función para mostrar una fotografía
export {}

enum PhotoOrientation{
  Landscape,
  Portrait,
  Square,
  Panorama
}

interface Picture {
  title: string,
  date: string,
  orientation: PhotoOrientation
}

function showPicture(picture: Picture) {
  console.table({picture}) //* Imprime una tabla con los datos del objeto, se ve muy profesional
}

let myPic = {
  title: 'Test title',
  date: '2020-03',
  orientation: PhotoOrientation.Landscape
}

showPicture(myPic)
showPicture({
  title: 'Another title',
  date: '2021-06',
  orientation: PhotoOrientation.Portrait
})

Andrea Ysabel Urdaneta Durango

student•

En C# las interfaces son usadas de manera similar, puesto que nos ayudan a mantener contratos en nuestro código y controlar la tipificación de datos y mantenerlos dentro de una estructura

Moisés Manuel Morín Hevia

student•

Lo tendré en cuenta. Gracias.

Raphael Martinez

student•

Cuándo debería usar una interface, cuando un type ? con ambos puedo hacer lo mismo

Moisés Manuel Morín Hevia

student•

Sí, puedes invocar la interface las veces que quieras en las funciones que quieras.

David Santiago Hurtado Betancourt

student•

La documentación oficial te puede dar una idea: Differences Between Type Aliases and Interfaces

Federico Walovnik

student•

Interfaces

Se constituyen como forma de contratos para el codigo que vaya a implementarla.

Es una forma de definir que propiedades y metodos deben implementar si o si las propiedades que se declaren de este tipo de interfas

interface Picture{
	title: string,
	date: string,
	orientation: PhotoOrientation // Enum
}

// el parametro picture va a verificar si el valor recibido cumple con la interface
function showPicture(picture: Picture){
	console.log(`[title: ${picture.title},
								date: ${picture.date}
								orientation: ${picture.orientation}]`
}

Juan Diego Urbina Chuscano

student•

al igual que los parámetros de las funciones las interfases pueden tener sus propiedades opcionales. La ventaja de las propiedades opcionales es que puede describir estas posibles propiedades disponibles y al mismo tiempo evitar el uso de propiedades que no forman parte de la interfaz.

interface SquareConfig {
  color?: string;
  width?: number;
}

Juan Francisco Cevallos Valdivieso

student•

Entonces, interface seria como la declaracion del objeto?

Gabriel Alejandro Delgado Álvarez

student•

Si,de cierta manera. Un objeto que utilizas para crear otros objetos que extiendan del primero

Gonzalo Rojas Alvarez

student•

No estoy seguro, interface seria mas como un constructor de un objeto. Ahí se definirían las variables y sus tipos , pero un objeto podría tener mas cosas.

Alessandra Amicarella

student•

TypeScript Cheat Sheets

Sergio Orejarena Rueda

student•

Aquí una aplicación en otro contexto 😁 .

Jofay Zhan Segura

student•

https://pokeapi.co/

silvana murgo

student•

Interfaces vs Type - >

Lizardo Reyes

student•

Justo veía eso, son muy similares, casi tienen el mismo uso, hasta la herencia. Pero es más cómodo usar extends que &, asi que interfaces será lo que usare en estos casos.

Jorge Cruz Perez

student•

Luis: yo hice lo siguiente, en vez de interfaz use un type:

type Picture = {
  title:string,
  date:string,
  orientation:PhotoOrientation
}

const showPicture = (data: Picture)=> {
  console.log(`[titulo: ${data.title}
    date: ${data.date}
    orientation: ${data.orientation}]`);
}
showPicture({title: "Venom",
            date: "14-07-2000",
            orientation: PhotoOrientation.Square});

let myPict:Picture ={
  title:"test title",
  date: "2020-13",
  orientation: PhotoOrientation.Landscape
}
showPicture(myPict);
interface Dos{
  method1():void;
}

Transpila y correo sin problema, la pregunta es cual es mas conveniente?

silvana murgo

student•

"Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable."

mas info -> :D

Jose Daniel Barría Reyes

student•

enum PhotoOrientation{
	Landscape,
	Portrait
}
interface Picture {
	title:string;
	date:string;
	oretation: PhotoOrientation
}
public showPicture(picture: Picture): void;

Jesus Adrian Berrio Valdes

student•

Seria una buena practica tener un archivo llamado types.ts e ir importando las interfaces segun las vayamos nesecitando?

Andres Roberto Coello Goyes

student•

Si yo aveces lo llamo /interfaces y alli modulamos las propiedades que usaremos, es una forma de tener organizado

Jorge Méndez Ortega

student•

Prácticamente un ENUM es una simple lista de propiedades y una interfaz es como un mapeo de las propiedades de un objeto con la cual no nos permite mandar ni mas ni menos propiedades y ademas no nos deja mandar propiedades que no cumplan con el tipo

Randall Samuel Méndez Loría

student•

Si, se puede interpretar de esa manera. Hay una forma de enviar propiedades si que cumplan el tipo, es con casteos, pero solo funciona con tipo simples.

David Prieto Cornejo

student•

Respecto a lo de que la interfaz no permite mandar más propiedades, no es del todo cierto. Hay una forma en la que le podemos decir que pueden haber más propiedades que desconocemos al momento de definirla:

interface Person {
    firstName: string;
    lastName: string;
    [key: string]: any
}

Ese [key:string]: any básicamente es análogo a un parámetro opcional en las funciones, permitiéndonos asignar los siguientes objetos:

const person: Person = {
    firstName: 'Jorge',
    lastName: 'Méndez Ortega'
}

const person2: Person = {
    firstName: 'David',
    lastName: 'Prieto',
    age: 32
}

const person3: Person = {
    firstName: 'John',
    lastName: 'Doe',
    role: 'developer',
    isActive: true
}

Freddy Contreras

student•

¿Cúal sería la diferencia entre utilizar interface y type?

type User = {
  name: string
}

interface UserI {
  name: string
}

Adrian Ducuara Benitez

student•

Hola fcontreras21, espero te encuentres bien, la diferencia consiste en lo siguiente:

type: Te permite reutilizar un tipo de dato sea string, number, boolean por medio de un alias. Permítame resalto un ejemplo:

Pensemos en que hemos construido dos funciones y tal vez ambas retornen dependiendo de las decisiones en su lógica de negocio uno o dos tipos de datos.

function firstFuntionOne(): string | undefined { 
}

function secondFunction(): string | undefined {
}

Si te fijas estamos reutilizando el tipado del retorno de la función, podríamos mejorar un poco con los beneficios de type en esta forma:

type typesTest = string | undefined

function firstFuntionOne(): typesTest { 
}

function secondFunction(): typesTest {
}

De esta menera tendríamos ambos tipos, pero no solo aplica a este ejemplo de tipos, podrían ser así mismo valores sugeridos.

Interface: En las interfaces de TypeScript defines atributos o propiedades para luego implementarlas en tus clases a través del concepto de herencia. Tal vez podríamos decir, bueno pero podemos usar otra clase y heredar sus propiedades y eso es correcto, sin embargo a diferencia es que en las interfaces únicamente implementas propiedades sin métodos. Esto logra una gran ventaja a la hora de implementar una interface y tal vez no querer implementar toda una lógica en funciones obligatoriamente.

Te recomiendo si no te queda del todo claro ir a la clase https://platzi.com/clases/1869-typescript/27977-union-de-tipos-alias-y-tipos-literales/

#NuncaParesDeAprender

Arantxa Giovanna Rosas Del Valle

student•

Si yo agrego la propiedad extra desde el objeto y coloco el objeto en el parámetro no me marca error, la validación de la interfaz no se activa, ¿eso no sería incorrecto?

let myPic = {
  title: "mi titulo",
  date: "hoy",
  orientation: photoOrientation.landscape,
  extra: ""
}

showPicture(myPic);

Robert Romero Medina

student•

Mmm esta raro, agregaste el "extra" y le pusiste tipo string en la interface?

Jesus Federico David Herrera

student•

De la unica manera que la funciona acepte ese parametro extra es que en la interface hayas incluido ese parametro. Sino la interfaz va a validar que tengas los atributos indicados en el.

// INTERFACES
/* Las interfaces una forma poderosa de definir 'contratos' tanto para tu proyecto, como para el codigo externo */

// Funcion para mostrar una Fotografia
export {}

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}
interface Picture {
    title: string,
    date: string,
    orientation: PhotoOrientation
}
function showPicture(picture: Picture) {
    console.log(`[title: ${picture.title}, date: ${picture.date}, orientation: ${picture.orientation}]`);
}
let myPic = {
    title: 'Test title',
    date: '2020-03',
    orientation: PhotoOrientation.Landscape
}
showPicture(myPic);
showPicture({
    title: 'Test Title',
    date: '2020-03',
    orientation: PhotoOrientation.Portrait,
    // extra: 'test'   // --&gt; Error
}); // objecto anonimo

//* Función para mostrar una fotografía
export {}

enum PhotoOrientation{
  Landscape,
  Portrait,
  Square,
  Panorama
}

interface Picture {
  title: string,
  date: string,
  orientation: PhotoOrientation
}

function showPicture(picture: Picture) {
  console.table({picture}) //* Imprime una tabla con los datos del objeto, se ve muy profesional
}

let myPic = {
  title: 'Test title',
  date: '2020-03',
  orientation: PhotoOrientation.Landscape
}

showPicture(myPic)
showPicture({
  title: 'Another title',
  date: '2021-06',
  orientation: PhotoOrientation.Portrait
})

interface Picture{
	title: string,
	date: string,
	orientation: PhotoOrientation // Enum
}

// el parametro picture va a verificar si el valor recibido cumple con la interface
function showPicture(picture: Picture){
	console.log(`[title: ${picture.title},
								date: ${picture.date}
								orientation: ${picture.orientation}]`
}

type Picture = {
  title:string,
  date:string,
  orientation:PhotoOrientation
}

const showPicture = (data: Picture)=> {
  console.log(`[titulo: ${data.title}
    date: ${data.date}
    orientation: ${data.orientation}]`);
}
showPicture({title: "Venom",
            date: "14-07-2000",
            orientation: PhotoOrientation.Square});

let myPict:Picture ={
  title:"test title",
  date: "2020-13",
  orientation: PhotoOrientation.Landscape
}
showPicture(myPict);
interface Dos{
  method1():void;
}

const person: Person = {
    firstName: 'Jorge',
    lastName: 'Méndez Ortega'
}

const person2: Person = {
    firstName: 'David',
    lastName: 'Prieto',
    age: 32
}

const person3: Person = {
    firstName: 'John',
    lastName: 'Doe',
    role: 'developer',
    isActive: true
}

Interfaces

Introducción a TypeScript

El lenguaje de programación TypeScript

Instalación de herramientas para TypeScript

Instalación de herramientas en Windows

Navegación y refactorización

Entorno de Desarrollo

El compilador de TypeScript

El archivo de configuración de TypeScript

Mi primer proyecto TypeScript

Tipos en TypeScript

Tipado en TypeScript

Number, Boolean y String

Any

Void y never

null y undefined

Object

Array

Tupla

Enum

Unión de Tipos, Alias y Tipos Literales

Aserciones de tipo

Funciones en TypeScript

Resumen

Tipos Personalizados

Interfaces

Interfaces: propiedades opcionales

Extensión de interfaces

Clases

Clases públicas y privadas

Métodos Get y Set

Herencia de clases y propiedades estáticas

Resumen

Módulos

Principios de responsabilidad única

Resolviendo módulos

Webpack y agrupación de Módulos

Cierre

Cierre