본문 바로가기
Typescript

기본 타입

by NANDEV 2022. 12. 27.

타입스크립트는 자바스크립트와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 사용해 더 편리하게 프로그래밍할 수 있다.

 

불리언

true와 false 값이다.

let isDone: boolean = false;

 

숫자

자바스크립트와 마찬가지로 타입스크립트의 모든 숫자는 부동 소수 값이다.

let decimal: number = 6;
let hex: number = 0xf00d;

 

문자열

자바스크립트와 마찬가지로 '', "", ``를 사용한다.

let color: string = 'blue';
color = 'red';

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.

 

배열

배열 타입은 배열 요소들을 나타내는 타입 뒤에 []를 쓰는 것과, 제네릭 배열 타입을 쓰는 것 두가지 방법이 가능하다.

// 첫번째 방법
let list: number[] = [1, 2, 3];

// 두번째 방법
let list: Array<number> = [1, 2, 3];

 

튜플

튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

let x: [string, number];

x = ['hello', 10];

// 오류
x = [10, 'hello'];

console.log(x[0].substring(1));

// number에는 substring이 없으므로 오류
console.log(x[0].substring(1));


프로퍼티 3이 없으므로 오류
x[3] = 'world';

 

열거

enum은 값의 집합에 더 나은 이름을 붙여줄 수 있다.

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

 

기본적으로 enum은 0부터 시작해서 값의 인덱스를 매기지만 수동으로 설정해서 인덱스를 바꿀 수 있다.

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

// 또는
enum Color {Red = 1, Green = 2, Blue = 4}

 

enum의 유용한 기능 중 하나는 매겨진 인덱스를 통해 값의 이름을 알아낼 수 있다는 것이다.

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

console.log(colorName); // Green

 

Any

모든 타입을 허용할 때 사용하며, 값의 타입을 일부만 알고 있을 때 유용하다.

let notSure: any = 4;
notSure = 'maybe';
notSure = false;

let list: any[] = [1, true, 'free'];
list[1] = 100;

 

Void

어떤 타입도 존재할 수 없음을 나타낼 때 사용하며, 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 사용한다.

function warnUser(): void {
	console.log('This is my warning message');
}

 

void 타입을 변수에 선언하면 해당 변수에는 null(--strictNullChecks를 사용하지 않을 때만)과 undefined만 할당할 수 있기 때문에 좋지 않다.

let unusable: void = undefined;
unusable = null;

 

Null and Undefined

타입스크립트에서 null과 undefined는 타입으로 사용된다.

let u: undefined = undefined;
let n: null = null;

 

기본적으로 null과 undefined는 다른 모든 타입의 하위 타입이다. 때문에,  number와 같은 타입에 할당할 수 있다.

하지만 --strictNullChecks를 사용하면 null과 undefined는 any와 각각 자신들 타입에만 할당 가능하다. (undefined는 void에 할당이 가능하다.)

 

Never

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

 

never 타입은 모든 타입에 할당 가능한 하위 타입이다. 하지만 어떤 타입도 never의 하위 타입이 아니기 때문에 never에 할당할 수 없다.

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

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

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

 

Object

obejct는 원시 타입이 아닌 타입을 나타낸다. 예를 들어 number, string, boolean, bigint, symbol, null, undefined가 아닌 나머지를 의미한다. object 타입을 쓰면 Obejct.create 같은 API가 더 잘 나타난다.

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

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

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

 

타입 단언

타입 단언은 angle-bracket과 as 문법 두가지가 존재한다.

// angle-bracket 문법
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

// as 문법
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

 

두가지 모두 동일하며, 선호도에 따라 선택해 사용하면 된다. 하지만 타입스크립트를 JSX와 사용할 때는 as 문법만 허용된다.

반응형

'Typescript' 카테고리의 다른 글

tsconfig.json 설정  (0) 2023.01.04
컴파일러 설정  (0) 2023.01.04
인터페이스  (0) 2022.12.29

댓글