typeScript - typeScript 개괄2(객체 생성과 접근자 제한)

안녕하세요. 저번 포스팅 글에 이어서 타입스크립트로 인터페이스를 만들고, 인터페이스로 객체를 생성하는 것을 좀 더 자세하게 다루어 보겠습니다.

 

1. class로 객체생성

// 인터페이스
interface member {
    memberNo: number;
    name: string;
    phoneNm?: string;		// 문자열 타입
    isAuthenticated: boolean;	// boolean 타입
}

// 인터페이스 상속
interface customer extends member {
    point: number;
    address?: string;
}

// 객체 정의
class customerInfo {
    info: customer;
    createDt: string;

    constructor(info: customer, createDt: string) {
        this.info = info;
        this.createDt = createDt;
    }
};

let customerInfoParam = {
    memberNo: 1001,
    name: '홍길동',
    isAuthenticated: true,
    point: 0
};

// 객체 생성
let customer1 = new customerInfo(customerInfoParam, '20210707');

console.log(customer1);		// 아래 이미지 참조
console.log(customer1.getInfo());

console.log(customer1) 결과값

우선 interface member를 만들고, interface customer가 상속 받습니다.

class customerInfo의 변수 info를 보시면 interface customer로 타입 명시했습니다. 

customerInfo의 변수 info는 interface customer에 정의한 변수와 타입으로만 저장 가능합니다.

 

class와 interface의 사용처의 다름점을 확실하게 알아두어야할 것 같습니다.

class는 객체 생성하기 위해 객체의 프로퍼티와 메소드를 정의하는 곳입니다.

class에서 interface는 생성자에 파라미터를 받는 '매개변수 반환타입'으로 사용되거나,

class의 메소드의 return 타입을 정의하는 '함수 반환타입'으로 사용됩니다.

 

 

2. 접근제한자

Access Modifiers는 Class 속 property들과 method에 적용될 수 있는 키워드로 Class 외부로부터의 접근을 통제하는 역할을 맡고 있습니다. 이는 버그를 줄여주고 코드를 안정화시키는데 많은 도움이 됩니다.
TypeScript의 Access Modifier로는 Public, Protected, Private가 존재합니다.
하나하나 살펴보도록 하겠습니다.

Public

public 키워드가 붙은 변수들은 Class 외부에서 접근이 가능한 변수가 됩니다.
TypeScript에서는 기본적으로 Class 내부 멤버들이 Public의 성향을 가지고 있습니다. 별다른 명시가 없다면 Public으로 처리가 되는 것이죠. 필자는 보다 간결한 코드를 선호하기에 코드를 작성할 때 Public이 아닌 멤버가 한개 이하라면 별도로 public 키워드는 붙여주지 않습니다. 그렇지만 그런 상황이 아니라면 (public이 아닌 멤버가 여러개인 상황에서는) public 키워드를 명시해줍니다. 헷갈릴 수 있기 때문이죠.

Protected

protected가 붙은 변수들은 Class 내부, 그리고 상속받는 자식 Class에서 접근이 가능합니다.

Private

private 키워드가 붙은 변수들은 Class 내에서만 접근이 가능하며 Class 외부에서는 접근이 불가능해지게 됩니다.
또한 Class 내부에서 private 키워드가 붙은 멤버에 대해 앞에 '_'를 붙여주는 것은 많은 언어에서 convension으로 통합니다. 이러한 습관을 들여놓는 것이 좋습니다.

 

 

https://typescript-kr.github.io/

TypeScript 한글 문서

 

https://velog.io/@kysung95/TS-TypeScript-%EA%B0%9C%EB%A1%A0-5

[TS] TypeScript 개론 (5)

 

https://joshua1988.github.io/ts/

타입스크립트 핸드북