타입스크립트 - 나랑 약속해줘(interface)

aydennote·2022년 8월 5일

TypeScript

목록 보기
3/3
post-thumbnail
  1. 인터페이스
    1-1. 객체의 속성과 속성의 타입
    1-2. 함수의 파라미터와 반환 타입
    1-3. 클래스

1. 인터페이스

🕵️‍♀️ 인터페이스란?
인터페이스는 약속 혹은 규칙을 의미하며 아래와 같은 범주에서 사용된다.

  • 객체의 속성과 속성의 타입
  • 함수의 파라미터와 반환 타입
  • 클래스

1-1. 객체의 속성과 속성의 타입

let user:object = {
    name: "ayden",
    age: 28
} 

console.log(user.name)       // 오류 발생

위 예제와 같이 user 변수의 타입을 object로 선언하고 값을 초기화한 후에 user.name과 같이 접근했을 때 에러가 발생하며 아래 예제와 같이 인터페이스를 사용하여 객체를 사용할 수 있다.

interface User{
	name : string,
    age : number,
    weight? : number,
    readonly height : number,
}

let user:User = {
    name: "ayden",
    age: 28,
    height: 170,
} 

// 인터페이스에 있는 값 접근
console.log(user.name)          // ayden

// 인터페이스에 없는 값에 접근
user.mail = "ayden@naver.com"   // 오류 발생
console.log(user.mail)          // 오류 발생

// ? 옵션
user.weight = 64;
console.log(user.weight)        // 64

// 읽기 전용(readonly)
user.height = 180;              // 오류 발생

interface를 사용하여 객체의 key, value의 타입을 정의하여 사용한다. 이때, interface에 정의되어 있지 않는 key를 추가하거나 사용하려고 하면 오류가 발생된다.
또한 weight? 처럼 옵션을 추가할 수도 있고 읽기 전용 값을 만들 수도 있다.

interface User{
    [score:string] : number,
}

let user:User = {
    "수학" : 70,
    "과학" : 80,
    "국어" : 75
} 

위 예제에서 []는 비슷한 속성 타입을 여러개 선언할 때 사용한다.

1-2. 함수의 파라미터와 반환 타입

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

const add : Add = function(a, b){
	return a+b
}

add(1, 2)                 // 3
console.log(add(a, 2))    // 오류 발생

-----------------------------------------------------

interface Adult{
	(age:number):boolean
}

const isAdult:Adult = (age) => {
	return age > 19
}
console.log(isAdult(20))    // true

1-3. 클래스

interface Clothes{
    shirts : string,
    pants : string,
    size : number,
}

class MyClothes implements Clothes {
    shirts = "반팔";
    pants = "반바지";
    size = 30;
}

-----------------------------------------------------

interface YourClothes extends Clothes{
   shoes:string,
}

클래스를 사용할 때는 implements를 사용하여 해당 클래스에 인터페이스에서 정의한 값들을 강제할 수 있고 extends를 사용하여 기존 인터페이스에서 정의된 내용을 확장하여 새로운 인터페이스를 만들 수 있다.

profile
기록하는 개발자 Ayden 입니다.

0개의 댓글