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

-

좋아요

하이 ~~!!

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 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를 많이 활용하는데.. 두 가지 정도만 말씀드리겠다.

아래 코드를 보자.

1 2 3 4 5 6 7 8 9 10 11 class Person { constructor( public name: string, public age: number) { } } let person = new Person( 'kang' , 31 ) person.name person.age

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function Component(constructorFn?: Function) { / / 클래스를 꾸며주는 로직 구현 return constructorFn } / / Decorator @Component() class AppComponent { constructor() { } }

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

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

from http://devkingdom.tistory.com/99 by ccl(A) rewrite - 2020-03-07 11:21:23