diff --git "a/apps/frontend/tech/docs/\354\235\264\355\216\231\355\213\260\353\270\214\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270/\354\235\264\355\216\231\355\213\260\355\212\270-\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270-\353\223\244\354\226\264\352\260\200\353\251\260.md" "b/apps/frontend/tech/docs/\354\235\264\355\216\231\355\213\260\353\270\214\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270/\354\235\264\355\216\231\355\213\260\355\212\270-\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270-\353\223\244\354\226\264\352\260\200\353\251\260.md" index c7ab94e8..29191342 100644 --- "a/apps/frontend/tech/docs/\354\235\264\355\216\231\355\213\260\353\270\214\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270/\354\235\264\355\216\231\355\213\260\355\212\270-\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270-\353\223\244\354\226\264\352\260\200\353\251\260.md" +++ "b/apps/frontend/tech/docs/\354\235\264\355\216\231\355\213\260\353\270\214\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270/\354\235\264\355\216\231\355\213\260\355\212\270-\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270-\353\223\244\354\226\264\352\260\200\353\251\260.md" @@ -8,12 +8,6 @@ tags: [typescript] [인트로] 이펙티브 타입스크립트를 읽으며 -:::warning - -작성 중 - -::: - > 독서 기간: 2025-02-25 ~ 03.30 diff --git "a/apps/frontend/tech/docs/\354\235\264\355\216\231\355\213\260\353\270\214\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270/\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270-\354\225\214\354\225\204\353\263\264\352\270\260.mdx" "b/apps/frontend/tech/docs/\354\235\264\355\216\231\355\213\260\353\270\214\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270/\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270-\354\225\214\354\225\204\353\263\264\352\270\260.mdx" index 4277e2cf..3805f617 100644 --- "a/apps/frontend/tech/docs/\354\235\264\355\216\231\355\213\260\353\270\214\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270/\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270-\354\225\214\354\225\204\353\263\264\352\270\260.mdx" +++ "b/apps/frontend/tech/docs/\354\235\264\355\216\231\355\213\260\353\270\214\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270/\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270-\354\225\214\354\225\204\353\263\264\352\270\260.mdx" @@ -9,12 +9,6 @@ date: 2025-02-25 1장 타입스크립트 알아보기 -:::warning - -작성 중 - -::: - ## 아이템 1: 타입스크립트와 자바스크립트의 관계 이해하기 @@ -81,21 +75,88 @@ const x: number = null; ## 아이템 3: 코드 생성과 타입이 관계없음을 이해하기 -> 작성일: 2025- +> 작성일: 2025-04-23 타입스크립트 컴파일러의 역할 - 최신 타입스크립트/자바스크립트를 브라우저에서 동작할 수 있도록 구버전 자바스크립트로 트랜스파일([Transpile](https://en.wikipedia.org/wiki/Source-to-source_compiler)). - 코드의 타입 오류를 체크. +- 타입스크립트 타입은 **런타임**에 사용할 수 없다. ## 아이템 4: 구조적 타이핑에 익숙해지기 -> 작성일: 2025- +> 작성일: 2025-04-23 + +- 자바스크립트는 본질적으로 **덕 타이핑(duck typing)**기반이다. 만약 어떤 함수의 매개변수 값이 모두 제대로 주어진다면, 그 값이 어떻게 만들어졌는지 신경 쓰지 않고 사용. + + +```typescript +interface Vector2D { + x: number; + y: number; +} + +interface NamedVector2D { + name: string; + x: number; + y: number; +} + +function calculateLength(v: Vector2D) { + return Math.sqrt(v.x * v.x + v.y * v.y); +} + +const v: NamedVector2D = {x: 3, y: 4, name: "Zee"}; +calculateLength(v); // 정상, 결과 5 +``` + +NamedVector2D가 Vector2D와 호환되기 때문에 calculateLength 호출이 가능. + +```typescript +interface Vector3D { + x: number; + y: number; + z: number; +} + +function norm(v: Vector3D) { + const length = calculateLength(v); + return { + x: v.x / length, + y: v.y / length, + z: v.z / length, + } +} + +norm({ + x: 3, + y: 4, + z: 5 +}); // { x: 0.6, y: 0.8, z: 1} +``` + +타입스크립트는 오류를 잡아내지 못합니다. Vector3D는 Vector2D와 호환되기 때문에 calculateLength함수에서 문제를 잡아내지 못합니다. +타입스크립 타입 시스템은 타입 확장에 열린(open) 타입입니다. Vector2D와 Vector3D의 예시에서는 Vector3D는 Vector2D의 확장으로 열린 타입에 의하여 호환이 됩니다. + ## 아이템 5: any 타입 지양하기 -> 작성일: 2025- +> 작성일: 2025-04-23 + +### any는 함수 시그니처를 무시합니다. + +```typescript + +function calcAge(date: Date): number { + // ... +} + +let birthDate: any = '1999-03-09'; +calcAge(birthDate); // 정상 +``` + +### any 타입은 IDE의 자동완성 기능에 적용되지 않습니다. --- -> 최종 수정일: 2025-02-25T23:55 +> 최종 수정일: 2025-04-23 \ No newline at end of file diff --git "a/apps/frontend/tech/docs/\354\235\264\355\216\231\355\213\260\353\270\214\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270/\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270\354\235\230-\355\203\200\354\236\205\354\213\234\354\212\244\355\205\234.mdx" "b/apps/frontend/tech/docs/\354\235\264\355\216\231\355\213\260\353\270\214\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270/\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270\354\235\230-\355\203\200\354\236\205\354\213\234\354\212\244\355\205\234.mdx" new file mode 100644 index 00000000..3067eb41 --- /dev/null +++ "b/apps/frontend/tech/docs/\354\235\264\355\216\231\355\213\260\353\270\214\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270/\355\203\200\354\236\205\354\212\244\355\201\254\353\246\275\355\212\270\354\235\230-\355\203\200\354\236\205\354\213\234\354\212\244\355\205\234.mdx" @@ -0,0 +1,24 @@ +--- +sidebar_position: 3 +slug: 이펙티브-타입스크립트-타입스크립트의-타입시스템 +title: '[2 장] 타입스크립트의 타입 시스템' +authors: [99mini] +tags: [typescript] +date: 2025-04-23 +--- + +2 장 타입스크립트의 타입 시스템 + + + +## 아이템 6: 편집기를 사용하여 타입 시스템 탐색하기 + +편집기를 이용하여 'Go to Definition' 옵션을 이용하면 타입이 선언된 파일(*.d.ts)로 이동할 수 있다. + +> 작성일: 2025-04-23 + +## 아이템 7: 타입이 값들의 집합이라고 생각하기 + +--- + +> 최종 수정일: 2025-04-23 \ No newline at end of file