ConferenceTypeScript

TypeScript Korea

TypeScript Korea 발표내용 정리

TypeScript

TypeScript로 얻은 것과 잃은 것 - 손찬욱 님

TypeScript 왜 사용하였을까?

egjs 2.x에서 eg.MovableCoord를 개발할 때 사용하였다.

  • 현 상황 마우스로만 좌표를 가져올 수 있다.
  • 개선 방향 줌, 마우스 휠, 키보드 등등을 통해서 좌표를 가져오기

생각해보니 Polymorphism이더라.

기존에는 2개의 축을 N개의 축을 사용하고 제어하기를 원했다.
eg.MovableCoord를 의미에 맞게 eg.Axes로 Method를 변경하였다.
이때 안정적으로 개발하기 위하여 TypeScript를 사용하였다.

  • 앞의 interface를 사용할 수 있다.

TypeScript로 얻은 것!

interface로 설계 의도가 코드에 명확히 보인다.
definition 파일까지 자동으로 만들어 주었다.

안정성이 뛰어났다.

  • 구현해야 할 것을 안하면 Error.
  • 잘못된 값을 넣거나 필수값을 안넣으면 Error.
  • 데이터를 전달하거나 변형하는 경우에 좋다 즉 데이터 흐름 추적이 뛰어나다.

편의성이 뛰어났다.

결과 코드의 폭넓은 지원 범위

  • TypeScript를 공식적으로 ES3을 지원

정리

  • 코드가 명확해지고, 별도 주석을 안달아도 명세화가 가능하다.
  • 안전성. 구현의 실수를 개발중 잡아준다 특히, 데이터 전달과 변환이 많은 곳에서 좋다.
  • 편의성 툴 사용시 극대화

TypeScript로 잃은 것!

Angular2를 사용하면서 TypeScript를 처음 접하게 되었다.

3’rd party library 사용 시 Hammer.js를 가져올 수가 없었다.

  • TypeScript에서는 undefined가 나온다.
  • Babel에서는 Hammer가 나온다.

이런 상황이 왜 발생하는가?
hammer.js는 UMD 형태로 지원. 하지만 ES6 Module로 호출시 CommonJS 형식으로 인식

TypeScript가 정상인데 왜 Bable은 왜 되었을까??
Babel에는 내부적으로 그렇게 설정이 되어있다. 그래서 더욱 헷갈렸던 것이다.

다행인 것은 요즘 모듈들은 UMD 뿐만 아니라 ES6 Module 용도 함께 배포 package.json에서 지원

1
2
3
{
  "module": "outjs/index.js", // es6 module
}

3’rd party library @types 사용 시 결국 다시 정의를 했어야했다.

과한 사용은 오히려 독!

정리

  • 외부 모듈 사용이 불편하다.
  • 과하게 사용하면 가독성을 떨어뜨린다.

코드 한 줄 없는 TypeScript 사용기 - 김상원 님

TypeScript란 JavaScript의 Offset이다.

TypeScript는 어떻게 우리한테 신뢰를 주었나?

과거의 내가 쓴 코드를 믿을 수 있었다.
빠른 디버깅
적지만 믿을 수 있는 코드

  • 코드 내부에서 입력값을 받는 코드라면 런타임에서 타입을 검사하는 코드 확인 및 타입관련 테스트를 작성할 필요가 없다.

refactoring
코드 === 문서

TypeScript의 단점..

세팅: 빌드 프로세스 수립과정이 복잡
변수 as any를 사용하면 TypeScript가 작동하지않는다.
코드와 타입이 불일치.

TypeScript 개발문화 - 한승호 님

TypeScript를 선택한 이유

  1. 엔터프라이즈 웹서비스 (TypeScript 사용)
  • 애플리케이션 수준의 웹애플리케이션
  • 보안, 기능 확장을 고려한 설계
  1. 빠른 프로토타입 개발 (Node 사용)
  • 팀 빌딩

Js를 사용할때 생산성이 좋지만 과연 주언어로 괜찮을까 ??

Js의 단점

  • 너무 자유도가 놓다.

포기하기 힘든 Node.js의 장점

  • Node ecosystem
  • aws-sdk-js
    • SDK가 지원이 빠르다. promise 등등

기존 JavaScript의 단점을 ES6, TypeScript로 완화 시켜줬다.

프로토타입에 TS를 끼얹다.

Node Module Typescript로 활용하기

  • Type annotation 지원
  • Typescript Wrap 모듈을 생성

JetBrains IDE - mocha TEST

mocha(v4 기준) 테스트 실행 방법은 크게 2가지 방법으로 나뉩니다.

  • 컴파일된 테스트코드(js) 실행
  • 컴파일 되지 않은 테스트코드(ts) 실행

CI(Continuous integration) TEST

프론트엔드에 타입스크립트 프레임워크 적용

Angular를 선택

  • 모듈에 대한 선택을 최소화
  • 강력하고 core팀 지원이 좋은 angular cli 사용
  • 좀 더 크기가 큰 웹 애플리케이션에 적합하도록 Angular가 구성되어있다고 판단

Sequalize-typescript

class로 구성되는 관계형 데이터 모델
IDE에서 타입 체크
기존의 sequelize define 모델

TypeScript 도입에 대한 정리

학습에 대한 비용은 그리 높지 앟다.
프론트엔드에서 타입스크립트는 버릴게 없다.
백엔드는 Node.js의 한계가 보인다. DevOps 구축시에도 손이 많이간다.

React with TypeScript - 최종욱 님

React가 왜 좋을까?

A declarative, efficient, and flexible

React component is a function does one thing very well in a simple but strict way

strict way = props 통신이 한정적이다.
One thing = UI

React와 함께하는 TypeScript의 장점!

Because react component is a function

Live Coding
https://github.com/johnwook/ts-meetup-2018-1

1
2
3
const Tweet = props => {
  return renderComponent(props, states);
};
1
2
3
const Tweet = (props:ITweetProps) => {
  return renderComponent(props, states);
};

TypeScript는 interface를 정의하고 interface의 변화를 따라간다.

Share