|
| 1 | +// TypeScript는 구조적 타입 시스템입니다. |
| 2 | +// 구조적 타입 시스템은 타입을 비교할 때, |
| 3 | +// TypeScript는 타입의 멤버만 고려한다는 것을 의미합니다. |
| 4 | + |
| 5 | +// 두 가지 타입을 만들 수 있지만, |
| 6 | +// 서로 할당할 수 없는 명목적 타입 시스템과는 대조적입니다. |
| 7 | +// example:nominal-typing 를 참고하세요. |
| 8 | + |
| 9 | +// 예를 들어, 구조적 타입 시스템에서 |
| 10 | +// 이러한 두 가지 인터페이스는 서로 양도할 수 있습니다. |
| 11 | + |
| 12 | +interface Ball { |
| 13 | + diameter: number; |
| 14 | +} |
| 15 | +interface Sphere { |
| 16 | + diameter: number; |
| 17 | +} |
| 18 | + |
| 19 | +let ball: Ball = { diameter: 10 }; |
| 20 | +let sphere: Sphere = { diameter: 20 }; |
| 21 | + |
| 22 | +sphere = ball; |
| 23 | +ball = sphere; |
| 24 | + |
| 25 | +// Ball과 Sphere의 모든 멤버를 |
| 26 | +// 구조적으로 포함하는 타입을 추가하면, |
| 27 | +// ball이나 sphere가 되도록 설정할 수도 있습니다. |
| 28 | + |
| 29 | +interface Tube { |
| 30 | + diameter: number; |
| 31 | + length: number; |
| 32 | +} |
| 33 | + |
| 34 | +let tube: Tube = { diameter: 12, length: 3 }; |
| 35 | + |
| 36 | +tube = ball; |
| 37 | +ball = tube; |
| 38 | + |
| 39 | +// ball은 length를 갖고 있지 않아서, tube 변수에 할당할 수 없습니다. |
| 40 | +// 하지만, Ball의 모든 멤버는 |
| 41 | +// tube 내부에 속하니 할당할 수 있습니다. |
| 42 | + |
| 43 | +// TypeScript는 타입의 각 멤버를 |
| 44 | +// 서로 비교하여 동등한지 확인합니다. |
| 45 | + |
| 46 | +// 함수는 JavaScript에서 객체이며 |
| 47 | +// 비슷한 방식으로 비교합니다. |
| 48 | +// 매개변수에 유용한 추가 트릭이 하나 있습니다: |
| 49 | + |
| 50 | +let createBall = (diameter: number) => ({ diameter }); |
| 51 | +let createSphere = (diameter: number, useInches: boolean) => { |
| 52 | + return { diameter: useInches ? diameter * 0.39 : diameter }; |
| 53 | +}; |
| 54 | + |
| 55 | +createSphere = createBall; |
| 56 | +createBall = createSphere; |
| 57 | + |
| 58 | +// TypeScript는 매개변수의 (숫자)는 (숫자, 불린)과 같다고 하지만, |
| 59 | +// (숫자, 불린)은 (숫자)와 같다고 하지 않습니다 |
| 60 | + |
| 61 | +// JavaScript 코드가 필요 없어 졌을 때 |
| 62 | +// 매개변수 전달을 생략하는 게 아주 흔한 일이라서 |
| 63 | +// TypeScript는 첫 번째 할당에 있는 불린을 버립니다. |
| 64 | + |
| 65 | +// 예를 들어 배열의 forEach의 콜백은 세 가지 매개변수를 갖고 있는데 |
| 66 | +// 값, 인덱스, 전체 배열입니다. |
| 67 | +// TypeScript가 매개변수 버리기를 제공하지 않았다면, |
| 68 | +// 함수와 일치시키기 위해 모든 선택 사항을 포함했어야 합니다: |
| 69 | + |
| 70 | +[createBall(1), createBall(2)].forEach((ball, _index, _balls) => { |
| 71 | + console.log(ball); |
| 72 | +}); |
| 73 | + |
| 74 | +// 아무도 필요로 하지 않습니다. |
| 75 | + |
| 76 | +// 반환 타입은 객체처럼 간주하고, |
| 77 | +// 일부 차이점은 위의 같은 객체 비교 규칙으로 비교합니다. |
| 78 | + |
| 79 | +let createRedBall = (diameter: number) => ({ diameter, color: "red" }); |
| 80 | + |
| 81 | +createBall = createRedBall; |
| 82 | +createRedBall = createBall; |
| 83 | + |
| 84 | +// 첫 번째 할당은 동작하지만 (둘 다 diameter가 있음), |
| 85 | +// 두 번째는 동작하지 않습니다. (ball은 color가 없음) |
0 commit comments