인터페이스란?

인터페이스는 사용자가 정의한 타입의 모음 입니다.

타입스크립트 에서만 사용하는 하나의 타입약속 이기 때문에

실제 자바스크립트에선 사용되지 않습니다. (컴파일 시에 지워버림)

interface user1 {
  name: string;
}

optional property

변수에 인터페이스 타입을 지정할때

해당 변수에는 인터페이스의 값들이 모두 존재 해야 합니다.

interface user1 {
  name: string;
  age: number;
}

const p1:user1 = {        // 오류 발생 age 값이 없음
  name : "Elon",                 
  
}

인자를 넘겨도 되고 안넘겨도 될때에는 ?: 형식으로 명시합니다.

interface user1 {
  name: string;
  age?: number;            // ?:
}
const p1:user1 = {        // 오류 없음
  name : "Elon",                  
}

indexable type

인터페이스를 사용할땐 속성값이 동일해야 합니다.

만약 구조를 추가해서 사용 하고 싶을때는 indexable type 을 사용할수 있습니다.

interface Foo{
  name: string;
  [index :string]:string 
}
const a : Foo = {
  name: 'Elon',
  hi:"hi",
  hello:"hello"
}

[indexName : indexer type ] :return type 형식으로 선언합니다.

name 과 같이 직접 표기한 것은 똑같이 명시 해야하지만
인덱서블 타입은 추가를 원할때 사용 하기 때문에 옵셔널 타입이라고 볼수 있습니다.

다만 인덱서 타입은 string 과 number 두가지만 사용 할수 있으며
선언된 즉시 인터페이스 안의 값들은 모두 인덱서 타입의 서브타입이 되야 합니다.

interface Foo{
  name: number;                  //오류발생 "number 는 string 에 할당이 불가능합니다" (서브타입 x)
  [index :string]:string 
}

따라서 보통의경우 인덱서블의 리턴타입을 늘리거나 any 를 사용합니다.

interface Foo{
  name: number;
  [index :string]:any            // 오류 없음
}

인터페이스 함수

함수의 타입도 인터페이스를 사용할수 있습니다.

interface Inum {
  (num1:number,num2:number):number
}

const sum : Inum = function(x,y){
  return x+y
} 

이때 sum : Inum 을 선언하면 함수 매개변수에는 굳이 타입을 지정하지 않아도 됩니다.

extends , readonly

extends 를 사용하면 상속을 받을수 있습니다.

interface IPerson {
  name: string
  readonly age?:number,
}

interface Iaddres extends IPerson{
  address:string
}

const user1: Iaddres = {
  name:"Elon",
  age:20,
  address:"USA"
}

만약 인터페이스 속성에 readonly 가 있으면 바꿀수 없습니다.

user1.age="25" //오류