Interfaces

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)

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 “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
})

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

TypeScript Cheat Sheets

Aquí una aplicación en otro contexto 😁
.

Interfaces vs Type - > https://www.typescriptlang.org/docs/handbook/advanced-types.html#interfaces-vs-type-aliases

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 “contratos” 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.