[코딩애플] ts part 2-4. public & private

public, private 쓰는거 보니까 타입스크립트 귀여운편

타입스크립트의 장점

typescript의 장점은 자바스크립트에서 쓸 수 없는 문법도 제공한다는 거다. 예로 들면 객체지향언어에서 사용하는 public, private, protected, static 네 개 키워드를 사용할 수 있다는 거다.

class 많이 만들어서 개발하려면 public, private, protected, static 키워드 유용

이걸 쓰면 장점이 뭐냐면, 객체지향으로 코드를 짤 때, 일명 class를 만들어서 코드 짤 일이 많다 할 때 코드를 더 예쁘게 만들 수 있다.

자바스크립트에서도 일부 키워드는 쓸 수 있긴 하지만, 전부는 다 못쓰니까.. 타입스크립트가 좋다!

많이 하는 질문

class를 만들어보자.

class User {
    name;
    constructor(){
        this.name = 'kim';
    }
}

근데 이렇게 필드 만드나 constructor로 만드나 용도도 같고 결과도 같지 않나?

class User {
    name = 'kim'; 
}

맞다. 그렇지만 constructor가 있는 이유는 파라미터로 값을 가져올 수 있기 때문이다.

class User {
    name;
    constructor(a){
        this.name = a;
    }
}
new User('kim');

class에서 쓰는 public 키워드

public 붙으면 모든 자식들이 이용 가능

예제)

class User {
    public name;
    constructor(){
        this.name = 'kim';
    }
}

let 유저1 = new User('park');
유저1.name = '안뇽'; // 자유롭게 가져오고 수정할 수 있음

Q. 근데 이건 public 안붙여도 원래 그렇지 않나?

A. 맞음. 왜냐면 class 만들었을 때 값들이 default로 public 키워드를 가지기 때문이다. 그래서 가져다 쓸 수 있는거다.

새로 뽑을 오브젝트에 속성을 부여해주고 싶다, 하면 무조건 public 키워드를 붙여쓰면 된다. 그리고 생략이 가능하다는 걸 알고 있어야 한다.

당연히 함수에도 사용 가능

class User {
    public 함수(){
        
    }
}

당연히 class 안의 함수에 붙여도 된다.

class에서 쓰는 private 키워드

private 붙으면 class 안에서만 수정, 이용 가능

private를 붙이면 자식들이 수정할 수가 없다.

class User {
    private name;
    constructor(){
        this.name = 'kim';
    }
}
let 유저1 = new User('park');
유저1.name // Error: Property 'name' is private and only accessible within class 'User'.

수정할 권한이 없어서 에러가 난다.

속성을 물려주는 게 아니라, 안에서만 쓰고 숨기고 싶은 보호할 속성이 있을 때 private를 붙이면 된다.

private 키워드 사용 예시

{name: a, familyName: 'kim'} 복사해주는 class User 만들었다.

class User{
    name :string;
    familyName :string = 'kim';
    constructor(a){
        this.name = a;
    }
}
let 유저1 = new User('민수');
console.log(유저1); // User {familyName: 'kim', name: '민수'}

근데 name 속성에 a + familyName 해주고 싶다 하자.

class User{
    name :string;
    familyName :string = 'kim';
    constructor(a){
        this.name = a + this.familyName;
    }
}
let 유저1 = new User('민수');
console.log(유저1); // User {familyName: 'kim', name: '민수kim'}

근데 familyName은 좀 중요한 데이터라서 다른 곳에서 다른 걸로 변경하면 큰일날 것 같다.

유저1이 실수로 바꾸면 안된다. 이렇게 수정하는걸 방지하고 싶으면 속성 필드 앞에 private를 붙인다.

private familyName :string = 'kim';

그럼 앞으로 실수로 familyName 속성이 변경되는 걸 막을 수 있다.

클래스 안에서만 쓰고 밖에서 쓰면 큰일나는 필드들에 private를 붙여서 수정되지 못하도록 막자.

private는 수정 불가가 아니다. class{} 안에서만 수정, 사용 가능하다.

Q. class 밖에서 수정가능하게 하려면?

1) class 안에 familyName 변경 함수 제작

자식들이 familyName을 바꾸고 싶다면? -> class 내에 이름을 변경하는 함수를 생성한다.

class User {
	name :string;
    private familyName :string = 'kim';
    constructor(a){
        this.name = a + this.familyName;
    }
    이름변경함수(){
        this.familyName = 'park'
    }
}

2) 그리고 자식들이 사용

let 유저1 = new User('민수');
유저1.이름변경함수();
console.log(유저1); // User {familyName: 'park', name: '민수'}

데이터를 외부로부터 보호하고 싶을 때 자주 사용하는 "패턴"이다. 나중에 리액트에서 자주 보게 될 패턴이다.

public키워드 쓰면 this.어쩌고 생략 가능

class Person {
	name;
    constructor(){
        this.name = 'kim';
    }
}

new Person();

이렇게 작성하는게 귀찮다, 해서 constructor부분을 모두 없애버리면 파라미터를 못쓴다. 이럴 때 public 키워드를 이용하면 더 축약할 수 있다.

constructor 안에 public을 쓰면 된다.

class Person {
	constructor(public name :string){ // 이 자리에 들어온 파라미터는 자식의 name 속성에 기입해주세요!
        
    }
}

let 자식 = new Person('kim');
console.log(자식); // Person {name: 'kim'}

여러개 만들고 싶으면 콤마 찍고 계속 만들면 된다.