Si te encuentras con alguna parte que no entiendes puedes dejarlo en la sección de comentarios y haremos todo lo necesario de ayudarte lo más rápido posible.
Solución:
2019: Actualización sobre diferencias y usos
Primero, está la diferencia obvia: sintaxis. Esta es una diferencia simple, pero necesaria para entender: las propiedades de la interfaz pueden terminar en comas o punto y coma, sin embargo, las propiedades de clase solo pueden terminar en punto y coma. Ahora lo interesante. Las secciones sobre cuándo usar y cuándo no usar pueden ser subjetivas: estas son las pautas que doy a las personas de mi equipo, pero es posible que otros equipos tengan otras pautas por razones válidas. No dude en comentar si su equipo lo hace de manera diferente, me encantaría saber por qué.
Interfaces: permite definir un tipo que se usará durante el diseño y el tiempo de compilación para una tipificación fuerte. Se pueden “implementar” o “extender”, pero no se pueden instanciar (no se puede new ellos). Se eliminan cuando se transpilan a JS, por lo que no ocupan espacio, pero tampoco se pueden verificar durante el tiempo de ejecución, por lo que no puede verificar si una variable implementa un tipo específico en el tiempo de ejecución (por ejemplo, foo instanceof bar), excepto comprobando las propiedades que tiene: Comprobación de tipo de interfaz con Typescript.
Cuándo usar interfaces: Úselos cuando necesite crear un contrato de propiedades y funciones para un objeto que se usará en más de un lugar en su código, especialmente en más de un archivo o función. Además, utilícelo cuando desee que otros objetos comiencen con este conjunto básico de propiedades, como tener un Vehicle interfaz que múltiples clases implementan como tipos específicos de vehículos, como Car, Truck, Boat (p.ej class Car implements Vehicle).
Cuándo no usar interfaces: cuando desee tener valores predeterminados, implementaciones, constructores o funciones (no solo firmas).
Clases: también permite definir un tipo que se usará durante el tiempo de diseño y compilación para tipificación fuerte y, adicionalmente, se puede usar durante el tiempo de ejecución. Esto también significa que el código no está compilado, por lo que ocupará espacio. Este es uno key diferencia mencionada por @Sakuto, pero tiene más implicaciones que solo espacio. Significa que las clases se pueden verificar con tipo, conservando la comprensión de “quiénes son” incluso en el código JS transpilado. Otras diferencias incluyen: las clases se pueden instanciar usando new y puede ampliarse, pero no implementarse. Las clases pueden tener constructores y código de función real junto con valores predeterminados.
Cuándo usar las clases: cuando desee crear objetos que tengan un código de función real en ellos, tenga un constructor para la inicialización y/o desee crear instancias de ellos con new. Además, para objetos de datos simples, puede usar clases para configurar valores predeterminados. Otro momento en el que querrá usarlos es cuando está haciendo una verificación de tipo, aunque existen soluciones para las interfaces si es necesario (consulte la sección de interfaz OS enlace).
Cuándo no usar clases: Cuando tiene una interfaz de datos simple, no necesita instanciarla, cuando quiere que otros objetos la implementen, cuando quiere simplemente poner una interfaz en un objeto existente (piense en archivos de definición de tipo) o cuando el espacio tomaría es prohibitivo o injustificado. Como nota al margen, si observa los archivos .d.ts, notará que solo usan interfaces y tipos y, por lo tanto, esto se elimina por completo cuando se transfiere a TS.
nota final, hay otras dos opciones además de solo clases e interfaces, la primera es algo llamado “tipo”, que es bastante similar a una interfaz, pero consulte esta publicación de SO, específicamente la respuesta de actualización de 2019: Texto mecanografiado: interfaces frente a tipos. La última opción es ir al estilo de programación funcional (no OOP) con TS.
Para ver la historia completa con ejemplos, visite PassionForDev.com y más lecturas interesantes sobre clases frente a herencia con ejemplos, visite https://jameshenry.blog/typescript-classes-vs-interfaces/.
De acuerdo con la guía de estilo de Angular 2, se recomienda usar Class sobre Interface para la mecanografía. La principal diferencia es que class persistirá cuando se compile mientras Interface se eliminan puramente ya que no sirven para ningún uso.
Manténgase constante durante todo el proyecto y prefiera el enfoque de guía de estilo con classquién sabe, tal vez algún día necesites agregar method para usted models.
Verifique la respuesta a continuación para obtener más detalles: https://stackoverflow.com/a/55505227/5463904
Simply Class es para crear objetos e Interface te ayuda a saber qué deben contener estos objetos.
La clase es como un plano/plantilla con el que podemos crear objetos. La interfaz es como un contrato en el que una clase tiene que estar de acuerdo para implementar esa interfaz o definir lo que debe contener este plano.
Una clase sencilla:
class Car
engine: string; // 'var' is not used;
constructor(engine: string) // This is how we create constructor
this.engine = engine;
display(): void // 'function' keyword is not used here.
console.log(`Engine is $this.engine`); // just a log.
var objCar = new Car('V8'); // creates new onject
objCar.display(); // output: Engine is V8
console.log(objCar.engine); // output: V8 (accessing member here)
Una interfaz sencilla:
interface IPerson // This is how we create an interface.
firstName: string, // use commas to separate.
lastName: string, // In classes we use semi-colon to separate.
displayDetails: (number) => string
// We are going to store 'interface object' in a variable.
// i.e. we are implementing interface with variable(not class!!)
var customer: IPerson =
firstName: 'jose jithin', // 'implements' variables
lastName: 'stanly',
// Now method implementation.
// Note: the syntax of 'displayDetails' maybe a bit confusing (given below)
// as two colons are used.
// It specifies a return type(string) here for this method.
displayDetails: (rank): string => return `This person has rank $rank. `
// It can be rewritten as following too.
displayDetails: (rank) => return `This person has rank $rank. ` ;
// i.e. return type need not be specified, just like a normal method definition syntax.
console.log(customer.firstName); // output: jose jithin
console.log(customer.lastName); // output: stanly
console.log(customer.displayDetails(1)); // output: This person has rank
He detallado sobre Clase e Interfaz con mi artículo. Esto podría ayudarte a entender.
Sección de Reseñas y Valoraciones
Ten en cuenta recomendar este tutorial si te ayudó.