타입스크립트_2

interface

객체의 속성은 이전 정리 글에서

let A:{
 name: string;
 age: number;
} = {
 name: "A",
 age: 26
}

이렇게 표현한다고 했다. 이번에는 interface를 사용해서 객체 프로퍼티의 타입을 지정해본다.

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

let A:User = {
 name: "A",
 age: 26
}

이렇게 interface로 객체의 타입을 지정할 수있다.
객체를 생성한 다음 gender라는 프로퍼티를 추가하는 경우엔

interface User {
 name: string;
 age: number;
 gender: string;
}

let A:User = {
 name: "A",
 age: 26
}

A.gender = "male"

이렇게 작성할 경우 A라는 객체를 생성할 때 gender가 존재하지 않으므로 에러가 발생한다.
이 경우엔 optional한 프로퍼티로 타입을 지정해줘야한다.

interface User {
 name: string;
 age: number;
 gender?: string; // 있어도 되고 없어도 되는 optional한 프로퍼티
}

let A:User = {
 name: "A",
 age: 26
}

A.gender = "male"

만약 optional한 타입이 너무 많을 경우 이렇게도 가능하다.

interface User {
 name: string;
 age: number;
 [class:number]: string; // number타입의 key와 string 타입의 value를 갖는다.
}

let A:User = {
 name: "A",
 age: 26,
 1: "A반",
 2: "B반"
}

여기서 또 만약 class의 value를 string 전체가 아닌 일부 문자열만 받고 싶다면

type ClassName = "A반" | "B반" | "C반"
interface User {
 name: string;
 age: number;
 [class:number]: ClassName; // A반, B반, C반의 값만 value로 갖을 수 있다.

let A:User = {
 name: "A",
 age: 26,
 1: "A반",
 2: "B반"
}

다음으로 접근은 가능하나, 변경은 불가능한 readonly타입은 이렇게.

interface User {
 name: string;
 readonly age: number;
}

let A:User = {
 name: "A",
 age: 26
}

A.age = 25; // readonly 타입이기 때문에 변경 시 에러 발생

interface를 이용하여 함수의 타입도 지정해줄 수 있다.

interface Add{
 	(num1: number, num2: number): number // (매개변수: 타입): 리턴 타입
}

const add: Add = (num1, num2) => {
	return num1 + num2;
}

추가로 interface로 class도 지정할 수 있는데, 이 부분은 따로 정리하겠다.