[TS] 배열과 튜플

배열

let arrayOfnumber: number[];
//배열에 대한 타입 애너테이션은 배열요소타입 다음에 []가 온다

 

✔️ noUncheckedIndexedAccess

** 주의**

타입 스크립트는 모든 배열 멤버에 대한 접근이 해당 배열의 멤버를 반환한다고 가정한다.

검색된 배열의 멤버가 존재하는지 의도적으로 확인되지 않는다. 

const oneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(oneToTen[400].toFixed(2));

 

위 코드에서 oneToTen[400]은 undefined가 아니라 number타입의 값으로 간주된다. 

-> 그렇기에 코드를 실행하면 런타임 에러가 발생한다. 

 

이때 사용하는 것이 noUncheckedIndexAccess 이다.

-> 이 옵션을 tsconfig에서 true로 설정하면 인덱스 시그니처에 'undefined'를 포함시킨다.

(해당 index가 undefined 일 수 있음을 체크한다)

❓ 인덱스시그니처

인터페이스의 객체가 임의의 키를 받고, 해당 키 아래의 특정 타입을 반환할 수 있음을 나타낸다.
interface SomeInterface {   [key: string]: number }

+키의 타입은 'string', 'number', 'symbol' 또는 템플릿 리터럴 형식이어야 합니다

 

 

✔️ 스프레드

타입이 다른 두 배열을 결합하여 새배열을 생성하면???

-> 새 배열은 두 개의 원래 타입 중 어느 하나의 요소인 유니언 타입 배열로 이해된다.

type A = {       
   name: string, 
   age: number,  
};    

type B = {       
   name: string, 
   addr: string,  
};

const onlyA: A[] = [
   {name: 'lim', age: 10},
   {name: 'hong', age: 20},
];
const onlyB: B[] = [
   {name: 'jang', addr: 'Seoul'},
   {name: 'park', addr: 'Busan'},
];
const aOrB = [...onlyA, ...onlyB];
 // (A|B)[]

 

❕❕concat 을 사용하여 배열을 합칠때는 두 배열의 타입이 같아야한다!

튜플

고정된 크기 배열이다. 각 인덱스에 알려진 특정 타입을 갖는다. 

배열의 모든 가능한 멤버를 갖는 유니언타입보다 더 구체적이다.

튜플타입을 선언하는 구문은 리터럴처럼 보이지만 요소의 값 대신 타입을 적는다.

 

const lim = ['Lim', 26];

let limTup: [string, number] = lim;

//Error! Type '(string | number)[]' is not assignable to type '[string, number]'.

const a: [number, string, boolean]    
   = [1, 'lim', false];
let b: [number, string] = a;

//Error!! Type '[number, string, boolean]' is not assignable to type '[number, string]'. 
//Source has 3 element(s) but target allows only 2.

 

✔️ 튜플추론

• 배열이 초기값으로 사용되는 경우
• 배열이 함수에 대한 반환값으로 사용되는 경우

=> 타입스크립트는 생성된 배열을 튜플이 아닌 가변 길이의 배열로 취급한다.

 

어떻게 해야 구체적인 튜플 타입임을 나타낼 수 있을까??

 

1. 명시적 (explicit) 튜플타입 : 타입고정 => [string, number]
2. const assertion => as const 
   readonly로 바뀌면서, 값자체가 타입이 된다!!