[TypeScript] 타입스크립트 12개 타입

🎯 타입스크립트 12개 타입

• 타입스크립트의 기본 타입에는 크게 다음 12가지가 있다.

:를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다.

 

📝 String - 문자열

let str: string = "hi";
let sentence: string = `Hello, my name is ${ fullName }.

• 백틱으로 ${ expr }과 같은 형태로 표현식을 포함시킬 수 있다.

 

📝 Number - 숫자

let num: number = 10;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

• TypeScript의 모든 숫자는 부동 소수 값이다.
• 16진수, 10진수 리터럴에 더불어, ECMAScript 2015에 소개된 2진수, 8진수 리터럴도 지원한다.

 

📝 Boolean - true/false

let isLoggedIn: boolean = false;

 

📝 Array - 배열

// 방법 1
let list: number[] = [1,2,3,4];

// 방법2 - 제네릭 배열 타입 사용
let list: Array<number> = [1,2,3];

 

📝 Tuple - 튜플

let arr: [string, number] = ['hi', 10];

// 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 성공
// 잘못된 초기화
x = [10, "hello"]; // 오류

• 튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미
• 요소의 타입과 개수가 고정된 배열을 표현 가능
• 요소의 타입이 모두 같을 필요는 없음

 

📝 Enum- 열거

• Enum은 특정 값(상수)들의 집합을 의미한다.
• 코드가 단순해지며, 가독성이 좋다.
• 코드가 단순해지며, 가독성이 좋다.

enum Color {Red, Green, Blue}

let c: Color = Color.Green;

• enum은 기본적으로 0부터 시작하여 멤버들의 번호를 매긴다.

 

enum Color {Red = 1, Green, Blue}

let c: Color = Color.Green;

• 멤버 중 하나의 값을 수동으로 설정하여 번호를 바꿀 수 있습니다.
• 이렇게 하면 0 대신 1부터 번호가 매겨진다.

 

enum Color {Red, Green, Blue}
let c: Color = Color[0]

• 인덱스 번호로도 접근할 수 있다.

 

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

• 모든 값을 수동으로 설정할 수 있다.

 

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName); // 값이 2인 'Green'이 출력

• 매겨진 값을 사용해 enum 멤버의 이름을 알아낼 수 있다.

 

📝 Any

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

• 단어 의미 그대로 모든 타입에 대해서 허용한다는 의미를 갖고 있다.
• any는 최대한 자제할 것
• 타입스크립트는 애니스크립트가 아니다!
• 컴파일 중 타입 검사를 하지 않음

 

📝 void

let unuseful: void = undefined;

function notuse(): void {
  console.log('sth');
}

• void는 어떤 타입도 존재할 수 없음을 나타내기 때문에, any의 반대 타입이다.
• void는 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 사용한다.
• void 타입 변수 선언은 유용하지 않다. → 그 변수에 null 또는 undefined만 할당하기 때문에

 

📝 Never

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
    throw new Error(message);
}

// 반환 타입이 never로 추론된다.
function fail() {
    return error("Something failed");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
// break를 사용하면 error 발생
function infiniteLoop(): never {
    while (true) {
    }
}

• 절대 발생할 수 없는 타입을 나타냄
• 종료되지 않는 함수
• 함수의 끝에 절대 도달하지 않는다는 의미
• never는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰인다.
• 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 될 수 있다.

 

📝 Null and Undefined

// 이 밖에 이 변수들에 할당할 수 있는 값이 없습니다!
let u: undefined = undefined;
let n: null = null;

• 이름 그대로 사용
• Null : 아무것도 없다.
• Undefined : 아직 정의되어 있지 않다.
• void처럼 그 자체로 유용한 경우는 거의 없다.

 

📝 Object - 객체

declare function create(o: object | null): void;

create({ prop: 0 }); // 성공
create(null); // 성공

create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류

• object는 원시 타입이 아닌 타입을 나타낸다.
• number, string, boolean, bigint, symbol, null, 또는 undefined 가 아닌 나머지를 의미

 

📌 참고

• 타입스크립트 핸드북
• TypeScript 한글 문서