타입스크립트에서 String타입은 문자열을 나타내는 데이터 타입이다. 쉽게 말해, 글자나 단어, 문장과 같은 텍스트 데이터를 저장할 때 사용.
let name: string = "Alice";
let message: string = "Hello, world!";
🚀 타입 -Number
타입스크립트에서 Number타입은 모든 숫자(정수, 소수 포함)를 표현. 주로 나이, 금액 등 숫자 데이터를 저장할 때 사용 아래와 같이 다양한 리터럴 표현을 통해 타입스크립트에서 여러 진수의 숫자 리터럴을 사용할 수 있다.
let age: number = 30;
let price: number = 99.99;
let decimal: number = 42; // 10진수
// 0x를 앞에 붙여 사용
let hex: number = 0x2a; // 16진수 (42)
// 0b를 앞에 붙여 사용
let binary: number = 0b101010; // 2진수 (42)
// 0o를 앞에 붙여 사용
let octal: number = 0o52; // 8진수 (42)
🚀 타입 -Boolean
타입스크립트에서 Boolean타입은 참(true) 또는 거짓(false)을 나타내는 가장 기본적인 논리 타입. 주로 조건을 표현하거나, 어떤 상태를 참/거짓으로 나타낼 때 사용된다.
let isLoggedIn: boolean = true;
let isAdmin: boolean = false;
🚀 타입 -Object
자바스크립트에서 Object는 객체 뿐만 아니라 배열, 함수 까지 포함하게 된다.
타입스크립트에서도 마찬가지라고 기본적으로 typeof 연산가자 "object"로 반한하는 모든 타입을 뜻한다.
위 예시에서 person은 객체, numbers는 배열, greet은 함수이다. typeof 연산자로 각 타입을 확인해 보면, 객체와 배열은 "object"로 반환되고, 함수는 "function"으로 반환된다.
🚀 타입 -Array
배열 타입은 두 가지 방법으로 작성할 수 있다. 첫 번째 방법은 요소 타입 뒤에 []를 추가하는 것이고, 두 번째 방법은 Array<요소타입>형식을 사용하는 것
// 첫 번째 방법: 요소 타입 뒤에 []를 추가
let numbers: number[] = [1, 2, 3];
let names: string[] = ["Alice", "Bob", "Charlie"];
let selects: (number | string)[] = [102, 'apple'];
// 두 번째 방법: Array<요소타입> 형식 사용
let numbers2: Array<number> = [1, 2, 3];
let names2: Array<string> = ["Alice", "Bob", "Charlie"];
🚀 타입 -Tuple
타입스크립트의 Tuple(튜플) 타입은 고정된 개수와 순서를 가지며, 각 요소가 서로 다른 타입을 가질 수 있는 배열입니다. 주로 여러 가지 관련 데이터를 묶어서 표현할 때 사용된다.
let user: [string, number] = ["Alice", 30];
이 처럼 항상 정해진 갯수의 요소를 가져와야 하는 배열을 지정해서 응용도 할 수 있습니다.
let x: [number, string]; // 튜플 타입으로 선언
x = [10, "hello"]; // 성공: 첫 번째 요소는 숫자, 두 번째 요소는 문자열
x = [10, "hello", 99]; // 오류: 요소의 개수가 맞지 않음
x = ["hello", 10]; // 오류: 순서가 잘못됨 (첫 번째 요소는 숫자여야 함)
Enum(열거형) 타입은 명명된 상수 집합을 정의할 때 사용. 이를 통해 숫자나 문자열에 의미 있는 이름을 부여하고 코드의 가독성을 높일 수 있다. Enum은 특정 값에 의미를 부여하여, 코드 내에서 값을 쉽게 관리하고 추적할 수 있게 도와준다.
enum Direction {
Up = 1,
Down,
Left,
Right
}
let move: Direction = Direction.Up;
console.log(move); // 1
enum Status {
Active = "ACTIVE",
Inactive = "INACTIVE",
Pending = "PENDING"
}
let userStatus: Status = Status.Active;
console.log(userStatus); // "ACTIVE"
🚀 타입 -Any
any 타입은 타입스크립트에서 가장 유연한 타입으로, 어떤 타입의 값도 할당할 수 있게 해준다. 이 타입을 사용하면 타입 검사를 피할 수 있기 때문에, 타입스크립트의 엄격한 타입 시스템을 잠시 해제하고, 자바스크립트처럼 자유롭게 값을 다룰 수 있게 해준다.
특징
어떤 타입도 할당할 수 있다
타입 검사가 이루어지지 않기 때문에 타입 안정성을 일부 포기!
any를 사용하면 타입스크립트의 장점인 정적 타입 검사의 이점을 잃게 됨.
그럼 언제사용할까?
타입을 모르거나, 값의 타입이 다를 수 있을 때 유용
타입을 점진적으로 적용하거나, 타입스크립트로 마이그레이션 중 일시적으로 사용하는 경우가 많다
let value: any = 10; // 숫자
value = "Hello"; // 문자열
value = true; // 불리언
value = [1, 2, 3]; // 배열
value = { key: "value" }; // 객체
🚀 타입 -Void
void 타입은값이 없는 상태를 나타내며, 주로 반환값이 없는 함수에 사용된다. 이 타입은 "아무 값도 반환하지 않음" 을 의미하며, 값을 반환하지 않는 함수의 반환 타입으로 지정할 때 유용.
특징
함수의 반환 타입이 void 인경우, 그 함수는 반환값이 없어야 한다.
일반 변수에 거의 사용되지 않고, 반환이 없는 함수에서만 주로 사용
function logMessage(message: string): void {
console.log(message);
// 반환값이 없으므로 void 타입
}
🚀타입 -Unknown
unknown 타입은 "알 수 없는 값" 을 나타내는 타입으로, 값의 타입이 미리 확정되지 않았거나, 동적으로 바뀔 수 있을 때 사용된다. any 타입과 비슷하지만, 타입 검사를 반드시 해야 사용할 수 있는 특징이 있다. 이 때문에 보다 안전한 타입으로 간주된다.
특징
어떤 값이든 할당 가능: 숫자, 문자열, 객체 등 모든 타입의 값을 받을 수 있다.
타입 검사 후 사용: 사용하기 전에 타입 검사를 거쳐야만 안전하게 접근 할 수 있다. 이를 통해 잘못된 타입 사용으로 인한 오류 방지
let input: unknown;
input = "hello"; // 문자열 할당 가능
input = 42; // 숫자 할당 가능
// 타입 검사를 해야 안전하게 사용 가능
if (typeof input === "string") {
console.log(input.toUpperCase()); // 타입이 문자열임이 확인되었으므로 안전
}
🚀 타입 -Null / Undefined
자바스크립트에서도 undefined가 하나의 자료형이자 값이었던 것 처럼, 타입스크립트에서도 null과 undefined 타입이 있다. null과 undefined는 값이 없음을 나타내는 타입이지만, 각각 다른 의미를 가짐!! 이 둘은 자바스크립트와 타입스크립트에서 빈 값 또는 비어 있는 상태를 표현할 때 사용.
null
의미: 값 없음을 명시적으로 지정 할때 사용
용도: 변수가 비어 있다는 것을 나타 내고자 할때 사용
let user: string | null = null; // user에 값이 없음을 명시적으로 표현
undefined
의미: 변수에 값이 할당되지 않은 상태를 나타낸다. 변수가 초기화 되지 않았을 때 undefined 값을 가진다.
용도: 변수가 정의되지 않은 상태이거나, 함수가 명시적인 반환 값 없이 종료될 때 사용
let age: number;
console.log(age); // undefined, 초기화되지 않음
위 두개 차이점은 의도된 비어 있음 vs 정의 되지 않음 에 있다.!
🚀 타입 -Never
never 타입은 절대 발생하지 않는 값을 나타내는 타입. 이 타입은 값을 반환하지 않고 끝까지 실행될 수 없는 함수에서 주로 사용한다. 예를 들어 에러를 던지거나 무한 루프에 빠져 종료되지 않는 함수 같은 경우에 never 타입을 사용.
never 타입을 지정하면 절대 실행이 끝나지 않는다는 걸 명확하게 표현할 수 있어서, 코드의 안정성과 타입 안전성을 높이는 데 도움이 된다.
// 오류를 던지는 함수
function throwError(message: string): never {
throw new Error(message); // 실행이 끝나지 않음
}
// 무한 루프 함수
function infiniteLoop(): never {
while (true) {
// 계속 실행, 절대 끝나지 않음
}
}
// 모든 케이스 처리에 활용
function checkType(value: string | number): string {
if (typeof value === "string") {
return "문자열";
} else if (typeof value === "number") {
return "숫자";
} else {
const neverValue: never = value; // 모든 케이스를 처리했으므로 이 코드는 절대 실행되지 않음
return neverValue; // 오류 방지용 타입 안전성을 위한 코드
}
}
마무으리
기본 타입 정리를 드디어 끝냈습니다! 타입스크립트의 핵심이 되는 타입들을 하나씩 살펴보니 뭔가 구조가 눈에 들어오는 것 같네요. 다음 포스트에서는 추가적인 타입들에 대해 좀 더 깊이 파고들어 볼 예정입니다. 더 복잡한 타입들로 가보자!
