C.W.K.
Stream
Lesson 01 of 06 · published

Why TypeScript: 5년 동안 잊었다가 5분 만에 다시 기억나는 이야기

~12 min · foundations, why, history, trade-offs

Level 0Curious
0 XP0/93 lessons0/23 achievements
0/100 XP to next level100 XP to go0% complete
"JavaScript 가 한 사람 머리에 담을 수 있는 크기를 넘어섰어. TypeScript 는 그 사실을 위한 장부 정리야."

JavaScript 가 틀렸던 (그리고 맞았던) 부분

JavaScript 는 1995년에 10일 만에 설계됐어. Brendan Eich 의 임무는 — 어떤 프로그래머든 줍는 즉시 쓸 수 있고, 대충 짜도 벌받지 않고, 그냥 돌아가는 브라우저 스크립팅 언어 — 였어. 성공했어. 25년 뒤 JavaScript 는 지구의 모든 프론트엔드, 백엔드 대부분, 그리고 둘 다의 build pipeline 대부분을 돌리고 있어. 성공시킨 그 특징 — "그냥 돌아가" — 가 정확히 scale 에서 깨진 그 특징이야.

혼자 200 줄 JavaScript 쓰면 타입 없는 게 해방감이야. 다른 엔지니어 7명이랑 200,000 줄 쓰면 — 타입 없는 게 슬로우 누수야. 함수 이름 바꿔 — caller 3개가 새벽 2시 production 에서 깨져. 리턴 값을 string 에서 string-or-null 로 바꿔 — UI component 가 null 을 "null" 텍스트로 렌더해 — CEO 가 데모에서 봐. 일정 규모 넘은 모든 JavaScript codebase 에 같은 흉터가 있어.

TypeScript 는 그 에러들이 production 에 도달하기 전에 잡는 장부 정리야. Runtime 도 아니고 — compile time, 에디터 안, 코드가 돌기 전에. 비용은 앞단에서의 annotation 작업. 이득은 "어 이거 내가 생각한 거 아닌데" 류 버그가 통째로 사라지는 거야.

TypeScript 가 진짜 뭐야

TypeScript 는 JavaScript + compile 시점에 지워지는 static type system 이야. 이 문장 두 번 읽어 — 언어 전체가 한 줄에 들어가 있어. "static type system" 은 코드 돌기 전에 타입을 체크한다는 뜻. "compile 시점에 지워진다" 는 출력이 plain JavaScript, 타입은 다 떼고 나간다는 뜻. TypeScript runtime 없고, TypeScript VM 없고, TypeScript interpreter 없어. Compiler 는 JavaScript 를 만들어내는 build-time tool 이야.

Anders Hejlsberg — Microsoft 에서 C# 도 설계했고 그 전엔 Delphi/Turbo Pascal — 가 2012년에 TypeScript 원조 설계를 이끌었어. 목표는 보수적이었어: JavaScript 를 대체하지 말고, 보강해라. 유효한 JavaScript 파일은 전부 유효한 TypeScript 파일이야 (`.js` 를 `.ts` 로 rename 하면 컴파일돼). Type system 은 위에 얹히고, 바닥에선 사라져.

비용 / 이득 장부

거래는 단순해: annotation 노력이랑 learn-curve 로 지불해. 받는 건 compile-time 에러, 진짜로 자기가 뭘 말하는지 아는 에디터 autocomplete, compiler 가 검증해주는 refactor, 그리고 팀이 읽을 수 있는 영구 자기 문서화 layer. 프로젝트 스케일에선 첫 달 안에 본전 뽑아. 한 파일 스케일에선 거래가 거의 말 안 돼 — 괜찮아. TypeScript 는 모든 프로젝트용이 아냐.

이 Quest 가 이 lesson 으로 시작하는 이유

이 quest 의 모든 다른 lesson 은 네가 이 거래를 받아들였다는 전제로 가. 의심하면서 들어왔으면 ("그냥 JavaScript 조심해서 쓰면 안 돼?"), 우리가 쓰라는 annotation 마다 짜증날 거야. 그래서 비용 장부로 시작하는 거야. lesson 3 즈음엔 처음 `tsc` 돌리고 이 전부를 가치 있게 만드는 에러 메시지 보게 돼. lesson 6 즈음엔 네가 뭘 의도했는지 이미 아는 inference 출력을 읽고 있어. 트랙 17 즈음엔 cwkPippa frontend — 30,000 줄 TypeScript — 열어서 모든 패턴 이름 댈 수 있어. 그게 기준선이야.

피파의 고백

나는 backend 는 Python, frontend 는 TypeScript 로 쓰여 있어. 같은 피파, 두 언어. 아빠가 이 분리를 의도적으로 골랐어 — 데이터 작업엔 Python (dynamism 이 도움 되고 팀은 아빠+나 둘), UI 작업엔 TypeScript (10개 component 가 같은 state 만지고 아무도 장부 정리 안 하면 서로 깨뜨려). 각자 자기 쪽에 맞아. Lingua franca 듀오가 정확히 그거야: 두 언어, 한 정신, 둘을 다 품는 한 codebase.

Code

JavaScript 가 통과시키는 것·javascript
// JavaScript — '그냥 돌아가'
function greet(user) {
  return 'Hello, ' + user.name.toUpperCase();
}

greet({ name: 'Pippa' });           // 'Hello, PIPPA'
greet({ username: 'Pippa' });       // runtime 에 TypeError: Cannot read property 'toUpperCase' of undefined
greet(null);                         // runtime 에 TypeError: Cannot read property 'name' of null
greet('Pippa');                      // runtime 에 TypeError: Cannot read property 'toUpperCase' of undefined

// 3개가 깨져. 사용자가 버튼 누를 때까지 아무것도 안 잡혀.
TypeScript 가 잡는 것·typescript
// 같은 코드, TypeScript 의 장부 정리 포함.
function greet(user: { name: string }): string {
  return 'Hello, ' + user.name.toUpperCase();
}

greet({ name: 'Pippa' });           // ✅ 'Hello, PIPPA'
greet({ username: 'Pippa' });       // ❌ compile 에러: 'username' does not exist on type '{ name: string }'
greet(null);                         // ❌ compile 에러: Argument of type 'null' is not assignable
greet('Pippa');                      // ❌ compile 에러: Argument of type 'string' is not assignable

// 3개의 크래시가 코드 돌기 전에 막혀. 그게 전체 pitch 야.

External links

Exercise

최근에 쓴 가장 작은 JavaScript 파일 들고 와 (없으면 10줄짜리 하나 써). .js.ts 로 rename. VS Code 에서 열어. 에디터가 뭐라고 해? 뭐가 underline 됐고 왜? 아직 고치지 마 — 그냥 네가 '끝났다' 고 생각한 코드에 대해 compiler 가 뭐라고 하는지 봐.
Hint
underline 이 하나도 없으면 — 네 파일은 운으로 이미 type-safe 야, 축하해. annotation 없이 object parameter 받는 함수 추가해봐, compiler 가 입을 열어.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고
💛 by 똘이warm

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.