Typescript Korea 기술세미나 발표자료입니다.

1. 최현섭 Software Engineer

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

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

4. Angular2 (Typescript) 도입
AngularJS 1 Angular 2

5. ES6 Dart Typescript
Angular2 (Typescript) 도입

6. ES6 Dart Typescript
Angular2 (Typescript) 도입

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

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

9. 2.OOP
실제로 쓰면서 장점
● 한 눈에 비교되는 js, ts 코드
● Angular2 컴포넌트화 프로그래밍하기 용이

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

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

12. 4.앵귤러2의 메인코드가 Typescript
실제로 쓰면서 장점
● rxjs는 이름은 js지만 Typescript로 만들어졌다.

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

14. 5.지원이 많다
실제로 쓰면서 장점
Visual Studio Code의
LSP(Language Server Protocol)
(http://langserver.org/)
1
2
3

15. 5.지원이 많다
실제로 쓰면서 장점
● 다양한 지원
● 활발한 Open source
● 커뮤니티

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

17. Q. 외부 자바스크립트 라이브러리를 커스텀
하려면?
Typescript를 쓰면서 일어났던 문제점과 해결
달력 헤더 부분 개발을 위해 fullcalendar.js 를 썼다.
(https://fullcalendar.io/)

18. Q. 외부 자바스크립트 라이브러리를 커스텀
하려면?
Typescript를 쓰면서 일어났던 문제점과 해결
해결책
=> 복붙 ( 복사 + 붙여넣기 )

19. Q. 외부 자바스크립트 라이브러리를 커스텀
하려면?
Typescript를 쓰면서 일어났던 문제점과 해결
Angular Calendar 프로젝트 추천
(https://github.com/mattlewis92/angular-calendar)

20. 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. 외부 라이브러리를 쓸 때 타이핑버젼도
고려해야한다.
Typescript를 쓰면서 일어났던 문제점과 해결

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

22. Q. Typescript 버전 업
Typescript를 쓰면서 일어났던 문제점과 해결
Typescript 1.8 Typescript 2.0
Angular와 같이 같은 시기에 넘어갈 수 있어서 문제
없었음

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

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

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

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

27. Thank you