[타입스크립트 핸드북] - (2) Fundamentals(기초 타입)

Jeenie·2022년 9월 17일
0

타입스트립트

목록 보기
2/4
post-thumbnail

이 시리즈는 타입스크립트 핸드북을 요약한 시리즈입니다.

타입스크립트 기본 타입

타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있다.

  • Boolean
  • Number
  • String
  • Object
  • Array
  • Tuple
  • Enum
  • Any
  • Void
  • Null
  • Undefined
  • Never

1. String

자바스크립트 변수의 타입이 문자열인 경우 아래와 같이 선언해서 사용한다.

let str: string = 'hi';

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

2. Number

타입이 숫자이면 아래와 같이 선언한다.

let num: number = 10;

3. Boolean

타입이 진위 값인 경우에는 아래와 같이 선언한다.

let isLoggedIn: boolean = false;

4. Array

타입이 배열인 경우 간단하게 아래와 같이 선언한다.

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

또는 아래와 같이 제네릭(generic)을 사용할 수 있다.

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

제네릭(generic)이란?

📌 제네릭(Generics)의 사전적 정의를 참조하자.

5. Tuple

튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다.

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

만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 난다

arr[1].concat('!'); // Error, 'number' does not have 'concat'
arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.

6. Enum

특정 값(상수)들의 집합을 의미한다.
( C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입 )

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;

이넘은 인덱스 번호로도 접근할 수 있다.

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers[0];

이넘의 인덱스를 사용자 편의로 변경하여 사용할 수도 있다.

enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor

7. Any

모든 타입에 대해서 허용한다는 의미.
JS 프로젝트를 점진적으로 TS로 변경할 때 사용하면 좋다.


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

하지만 any를 남발하면 TS를 쓰는 의미가 사라진다. 최대한 지양하도록 하자

8. Void

변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입.

return 값이 없는 함수일 때 사용한다.

let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}

9. Never

함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입.

// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
  while (true) {

  }
}
profile
Web Front-end developer

0개의 댓글

관련 채용 정보