A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Interfaces: propiedades opcionales

22/32
Recursos

Aportes 28

Preguntas 7

Ordenar por:

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

No s茅 ustedes pero hasta este punto yo entiendo todo a la perfecci贸n que buen profesor 馃槂

Propiedades opcionales : No todas las propiedades de una interfaz podrian ser requeridas. Usamos el simbolo 鈥?鈥 luego del nombre de la propiedad.

interface PictureConfig {
	title: string;
	date?: string;
	orientation: PhotoOrientation
}

Propiedades de solo lectura: Algunas propiedades de la interfaz podrian no ser modificables una vez creado el objeto. Esto es posible usando readonly antes del nombre de la propiedad.

interface User {
	readonly id: number;
	username: string;
	readonly isPro:boolean;
}

Like si estas viendo esta clase en Mayo 2021

interface PictureConfig {
    title?: string;
    date?: string;
    orientation?: PhotoOrientation
}
function generatePicture(config: PictureConfig) {
    const pic = { title: 'Default', date: '2020-03' };
    if (config.title) {
        pic.title = config.title;
    }
    if (config.date) {
        pic.date = config.date;
    }
    return pic;
}
let picture = generatePicture({});
console.log('picture : ', picture);
picture = generatePicture({title: 'Travel Pic'});
console.log('picture : ', picture);
picture = generatePicture({title: 'Travel Pic', date: '2012-05'});
console.log('picture : ', picture);

// Interfaz: usuario
interface User {
    readonly id: number; // solo lectura
    username: string;
    isPro: boolean
}
let user: User;
user = { id: 10, username: 'luixaviles', isPro: true }
console.log('user : ', user);
user.username = 'paparazzi';
// user.id = 20; // --> Error
console.log('user : ', user);

referente a mi pregunta anterior, con type tambi茅n puse la sintaxis de opcional y funciono, por lo mismo no estoy seguro cual leva mejor si interface o type, mas que nada porque controla los par谩metros que le enviamos a una funci贸n y no tanto por como se usa interface cuando usamos implements.

Si muy bien explicado, y los ejemplos son muy pr谩cticos

Estupenda clase instructor Luis, me agrada como podemos establecer una estructura para los objetos que se van a manipular y el readonly ser谩 bastante 煤til a la hora de tener datos que no queremos que se modifiquen una vez recibidos.

Buen profesor, pero no va al grano, todo esto pudo haberse explicando en 3 mins o menos鈥

Interfaces: propiedades opcionales

No todas las propiedades de una interfaz podr铆an ser requeridas.

Establecemos una propiedad como opcional con el s铆mbolo 鈥?鈥 despu茅s del nombre.

interface PictureConfig {
  title?: string, //* El '?' indica que el par谩metro es opcional
  date?: string,
  orientation?: PhotoOrientation
}

function generatePicture(config: PictureConfig) {
  const picture = {title: 'Default title', date: '2020-01-01'} //*Valores por defecto
  if (config.title) {
    picture.title = config.title
  }
  if (config.date) {
    picture.date = config.date
  }

  return picture
}

let picture = generatePicture({})
console.table({picture})

picture = generatePicture({title: 'Travel Pic'})
console.table({picture})

picture = generatePicture({title: 'Travel Pic', date: '2016-06-23'})
console.table({picture})
<h5>Interfaces: Propiedades de solo lectura</h5>

Algunas propiedades de la interfaz podr铆an no ser modificables una vez creado el objeto. Esto es posible usando readonly antes del nombre de la propiedad.

//* Interfaz: Usuario

interface User {
  readonly id: number,
  username: string,
  isPro: boolean
}

let user: User = {id: 10, username: 'Mike', isPro: true}
console.table({user})
//*modificamos ahora un campo
//! user.id = 20 ahora no podemos modificar este campo
user.username = 'paparazzi'
console.table({user})

