[5/19 TIL] 타입스크립트 인터페이스

kind J·2022년 5월 19일
0
post-thumbnail

타입스크립트 지식이 부족하니 매번 프로젝트 할 때마다 시간도 오래걸리고 헤매는 것 같다. 최소한 한번은 쭉 훓고 가야 하는 것같아서, 오늘은 자주 쓰이는 interface 에 대해서 정리해보았다.

인터페이스(Interface)

💡 프로퍼티를 정의해서 객체로 표현하고자 할 때는 Interface 를 사용한다.

1. 객체안의 속성은 타입정의를 안해주면?

에러발생!!

let user: object;

user = {
	name : 'xx',
	age : 30
}

console.log(user.name); //Property 'name' does not exist on type 'object'.
  • object 에는 특정 속성값에 대한 정보가 없기 때문이다.

2. 타입정의 안한 값을 동적으로 추가하려고하면?

에러발생!!

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

let user:User = {
	name : 'xx',
	age : 30
}

user.age = 10;
user.gender = "male"; //Property 'gender' does not exist on type 'User'.

console.log(user.age);

interface User 에 gender가 없기 때문이다.

그렇다면 gender 를 옵셔널로 설정해보자. 타입정의할 때 물음표(?) 붙여 주면 된다.

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

let user:User = {
	name : 'xx',
	age : 30
}

user.age = 10;
user.gender = "male";

console.log(user.age);

3. 타입정의할때 프로퍼티 앞에 readonly 넣으면?

생성할 때만 생성이 가능하고 수정 불가능

interface User {
  name : string;
  age : number;
  gender? : string; //성별을 옵셔널한 프로퍼티로 만들기 (? 사용)
  **readonly** birthYear : number; //읽기 전용 속성

}

let user:User = {
  name : 'xx',
  age : 30,
  birthYear: 2000,
	1: 'A' // 근데 여기서 에러가 난다.  
}

user.age = 10;
user.gender = "male";
user.birthYear = 1990; //에러 발생

Cannot assign to 'birthYear' because it is a read-only property.

4. 키는 숫자만 들어가고 값은 string 만 나오게하려면?

1-4 학년까지 성적을 내고 싶다면 이런식으로 할수있다.

interface User {
	1 : string; 
	2 : string;
	3 : string;
	4 : string;
}

let user:User = {
	name : 'xx',
  age : 30,
  birthYear: 2000,
	1: 'A' // 근데 여기서 에러가 난다.  
}

아래와 같이 전부 옵셔널로 줄 수 있지만

interface User {
	1? : string; 
	2? : string;
	3? : string;
	4? : string;
}

아래와 같이 해주면 좋다.

interface User {
	[grade:number]: string //grade 가 의미 있는 것이 아니다. xx 로 해도된다
}

let user: User = {
	1: 'A',
	2: 'B'
}

5. 타입안에서 범위 한정하기

근데 성적은 A, B, C, D, E 로 한정되어 있는데 string 이라는 범위가 너무 넓다면 이렇게 지정할 수 있다.

type Score = 'A' | 'B' | 'c'| 'D' | 'E' 

interface User {
	[grade:number]: Score;  //Score 에 있는 값만 입력할 수 있다.
}

let user: User = {
	1: 'A',
	2: 'B'
}

6. 인터페이스로 함수도 정의할 수 있다.

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

const add: Add = funtion(){
}

근데 위와 같이 두면 에러가 난다. 인터페이스에서 정의한것과 같은 형태가 나와야 한다.

아래와 같이 하면 에러가 사라진다.

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

const add: Add = function(x, y){
    return x + y;
}

나이를 받아서 성인인지 아닌지 리턴해주는 함수를 작성해보자.

interface IsAdult {
    (age:number): boolean;
}

const a: IsAdult = (age) => {
    return age > 19;
}

인터페이스로 클래스도 정의할 수 있다.

interface Car {
    color : string;
    wheels: number;
    start(): void;
}

class Bmw implements Car {
    color = "red";
    wheels = 4;
    start(){
        console.log('go...');
    }
}

constructor 도 정의 가능

interface Car {
    color : string;
    wheels: number;
    start(): void;
}

class Bmw implements Car {
    color;
    wheels = 4;

    constructor(c:string){
        this.color = c;
    }

    start() {
        console.log('go...');
    }
}

const b = new Bmw('green');

인터페이스는 확장이 가능하다. 이때는 extends 로 확장 하면 된다.

Benz 는 Car 가 가지고 있는 속성들을 다 받게 된다.

interface Car {
    color : string;
    wheels: number;
    start(): void;
}

interface Benz extends Car{
	door: number;
	stop() : void
}

const benz : Benz = {
	door : 5,
	stop() {
		console.log('stop');
	}
}

이렇게만 입력하면 에러가 난다.

car 에 있는 프로퍼티들도 다 써줘야 에러가 안난다.

interface Car {
    color : string;
    wheels: number;
    start(): void;
}

interface Benz extends Car{
	door: number;
	stop() : void
}

const benz : Benz = {
	door : 5,
	stop() {
		console.log('stop');
	},
    color: 'red',
    wheels: 10,
    start() {
        console.log('start');
    }
}

확장은 여러개도 가능하다.

profile
프론트앤드 개발자로 일하고 있는 kind J 입니다.

0개의 댓글