A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Interfaces

21/32
Recursos

Aportes 26

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥渃omplejo鈥, 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)

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

console.log( { picture }):

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

// 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'   // --> Error
}); // objecto anonimo

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"]);

Interfaces

Las interfaces en TS constituyen una forma poderosa de definir 鈥渃ontratos鈥 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
})

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

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}]`
}

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;
}

Aqu铆 una aplicaci贸n en otro contexto 馃榿
.

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?

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

Al crear una interface, se obtienen las facilidades de iterar sobre las propiedades de la interface, como si fuera un Object en JS en lugar de un object type en TS

// Interface
enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}

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

const showPicture = (picture: Picture) => {
    console.log(`title: ${picture.title}, date: ${picture.date}, orientation: ${PhotoOrientation[picture.orientation]}`);
}

showPicture({
    title: 'Me',
    date: '2022-02-13', // Today
    orientation: PhotoOrientation.Landscape
});

una interface es como un modelo en si es donde definimos un tipo de dato

para poder utilizar en un Enum en otro archivo hay que export enum PhotoOrientationEnum { }
siempre es bueno tener una nomenclatura para los nombres de los enums

intersante.

Interfaces, contrato para el c贸digo. Palabra reservada interface, defir los par谩metros y el tipado para invocarlo en las funciones.
Objeto an贸nimo: No defino una variable pero le envio la configuraci贸n necesaria.

Si se define una interface, al momento de poner el mouse sobre la interface creada, solo aparece el nombre m谩s no su contenido.

.

INTERFACES 馃槃

Las interfaces en ts constituyen una forma poderosa de definir 鈥渃ontratos鈥 tanto para tu proyecto, como para el c贸digo externo del mismo.

export{}
// Funcion para mostrar una fotografia

enum PhotoOrientation{

  Landscape,
  Portrait,
  Square,
  Panorama

}

//Se le llama contrato a preestablecer un objeto con ciertos atributos que no
 //Pueen ser diferentes ni en su tipo ni aumentarse de atributos al momento de 
  //Invocar la funcion
function showPicture(picture:{title:string, date:string, orientation:PhotoOrientation}){

  console.log(`[title : ${picture.title}, 
                date: ${picture.date}, 
                orientation: ${picture.orientation}]`);

}

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

};

//Invocamos la funcion y le pasamos por paremetro un objeto
showPicture(myPic)
//Tambien podemos enviarle un objeto anonimo

showPicture({
  title: 'Test Title',
  date: '2020-03',
  orientation: PhotoOrientation.Portrait,
  //Si pusieramos un atributo adicional no se reconoceria ya que solo establecimos
    //3 en nuestra funcion y con determinados tipos de datos
});

//Otra forma 
//Establecemos una interface la cual representa un objeto
 //En el que contiene atributos que tienen asignados tipos de datos
interface Picture{

  title: string;
  date:string;
  orientation:PhotoOrientation
}

//Luego le pasamos a la funcion como parametro el nombre y el tipo que seria
  //El tipo que establecimos previamente en la interface
function showPicture2(picture:Picture){

}
  • **Interface ** : Permite definir tipos personalizados (un contrato) para que se adapte a un contexto para el problema que se resuelve. Las interfaces permiten una forma poderosa de definir contratos dentro del proyecto y as铆 tambi茅n para un c贸digo externo. No se puede violar 茅ste contrato por lo que dar铆a un error.
    .
    En nuestro caso, necesitamos definir entidades para cada fotograf铆a dentro del App. Y las interfaces juegan un papel importante para que la fotograf铆a, dentro del App como en el c贸digo, se pueda mantener bajo 茅ste contrato.
export {}

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama,
};

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

let makePictures = (picture: Picture) => {
    console.log({ picture });
}
let myObjPicture = { title: 'Andr茅s', date:'10-07-2020', orientation: PhotoOrientation.Square };

makePictures(myObjPicture);

Una interface es la forma del objeto que queremos tipar.

Recuerden que una interfaz basicamente es un contrato, esto quiere decir que cuando una clase implementa la interfaz dicha clase debe contar con los atributos y/o metodos que esten definidos en la interfaz.