formulous

주니어 개발자의 개발 지식 공유 블로그입니다.

JS & TS

[TypeScript] Type 스크립트의 기본형에 대해 알아봅시다.

formulous 2023. 3. 14. 00:09

안녕하세요.

오늘은 typescript 8가지 기본 타입에 대해 알아보겠습니다.

오늘 포스팅은 여기를 참고하여 만들어졌습니다.

필요한 타입 개념에 대해 알아가실 수 있길 바랍니다.


1. 불리언 (Boolean)

true / false 값을 나타냅니다. 아래와 같이 변수를 선언할 수 있습니다.

let isConnected: boolean = false;




2. 숫자 (Number)

TypeScript의 모든 숫자는 부동 소수 값입니다.

TypeScript에서는 2진수, 8진수, 10진수, 16진수를 제공합니다.

let decimal: number = 10;

let hex: number = 0xf00d;

let binary: number = 0b1010;

let octal: number = 0o744;




3. 문자열 (String)

TypeScript에서는 텍스트 데이터 타입을 string으로 표현합니다. 작은따옴표나 큰따옴표로 감싸 문자열을 표현할 수 있습니다.

let color: string = "blue";



문자열에선 백쿼트( ` ) 문자로 감싸 문자열 안에 표현식을 포함시킬 수 있습니다.

let name: string = 'Charlie Puth';

let age: number = 32;

let sentence: string = `Hello, my name is ${name}.
I'll be ${age} years old next month.`;




4. 배열 (Array)

TypeScript에서 배열을 표현할 수 있는 방법은 두 가지가 있습니다.

첫 번째 방법은, 배열 요소의 타입뒤에 []를 쓰는 것입니다.

let list: number[] = [1, 2, 3];



두 번째 방법은 제네릭 배열 타입을 사용하는 방법이 있습니다.

let list: Array<number> = [1, 2, 3];




5. 튜플 (Tuple)

튜플을 사용하면 타입과 개수가 고정된 배열을 표현할 수 있습니다. 다만, 모든 요소의 타입이 같을 필요는 없습니다.

예를 들면, 아래와 같이 number 타입과 string 타입으로 이루어진 배열을 표현할 수 있습니다.

 

let tuple_array: [string, number];

tuple_array = ["hello", 10]; // 성공

tuple_array = ["hello", "world"]; // 초기화 실패



배열과 같이 정해진 인덱스로 접근할 수 있습니다.

console.log(tuple_array[1].length()); // 실패, 'number'에는 'length'가 없습니다.
 

6. 열거 (Enum)
 
enum은 값의 집합에 더 나은 이름을 붙여줄 수 있게 해줍니다.
 
enum Color {Red, Green, Blue}

let c: Color = Color.Green;
 
기본적으로 enum은 0부터 시작하여 멤버들의 번호를 매깁니다. 멤버 중 하나의 값을 수동으로 설정하여 번호를 바꿀 수 있습니다.
 
예를들어, 위 예제를 0대신 1부터 시작해 번호를 매기도록 바꿀 수 있습니다.
 
enum Color {Red = 1, Green, Blue}

let c: Color = Color.Green;
 
enum의 유용한 기능 중 하나는 매겨진 값을 사용해 enum 멤버의 이름을 알아낼 수 있다는 것입니다. 아래 예제와 같이 사용할 수 있습니다.

 

enum Color {Red = 1, Green, Blue}

let colorName: string = Color[2];

console.log(colorName); // 값이 2인 Green이 출력됩니다.
 
7. 객체 (Object)
 

object는 원시 타입이 아닌 타입을 나타냅니다. 예를 들어, number, string, boolean, bigint, symbol, null, 또는 undefined 가 아닌 나머지를 의미합니다.

object 타입을 쓰면, Object.create 같은 API 가 더 잘 나타납니다. 예를 들어

 

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

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

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

 

8. Null and Undefined

 

TypeScript는 undefined  null 둘 다 각각 자신의 타입 이름으로 undefined , null로 사용합니다. void처럼 그 자체로 유용한 경우는 거의 없습니다.

 

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

 

기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입니다. 이건, null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 의미합니다.

 

여기까지 TypeScript의 기본 타입에 대해 알아보았습니다.

 

기본적인 개념이 잡혀야 섬세한 개발이 가능하다는 점!

 

TypeScript 기본 타입에 대한 개념을 학습하는 데에 도움이 되었으면 좋겠습니다.

 

감사합니다.