|
| 1 | +//// { order: 3, compiler: { strictNullChecks: true } } |
| 2 | + |
| 3 | +// JavaScript 파일 내부의 코드 흐름은 |
| 4 | +// 프로그램 전반에 걸쳐 어떻게 타입에 영향을 미칠 수 있는가. |
| 5 | + |
| 6 | +const users = [{ name: "Ahmed" }, { name: "Gemma" }, { name: "Jon" }]; |
| 7 | + |
| 8 | +// "jon"이라는 사용자를 찾을 수 있는지 살펴볼 것입니다. |
| 9 | +const jon = users.find((u) => u.name === "jon"); |
| 10 | + |
| 11 | +// 위의 경우에, 'find'는 실패할 것입니다. |
| 12 | +// 이런 경우에 우리는 오브젝트를 가지고 있지 않습니다. 이것은 타입을 생성합니다: |
| 13 | +// |
| 14 | +// { name: string } | undefined |
| 15 | +// |
| 16 | +// 아래에 있는 3개의 'jon'에 마우스를 올려보면, |
| 17 | +// 단어가 어디에 있는지에 따라서 타입이 어떻게 변하는지 볼 수 있을 것입니다: |
| 18 | + |
| 19 | +if (jon) { |
| 20 | + jon; |
| 21 | +} else { |
| 22 | + jon; |
| 23 | +} |
| 24 | + |
| 25 | +// '{ name: string } | undefined' 타입은 |
| 26 | +// 유니온 타입이라고 불리는 TypeScript 기능을 사용합니다. |
| 27 | +// 유니온 타입은 오브젝트가 많은 것 중의 하나가 될 수 있도록 선언하는 방법입니다. |
| 28 | +// |
| 29 | +// 파이프는 서로 다른 타입 사이에서 구분자로서 동작합니다. |
| 30 | +// JavaScript의 동적인 특성은 |
| 31 | +// 많은 함수가 연관되지 않은 타입의 오브젝트를 받고 반환하는 것을 의미하고, |
| 32 | +// 우리가 어느 것을 다룰지 표현할 수 있어야 합니다. |
| 33 | + |
| 34 | +// 이것을 몇 가지 방법으로 사용할 수 있습니다. |
| 35 | +// 다른 타입의 값이 있는 배열을 살펴보며 시작해봅시다. |
| 36 | + |
| 37 | +const identifiers = ["Hello", "World", 24, 19]; |
| 38 | + |
| 39 | +// 첫 번째 요소의 타입에 대하여 검사하기 위해 |
| 40 | +// JavaScript 'typeof x === y' 문법을 사용할 수 있습니다. |
| 41 | +// 서로 다른 위치 사이에서 어떻게 변하는지 |
| 42 | +// 아래의 'randomIdentifier'에 호버하여 확인해볼 수 있습니다 |
| 43 | + |
| 44 | +const randomIdentifier = identifiers[0]; |
| 45 | +if (typeof randomIdentifier === "number") { |
| 46 | + randomIdentifier; |
| 47 | +} else { |
| 48 | + randomIdentifier; |
| 49 | +} |
| 50 | + |
| 51 | +// 제어 흐름 분석은 우리가 바닐라 JavaScript를 작성할 수 있으며, |
| 52 | +// TypeScript가 서로 다른 위치에 있는 코드 타입이 |
| 53 | +// 어떻게 변화하는지를 이해하려 한다는 것을 의미합니다. |
| 54 | + |
| 55 | +// 제어 흐름 분석에 대해 더 배워보기: |
| 56 | +// - example:type-guards |
| 57 | + |
| 58 | +// 예시를 통해 계속 읽고 싶다면 |
| 59 | +// 몇 개의 다른 장소로 넘어가기: |
| 60 | +// |
| 61 | +// - 모던 JavaScript: example:immutability |
| 62 | +// - 타입 가드: example:type-guards |
| 63 | +// - JavaScript 예시가 포함된 함수형 프로그래밍:function-chaining |
0 commit comments