�ݺ�ߣ

목차
소개
Angular2(Typescript) 도입
Typescript를 쓰면서 일어났던 의문과 해결
Typescript를 쓰고 느낀점

소개
10월 11월 12월 1월 2월 3월
2016 2017
6months

Angular2 (Typescript) 도입
AngularJS 1 Angular 2

ES6 Dart Typescript

인텔리센스
OOP
Interface
앵귤러가 Typescript로 만들어졌다.
지원이 많다.
1.
2.
3.
4.
5.

1.인텔리센스
실제로 쓰면서 장점
● 컴파일 시점에 타입체크
● 코드 자동생성
● 코드 탐색
생산성 있는 개발 가능

2.OOP
● 한 눈에 비교되는 js, ts 코드
● Angular2 컴포넌트화 프로그래밍하기 용이

2.OOP
Typescript는 Javascript가 대규모
어플리케이션에 적합하지않다는 고객사의
불평에 대응하기위해 만든언어
- Typescript Project Leader

3.Interface
● 좋은 설계는 잘 정의된 인터페이스와 같다는 말이 있습니다.
● 팀원이 짠 코드도 자동완성을 할 수 있습니다.

4.앵귤러2의 메인코드가 Typescript
● rxjs는 이름은 js지만 Typescript로 만들어졌다.

4.앵귤러2의 메인코드가 Typescript
@ViewChild(CustomComponent) myCustomComponent;
● es7에 포함되는 데코레이터(@)를 앵귤러에서 쓸 수 있는 것은 모두 Typescript 덕.

5.지원이 많다
Visual Studio Code의
LSP(Language Server Protocol)
(http://langserver.org/)
1
2
3

5.지원이 많다
● 다양한 지원
● 활발한 Open source
● 커뮤니티

Q. 외부 자바스크립트 라이브러리를 쓰려면?
Typescript를 쓰면서 일어났던 문제점과 해결
jQuery 사용하기
declare var jQuery: any;
this.schedule = jQuery(this.el.nativeElement.children[0]);
this.schedule.fullCalendar('refetchResources');
var jQuery: any; // 이것도 같은 결과이다.

Q. 외부 자바스크립트 라이브러리를 커스텀
하려면?
달력 헤더 부분 개발을 위해 fullcalendar.js 를 썼다.
(https://fullcalendar.io/)

하려면?
해결책
=> 복붙 ( 복사 + 붙여넣기 )

하려면?
Angular Calendar 프로젝트 추천
(https://github.com/mattlewis92/angular-calendar)

1. jQuery를 끌어다 쓰려합니다.
2. 매핑되는 jQuery.d.ts를 찾아보아야합니다.
3. 두가지 방법이 있습니다.
a. typing 프로그램 검색합니다.
b. https://github.com/DefinitelyTyped/DefinitelyTyped
4. jQuery.d.ts 를 확인해보니 최신 jQuery3는 지원하지않습니다.
a. 이슈: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/13258
5. 최신 기능이 .d.ts에 없을 수도 있다는 것을 알 수 있습니다.
해결책 ⇒ 직접 기여
Q. 외부 라이브러리를 쓸 때 타이핑버젼도
고려해야한다.

Q. 외부 라이브러리를 쓸 때 타이핑버젼도
고려해야한다.
특정 jQuery버전을 사용하고 싶을 때 제공된 것 중 어떤 .d.ts버전을
사용해야하는가?
https://www.npmjs.com/package/@types/jquery 의 버전 리스트(왼쪽 사진)
중에 골라야 합니다.
Q1. 저 버전이 그래서 jQuery 버전이랑 어떤 관련이 있나?
Q2. DefinitelyTyped/DefinitelyTyped 의 커밋중에 어떤 버전인가?
해결책 ⇒ 직접 받아서 commit이랑 비교해서
해결하였습니다.
(git bisect + md5sum 돌다리두드리기)

Q. Typescript 버전 업
Typescript 1.8 Typescript 2.0
Angular와 같이 같은 시기에 넘어갈 수 있어서 문제
없었음

Q. Typescript 버전 업
Typescript 2.0 Typescript 2.1
Angular 쪽이 준비되어 있지 않아서 이슈가 있었음
- Typescript 2.1에서는 Angular가 NgModule을 제대로 확인하지 못함.
- 최신 2.1.4 버젼을 못 쓰고, 2.0.10으로 고정해서 썼음.
Angular4 에서는 해당 이슈 해결

Q. 반대로 라이브러리가 precompiled 되면?
반대로 어떤 Angular 라이브러리가 Typescript 2.1+로 precompiled 되어 있을 경우, 이를 Typescript 2.0
환경의 Angular에서 불러오려고 하면 같은 문제가 생김.
해결책
1. 라이브러리를 포크해서, 새 임시 브랜치를 팝니다.
2. package.json을 수정해서 typescript 2.0 환경으로 맞춰줍니다.
3. 다시 빌드합니다.
4. 테스트를 돌려줍니다.
5. 커밋을 합니다.
6. 그리고 그 커밋을 우리 프로젝트에서 사용하는 것으로 해결 (아래 이미지)

Q. Inoic2 으로 넘어갈 때 문제점과 해결
웹 프로젝트의 컴포넌트를 그대로 넘겨받아 사용할 수 있었다.
단, Ionic이 Angular 버젼을 최신으로 따라오는걸 기대하지는 못한다.

“강력하다.”
Typescript를 쓰고
“어렵지 않다.”
“서버도
Typescript로
가자.”
“신뢰성 있는
코드를 작성 할 수
있다.”
개발팀의 느낀점

�ݺ�ߣ

Angualr2에서 typescript 활용하기

Recommended

More Related Content

What's hot (17)

Similar to Angualr2에서 typescript 활용하기 (19)

Angualr2에서 typescript 활용하기