TypeScript의 기초 🦆| #12: 인터페이스

TypeScript와 함께 사용할 수 있는 인터페이스 가능성이 있습니다.

¿Qué es una interfaz?

En palabras poco técnicas una interfaz es como una especie de molde para nuestro datos. No debemos confundir el termino con la UI de una app, en este caso el concepto de interfaz se relaciona más con la estructura de los datos de nuestro software. 예를 들어:

interface Persona {
  id:number;
  nombre: string;
  apellido: string;
  edad: number;
  esSoltero: boolean;
}

interface Perro {
  id:number | string;
  nombre: string;
  color: string[];
  raza:string;
  sexo: "Macho" | "Hembra"
}

interface Vehiculo {
  placa:string;
  color: string;
  ruedas: number;
  puertas: number;
  marca: string;
  esNuevo: boolean;
}

En este caso, tenemos 3 인터페이스: Persona , Perro , Vehiculo . Cada una de ellas se declara con la palabra reservada interface seguido del nombre de la interfaz (en Pascal Case) y entre llaves todas las propiedades con sus tipos de datos separadas por ; .

인터파즈 코모 티포 데 다토

Las Interfaces se usan como tipos de datos Personalizables, con los ejemplos anteriores podríamos crear objetos de la siguiente manera:

interface Persona {
  id:number;
  nombre: string;
  apellido: string;
  edad: number;
  esSoltero: boolean;
}

const pedro:Persona = {
  id:1,
  nombre:"Pedro",
  apellido:"Sanchez",
  edad:36,
  esSoltero:true,
}

Nuestra variable pedro es de tipo Persona , por ende debe tener OBLIGATORIAMENTE todas las variables declaradas en Persona .

엘 콘트라토 데 우나 인테르파즈

En el ejemplo anterior de dice que pedro cumple el contrato de Persona puesto que tiene todos los datos declarados de manera correcta: id, nombre, apellido, edad, esSoltero Si faltara un dato podríamos decir que pedro no cumple con el contrato de Persona puesto que minimamente debería incluir todos los datos de la interfaz.

프로피에다데스 옵션

Las Interfaces al igual que las funciones soportan valores opcionales con el operador ?

interface Vehiculo {
  placa:string;
  color: string;
  ruedas?: number;
  puertas?: number;
  marca: string;
  esNuevo: boolean;
}

const hilux:Vehiculo = {
  placa: 'HYK-256',
  color: 'rojo',
  marca: 'Toyota',
  esNuevo: true,
}

La variable hilux es de tipo Vehiculo pero tanto ruedas como puertas son propiedades opcionales, por ello al crear el objeto y no incluir esos valores no tenemos ningún

프로피에다데스 독주 강의

Con la palabra reservada readonly podemos especificar las propiedades que solo son de lectura y que no podremos cambiar:

interface Perro {
  id:number | string;
  readonly nombre: string;
  color: string[];
  raza:string;
  sexo: "Macho" | "Hembra"
}

// nombre es de solo lectura

const boby:Perro = {
  id: "125-boby",
  nombre:"Boby",
  color: ["cafe","blanco"],
  raza:"cooker",
  sexo: "Macho"
}

boby.raza = "pastor aleman";
console.log(boby)
boby.nombre = "Rufo"

Si Intentamos Cambiar la raza del objeto boby no hay problema, pero si hacemos lo mismo con nombre nos dará un error:
'nombre'는 읽기 전용 속성이므로 할당할 수 없습니다.

헤렌시아 드 인터페이스

Usando la palabraextends podemos heredar 인터페이스:

interface Vehiculo {
  placa:string;
  color: string;
  ruedas?: number;
  puertas?: number;
  marca: string;
  esNuevo: boolean;
}

interface Bicicleta extends Vehiculo {
  esMontañera: boolean;
  traccion: number;
}

const miBici:Bicicleta = {
  placa: '123-abc',
  color: 'negro',
  marca: 'Santusa',
  esNuevo: true,
  esMontañera:true,
  traccion: 21,
}

La interfaz Bicicleta hereda todas las propiedades de Vehiculo , port tanto, el objeto miBici debe tener tanto los atributos de Bicicleta como los de Vehiculo .

Para este ejemplo podemos hacer opcionales las propiedades ruedas y puertas ya que para la interfaz Bicicleta no tiene mucho sentido.

결론

Las Interfaces son una forma de estructurar los datos de nuestro software creando tipos de datos específicos.

Puedes usar parametros opcionales con ?

라스 인터페이스 soportan herencia con extends

Con readonly podemos hacer propiedades de solo lectura.

참조