|
| 1 | +// 일반적으로 배열은 0부터 여러 개의 |
| 2 | +// 단일 타입 객체를 포함할 수 있습니다. |
| 3 | +// TypeScript는 다양한 타입을 포함하고, |
| 4 | +// 색인 되는 순서가 중요한 배열을 특별하게 분석할 수 있습니다. |
| 5 | + |
| 6 | +// 이를 튜플이라고 부릅니다. 튜플을 일부 데이터에 연결하기 위한 |
| 7 | +// 방법으로 생각할 수 있지만, 키로 구성되는 객체보다 구문을 덜 가집니다. |
| 8 | + |
| 9 | +// JavaScript의 배열 구문을 사용하여 튜플을 생성할 수 있습니다: |
| 10 | + |
| 11 | +const failingResponse = ["Not Found", 404]; |
| 12 | + |
| 13 | +// 또한 튜플에 타입 선언이 필요할 수 있습니다. |
| 14 | + |
| 15 | +const passingResponse: [string, number] = ["{}", 200]; |
| 16 | + |
| 17 | +// 두 변수 이름에 호버해보면 |
| 18 | +// 배열 ( (string | number)[] )과 튜플 ( [string, number] )의 |
| 19 | +// 차이점을 볼 수 있습니다. |
| 20 | + |
| 21 | +// 배열의 순서가 중요하지 않을 때, |
| 22 | +// 모든 인덱스에 있는 요소는 문자열 또는 숫자가 될 수 있습니다. |
| 23 | +// 하지만 튜플에서는 순서와 길이가 보장됩니다. |
| 24 | + |
| 25 | +if (passingResponse[1] === 200) { |
| 26 | + const localInfo = JSON.parse(passingResponse[0]); |
| 27 | + console.log(localInfo); |
| 28 | +} |
| 29 | + |
| 30 | +// 이는 TypeScript가 올바른 인덱스에 올바른 타입을 제공하고, |
| 31 | +// 선언되지 않은 인덱스에 있는 객체에 접근하면 |
| 32 | +// 에러가 발생한다는 것을 의미합니다. |
| 33 | + |
| 34 | +passingResponse[2]; |
| 35 | + |
| 36 | +// 튜플은 적은 양의 연결된 데이터 |
| 37 | +// 또는 고정된 데이터 타입을 위한 좋은 패턴처럼 느껴질 수 있습니다. |
| 38 | + |
| 39 | +type StaffAccount = [number, string, string, string?]; |
| 40 | + |
| 41 | +const staff: StaffAccount[] = [ |
| 42 | + [0, "Adankwo", "adankwo.e@"], |
| 43 | + [1, "Kanokwan", "kanokwan.s@"], |
| 44 | + [2, "Aneurin", "aneurin.s@", "Supervisor"], |
| 45 | +]; |
| 46 | + |
| 47 | +// 튜플에서 시작 타입은 알지만, |
| 48 | +// 길이에 대해 알 수 없을 때 |
| 49 | +// 전개 연산자를 사용해 길이에 상관없이 |
| 50 | +// 나머지를 특정한 타입으로 나타낼 수 있습니다: |
| 51 | + |
| 52 | +type PayStubs = [StaffAccount, ...number[]]; |
| 53 | + |
| 54 | +const payStubs: PayStubs[] = [ |
| 55 | + [staff[0], 250], |
| 56 | + [staff[1], 250, 260], |
| 57 | + [staff[0], 300, 300, 300], |
| 58 | +]; |
| 59 | + |
| 60 | +const monthOnePayments = payStubs[0][1] + payStubs[1][1] + payStubs[2][1]; |
| 61 | +const monthTwoPayments = payStubs[1][2] + payStubs[2][2]; |
| 62 | +const monthThreePayments = payStubs[2][2]; |
| 63 | + |
| 64 | +// 튜플을 사용하면 개수를 알 수 없는 |
| 65 | +// 매개변수 타입을 선언할 수 있습니다: |
| 66 | + |
| 67 | +declare function calculatePayForEmployee(id: number, ...args: [...number[]]): number; |
| 68 | + |
| 69 | +calculatePayForEmployee(staff[0][0], payStubs[0][1]); |
| 70 | +calculatePayForEmployee(staff[1][0], payStubs[1][1], payStubs[1][2]); |
| 71 | + |
| 72 | +// |
| 73 | +// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#tuples-in-rest-parameters-and-spread-expressions |
| 74 | +// https://auth0.com/blog/typescript-3-exploring-tuples-the-unknown-type/ |
0 commit comments