개발하고 싶은 초심자
230221 D+2 타입스크립트의 타입들(2) 본문
1. readonly 속성 타입에 추가하기
✷ readonly : 말 그대로 요소들을 읽기 전용으로 만들 수 있는 속성.
type Profile = {
readonly name: string,
age?: number
}
const profileList = (name: string) : Profile => ({name});
const kimcoding = profileList('kimcoding');
kimcoding.name = 'kim'; // 작동하지 않음
상기 코드처럼 name이라는 요소에 readonly 속성이 붙게 되면, name을 수정할 때 TS가 막아준다.
const numbers: readonly numbers[] = [1, 2, 3, 4];
numbers.push(5); // 작동하지 않음
이처럼 number 타입의 요소들로 이루어진 배열 안에 5를 push 하는 것은 되지 않는다.
왜냐하면 push라는 것은 readonly number[] 타입에 존재하지 않기 때문이다.
const names: readonly string[] = ['kimcoding', 'parkhacker'];
names.push('leejava'); // 작동하지 않음
// filter 혹은 map은 불변성을 가지기 때문에 array를 바꾸지 않아 readonly 속성이 있더라도 사용 가능하다
names.filter()
names.map()
2. Tuple
: 정해진 개수와 순서에 따라 배열을 선언할 수 있다.
항상 정해진 개수의 요소를 가져야 하는 array를 지정할 수 있고, 순서의 맞는 타입의 값을 요구할 때 유용하다.
const profile : [string, number, boolean] = [] // 작동하지 않음
작동하지 않는 이유는, profile에는 3가지의 요소가 들어가야 하고 그 타입은 순서대로 string, number, boolean이어야 하는데 막상 배열 안에는 아무 요소도 들어가 있지 않기 때문이다.
const profile : [string, number, boolean] = ['kimcoding', 15, true];
profile[0] = 1; // 작동하지 않음
이미 0번째 요소는 string 타입으로 지정해 주었기 때문에 number 타입으로 바꾸려 하면 작동하지 않는다.
const profile : readonly[string, number, boolean] = ['kimcoding', 15, true];]
profile[0] = 'hello'; // 작동하지 않음
readonly 속성을 붙여준다면 아무것도 바꿀 수 없다.
3. any타입
let a = []; // let a: any[] // 빈 배열을 쓰게 되면 TS는 기본적으로 이것을 any의 array라고 생각한다.
: TS의 보호장치들을 비활성화 시킬 때 쓰는 타입으로, 비어있는 값을 쓰게 되면 기본값은 any라는 타입이 된다.
any는 그 어떤 타입이라도 될 수 있는 타입이다.
const array: any[] = [1, 2, 3, 4];
const b: any = true;
a + b; // 작동하는 코드
any를 마구잡이로 남발하는 것은 당연히 좋은 방식이 아니지만, 가끔은 any를 사용해야 할 때가 생긴다.
✷ undefined, null, any
any: 아무 타입
undefined: 선언X 할당X
null: 선언O 할당X
'기술개념정리(in Typescript)' 카테고리의 다른 글
230227 D+4 OOP(Object Oriented Programming/객체 지향 프로그래밍) in Typescript (0) | 2023.02.27 |
---|---|
230226 D+3 호출 시그니쳐(Call Signatures), 오버로딩(overloading), 다형성(polymorphism) (0) | 2023.02.26 |
230226 D+3 타입스크립트의 타입들(3) (0) | 2023.02.26 |
230221 D+2 타입스크립트의 타입들(1) (0) | 2023.02.21 |
232220 D+1 타입스크립트의 개념과 타입 시스템 (0) | 2023.02.20 |