[강의정리] 타입스크립트의 type과 interface

김재만·2022년 8월 1일
0

readonly

데이터 값을 확인할 수는 있지만, 수정할 수는 없도록 제한하는 키워드

class CLASS_NAME {
	constructor (
      public readonly VAL_NAME : TYPE_NAME,
      protected readonly VAL_NAME : TYPE_NAME
    ) {}
}

static

작성한 클래스 내부의 함수나 인자에 접근하기 위해, 별도의 인스턴스나 객체를 생성하지 않고도 접근 가능하도록 허용하는 메소드.

class CLASS_NAME {
	constructor(){
    }
	static func(){
    }
}

CLASS_NAME.func() >> 호출 가능

type

타입스크립트를 활용해 코드를 작성할 때, type키워드를 활용하면 객체가 가져야 하거나 가질 수 있는 값을 특정할 수 있다. 함수가 갖는 인자값의 타입과 반환 값의 타입도 규정할 수 있다. 뿐만 아니라, 특정 타입 뿐만 아니라 데이터를 명시하여 그 외의 값이 입력되었을 때 오류를 출력하게 할 수 있다.

type OBJ_NAME = {
	key1: type1,
    key2: type2,
    key3: type3
}

type FUNC_Name = { (a:type1, b:type2) : type3 }

type FUNC_NAME2 = (a:type1, b:type2) => typ3

type TYPE_NAME = "A" | "B" | "C"
type TYPE_NAME2 = 1 | 2 | 3

interface

interface는 type 키워드와 달리 객체가 가져야 하거나 가질 수 있는 값을 특정할 때만 사용된다. (React를 활용할 때 자주 사용된다고 함.) 사실상 type보다 사용이 제한적이지만, 객체지향 문법을 토대로 디자인 된 키워드라고 한다.

interface OBJ_NAME {
	key1: type1,
    key2: type2,
    key3: type3
}

다만 상속에 있어서는 문법모양새가 아주 조금 다르다.

interface NEW_OBJ extends OBJ {}

type NEW_OBJ = OBJ & {}

readonly 키워드를 사용할 수도 있고, 같은 이름으로 여러 개의 인터페이스를 선언하여 조건을 동시에 충족하도록 할 수도 있다.

interface OBJ_NAME {
	readonly key1: type1,
    key2: type2,
    key3: type3
}

interface OBJ_NAME2{
	key1: type1
}

interface OBJ_NAME2{
	key2: type2
}

interface OBJ_NAME2{
	key3: type3
}

interface가 type과 또 다른 한 가지는 컴파일링에 있다. type으로 작성한 추상 클래스는 컴파일되면 일반적인 클래스로 자바스크립트가 인식한다. 하지만 interface로 작성한 추상 클래스는 자바스크립트 코드로 남지 않는다. 단, 추상클래스를 상속할 때 extends 대신 implements를 활용해야 자바스크립트가 인식하지 않는다.

또한, interface로 상속한 property는 public으로 선언해야 한다.

interface ABS_CLASS_NAME {
	key1 : type1,
    key2 : type2,
    method1(arg1:type3) : type4,
    method2() : type5
}

class ABS_CLASS_NAME implements CLASS_NAME {
	constructor(
    	public key1: typ1
        public key2: type2
    )
    method1(arg1Name:type3){
		return METHOD_CODE
	}
    method2(){
    	return METHOD_CODE
    }
}


후후후

마무리

원래는 인터페이스를 보고 놀랐어야 될텐데..

profile
듣는 것을 좋아하는 개발자입니다

0개의 댓글