[WEB] TypeScript 기본 (2) - Angular 코드를 읽기 위해 필요한 TypeScript

하이 ~~!!

 

오늘은 가볍게 Angular 에서 흔히 쓰이는 TypeScript의 형태에 대해 소개하려고한다.

 

먼저 TypeScript를 사용하면 프로토타입 기반이 객체지향 프로그래밍이 가능해진다. 

 

아래의 타입 스크립트 코드를 보라.

 

 
class SuperClass {
    public n1 = 10
    protected n2 = 20 
    private n3 = 30
 
    constructor() {
        this.n1 = 100
        this.n2 = 200
        this.n3 = 300
    }
}
 
class SubClass extends SuperClass {
    constructor() {
        super()
        this.n1 = 1000
        this.n2 = 2000
        /* n3 접근 불가 */
        //this.n3 = 3000  
    }
}
 
let sc = new SuperClass();

이렇게 TypeScript 를 활용하면 실제 객체지향 언어처럼 코딩이 가능해진다.

 

이러한 특성을 기반으로 Angular 에서도 TypeScript를 많이 활용하는데.. 두 가지 정도만 말씀드리겠다.

 

아래 코드를 보자.

 

 

class Person {
    constructor(public name: string, public age: number) {
 
    }
}
 
let person = new Person('kang', 31)
 
person.name
person.age
 

위의 코드가 angular에서 많이 사용되는 패턴 중 하나이다.

위의 소스는 일반적으로 객체를 생성하고 멤버 변수를 쓰는 아주 간단한 코드인데... ! 특이한게 클래스 안에 멤버변수가 없다..!

TypeScript에서는 생성자의 파라미터에 public 접근 제어자를 붙여주면 자동으로 멤버변수를 세팅해주는 특성이 있다. (신기하지?)

 

 

다음은 두번째 Angular 에서 많이 사용되는 패턴이다.

function Component(constructorFn?: Function) {
   
    // 클래스를 꾸며주는 로직 구현
   
    return constructorFn
}
 
//Decorator
@Component()
class AppComponent {
    constructor() {
 
    }
}

angular 공부를 좀 해보셨던 분들이라면 Decorator에 대해서 들어본적 있을 거다. 되게 거창할 줄 알았는데 결국 이 Decorator 들도 하나의 함수일 뿐이다. Component니깐 저 클래스를 꾸며주는 로직안에는 HTML 합쳐주고~ CSS 합쳐주고 ~ 뭐.,.. 이런 역할을 할 거다.

 

굉장히 간단한 내용이지만 눈에 잘 익혀두는게 좋을 것 같다. 그럼 즐거운 코딩하자.