React에서의 Interface

• state, props 타입을 정의하는 데 주로 사용된다.

객체 타입 정의

interface 바로 사용하기

function getMyInfo(info: {name: string}){
	console.log(info.name);
}

getMyInfo({name: 'dacircle'}) //dacircle 

interface에 이름 붙여서 사용하기

• 객체의 프로퍼티가 두개 이상인 경우에는 이름을 붙여서 사용하는 것이 좋다.

//예시)
interface info {
  name: string;
  age: number;
}

function getMyInfo(info: info) {
  console.log(info.name);
}

const myInfo = {
  name: "dacircle",
  age: 25
};

console.log(getMyInfo(myInfo)); //dacircle 



//잘못된 예시)
interface info {
  name: string;
  age: number;
}

const yourInfo: info = {
	name: "yourName",
	age: 27,
	address: "경기도",
};

Type '{ name: string; age: number; address: string; }' is not assignable to type 'info'.
Object literal may only specify known properties, and 'address' does not exist in type 'info'.
: 객체 리터럴은 정해진 속성만 지정할 수 있으며 'info' 형식에는 'address'가 없습니다.
→ 객체 리터럴로 바로 할당할 때 나오는 메세지이다.

• 해결법

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

const yourInfoList = {
	name: "yourName",
	age: 27,
	address: "경기도",
};

const yourInfo: info = yourInfoList;

: 에러가 나지 않는다..!

---

프로퍼티 타입

• readonly : 읽기만 가능하다. 수정불가
• ? : ?가 붙은 프로퍼티는 있어도 되고 없어도 된다.

interface info {
  readonly name: string;
  age: number;
  address?: string;
}

---

interface 확장

• extends : 기존에 정의된 인터페이스를 확장한다.

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

interface anotherInfo extends defaultInfo{
	address: string;
   	phone: string;
  	family: string[];
}

const myInfo: defaultInfo = {
	name: 'dacircle',
  	age: 25,
};

const yourInfo: anotherInfo = {
	name: 'yourName',
  	age: 27,
  	address: '경기도',
  	phone: '010-1111-1111',
  	family: ['mother','father','sister'],
}

console.log(myInfo.name); //dacircle 
console.log(yourInfo.family); //(3) ["mother", "father", "sister"]

교차타입(Intersection Types)

• 기존의 두 인터페이스를 합쳐서 새로운 타입을 만들 수 있다.

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

interface anotherInfo extends defaultInfo{
  	family: string[];
}

type Info = defaultInfo & anotherInfo;

const yourInfo: Info = {
	name: 'yourName',
  	age: 27,
  	family: ['mother','father','sister'],
}

console.log(yourInfo.name); //yourName 
console.log(yourInfo.age); //27
console.log(yourInfo.family); //(3) ["mother", "father", "sister"]

---

타입호환성(Type Compatibiliry)

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

let i: info;

let myInfo = {
  	name: 'dacircle',
  	age: 25,
	address: '경기도',
};
  
i = myInfo;

• 만약 변수 i에 address까지 있는 객체를 직접 할당했다면?

i = {
  name: "dacircle",
  age: 25,
  address: "경기도"
}

: 에러!

• 하지만 address 프로퍼티가 추가된 객체를 할당한 myInfo를 i에 할당하면 에러가 나지 않는다!

i와 myInfo의 타입은 다르지만 호환이 되었다!!!

• 호환 조건
  • 할당하고자 하는 타입(myInfo)이 할당될 타입의 구조(i)와 내부 타입이 같아야 한다.
    → Structural typing

1. i의 타입은 {name:string, age:number}이다.
2. myInfo의 타입은 타입추론을 통해서 {name:string , age:number , address:string}가 된다!
3. myInfo의 타입과 i의 타입은 서로 다르지만, myInfo의 타입이 i의 타입 구조를 모두 포함하면서 범위가 더 크다.
4. 호환이 잘 된다!