Solo quiero mencionar que la forma de explicar del profesor es muy buena, todas las clases desde el inicio son bastante entendibles, un capo.

  • Dentro de las interfaces se declara un contrato. Un contrato que solo puede ser violado si las condiciones son opcionales.
  • De todo lo que puede declararse dentro de la interfaz, 煤nicamente las propiedades que son opcionales pueden ir seteadas
    por default o pasando un objeto (seg麓麓un su estructura) para sobreescribir sus valores.
  • Anteponiendo la palabra reservada readonly se define que algunas propiedades podr铆an no ser modificables.
    .
interface User {
    readonly name?: string;
    readonly age?: number;
    isPro?: boolean;
}

let user: User;
user = {name: 'Andr茅s', age: 27, isPro: true}
user.name = 'Felipe'; // This will not change the object, so is the reason for readonly
 /** Error: (property) User.name?: string | undefined
   * Cannot assign to 'name' because it is a read-only property. 
   * 
   */

Hola a todos! Estaba demasiado perdida en este tema y le铆 este articulo y me aclaro muchas dudas y ya viendo el video entend铆 mucho mejor todo! https://www.tutorialsteacher.com/typescript/typescript-interface

We can write interfaces with comma and semicolon. They both are valid but it鈥檚 needed a consistency.
TS prefers semicolon to comma.
Source

interface User {
	readonly id: number
	username: string
	isPro: boolean
}

Ok para propiedades especificas es usar readonly y si todo es inmutable simplemente es mejor que la variable sea const

Siguiendo con el ejemplo de pokemones 馃榾
.

Solo lectura
Un atributo/propiedad no cambiar谩 de valor, readonly antes del nombre de la propiedad. Se da el valor al inicalizar el objeto pero no podr谩 ser mutable el valor de la propiedad.

<h3>Atributos opcionales en interfaces</h3>
// las 3 propiedades definidas son opcionales
interface PictureConfig{
	title?: string,
	date?: string,
	orientation?: PhotoOrientation // Enum
}

// como son opcionales chequeo su existencia antes de aplicarlos a mi objeto
function generatePicture(config: PictureConfig){
	const pic = {title: 'default', date: '2020-03'}
	if(config.title){
			pic.title = config.title
	}
	if(confi.date){
			pic.date = config.date
	}
		
	return pic;
}
<h3>Propiedades readonly</h3>

En ts tambien tenemos la posibilidad de indicar en nuestro codigo que variables no pueden ser modificadas una vez de ser creadas.

Esto es posible usando readonly antes del nombre de la propiedad

// el id una vez creado no va a poder ser mutado
interface User {
	readonly id: number;
	username: string;
	isPro: boolean;
}

let user: user;
user = {
	id: 10,
	username: 'fedewalo', 
	isPro: true
}
interface Config {
	title: string;
	date?: string;
	orientation: PhotoOrientation
}

Al ser TS derivado de JS podemos utilizar Object.assign

Atributos de solo lectura

馃憣

interface Config {
	title: string;
	date?: string;
	orientation: PhotoOrientation
}```

No se si es que mi version de TypeScript es mas nueva que la usada en este curso, pero cuando yo uso 鈥渞eadonly鈥 igualmente me permite cambiar la data de la variable, solo me aparece la variable subrayada, y me dice que tiene un error, pero en la consola de igualmente aparece el cambio. Al igual si NO USO el signo 鈥?鈥 para volver los atributos opcionales, y no los uso me aparece la variable subrayada con el error, pero el cambio persiste en la consola cuando lo imprimo.

SE SUPONE QUE ESOI DEBE SUCEDER?

Quiero m谩s cursos con este profesor !

en la parte donde pic.title marca error, seg煤n entiendo es por que esta definido como un objeto vaci贸 y no tiene la propiedad title, pero en el v铆deo dice que el contrato es el que nos condiciona

Una forma para usar una propiedad de un objeto solo cuando esta propiedad existe, es usar un ? antes del punto que llama la propiedad, por ejemplo

pic.title = config?.title
//Si la propiedad "title" del objeto "config" existe, el resultado ser谩 ese valor, en caso ser谩 undefined

Algunas propiedades solo deber铆an ser modificables cuando se crea un objeto por primera vez. Puede especificar esto poniendo readonlyantes del nombre de la propiedad:

  readonly x: number;
  readonly y: number;
}Tratar