반응형
배열 타입
- 배열의 모든 요소가 '동일한' 타입을 갖도록 명시
- 이를 통해 배열 내부 요소의 타입 안정성 제공
- type[]
- Array<type>
let numbers: number[] = [1, 2, 3, 4];
let strings: string[] = ['a', 'b', 'c'];
let mixed: (string | number)[] = [1, 'a', 2, 'b'];
객체 타입
- 객체의 각 속성(property)과 해당 속성의 타입을 명시적으로 정의
- 타입을 사용해 객체의 형태(shape)를 표현
객체 타입을 통해
- 객체의 형태 구조를 보장하고 예측
- 예상치 못한 값이 들어가는 것을 방지
객체의 Property 타입
- optional(옵셔널): 특정 속성이 필수가 아닌 선택적임을 표현, 속성이름 뒤에 물음표(?) 사용
- readonly(읽기전용): 객체의 속성이 수정되지 않아야 할때 사용. 속성 이름 앞에 'readonly' 키워드 추가하여 사용
타입 별칭 (Type Alias)
- type 키워드를 사용하여 타입 별칭을 생성
- 객체의 구조를 정의하고, 정의된 구조에 이름(별칭)을 부여하는 방법
let person: { name: string; age: number } = {
name: 'Yeojin',
age: 25,
};
let car: { brand: string; model?: string } = { brand: 'Hyundai' }; // model은 선택적(optional) 속성
함수 타입
- 함수의 파라미터(매개변수)와 반환값에 타입 지정
- 예상치 못한 타입의 인자가 전달 되거나 타입의 값이 반환되는 것을 방지
- 함수 시그니처로 해당 함수의 사용법을 자연스럽게 문서화
let add: (a: number, b: number) => number;
add = (x, y) => x + y;
function greet(name: string): string {
return `Hello, ${name}`;
}
다양한 함수 타입
- Parameter 타입: 함수에 전달하는 매개 변수의 테이터 타입을 지정하며, 올바른 개수가 전달되는지 또한 확인
- Optional Parameter 타입: 함수에 필수가 아닌 선택적 매개변수를 지정할 수 있음
- Contextual 타입: 함수(콜백 함수)의 맥락에 따라 자동으로 타입을 추론하는 기능
- Return 타입: 함수가 반환하는 값의 데이터 타입을 명시
Void & Never
- void 반환 타입: 함수가 명시적으로 값을 반환하지 않음을 표현
- never 반환 타입: 함수가 값을 반환하지 않음을 보다 엄격하게 표현
유니언 타입
- 여러 타입 중 하나가 될 수 있는 값을 표현
- 집합 이론의 '합집합'과 동일한 개념
- 서로 다른 타입의 값을 하나의 변수에 할당할 수 있으며 | 를 사용하여 나타냄
let value: string | number; // 값이 문자열 또는 숫자일 수 있음
value = 'Hello';
value = 42;
function printId(id: string | number): void {
if (typeof id === 'string') {
console.log(`ID is a string: ${id}`);
} else {
console.log(`ID is a number: ${id}`);
}
}
- Type Narrowind: 유니언 타입의 구체적인 하위 타입을 좁혀나가는 방식('타입 좁히기' 라고도 표현)
- 배열: 서로 다른 타입의 요소를 포함할 수 있는 배열을 정의하여 유연성을 증가
- 리터럴: 제한된 값을 가진 타입(예: 특정 문자열이나 숫자의 집합)을 표현
- Type Aliases 사용: 타입 또는 리터럴 값을 결함하여 재사용 가능한 타입을 정의
인터페이스
객체의 구조/형태를 정의, 특정 객체가 어떤 Property, Method를 가지고 있어야 하는지를 나타냄
클래스나 객체가 지켜야할 계약 같은 역할
- 어떤 구조를 가져야 하는지 O
- 어떻게 구조를 구현 하는지 X
확장 및 조합이 용이
interface User {
id: number;
name: string;
isAdmin?: boolean; // 선택적 속성
}
let admin: User = { id: 1, name: 'Alice', isAdmin: true };
// 확장을 통해 다른 인터페이스 상속
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
let pet: Dog = { name: 'Buddy', breed: 'Golden Retriever' };
튜플
- 고정된 크기의 배열
- 각 요소가 다른 타입을 가질 수 있고, 순서가 중요
- 옵션 요소나 나머지 요소도 지원
- 자바스크립트에는 존재하지 않는 개념
let tuple: [string, number];
tuple = ['hello', 42];
// 요소별 타입 확인
tuple[0].toUpperCase(); // 'HELLO'
let flexibleTuple: [number, ...string[]];
flexibleTuple = [1, 'a', 'b', 'c'];
열거형(Enum)
- 상수의 명명된 집합을 쉽게 다루기 위해 사용
- 여러 상수 값들을 그룹화 하는 것이 목적
- 자바스크립트에는 존재하지 않는 개념
enum Direction {
Up = 1,
Down,
Left,
Right,
}
let move: Direction = Direction.Up; // 1
// 문자열 열거형
enum Role {
Admin = 'ADMIN',
User = 'USER',
}
let role: Role = Role.Admin; // 'ADMIN'
요약
- 배열 타입: 동일한 타입의 데이터 목록
- 객체 타입: 특정 구조를 가진 데이터
- 함수 타입: 함수의 파라미터와 반환값 타입 명시
- 유니언 타입: 여러 타입 중 하나
- 인터페이스: 객체의 구조를 정의하고 확장 가능
- 튜플: 길이와 타입이 고정된 배열
- 열거형: 이름이 있는 상수 집합
반응형