[Typescript] Typescript의 기본 타입

유재민·2022년 3월 1일
0
post-custom-banner

# Typescript의 기본 타입

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

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

# String (문자형)

let str: string = 'hi';

# Number (숫자형)

let num: number = 10;

# Boolean (논리형)

let isLoggedIn: boolean = false;

# Object (객체)

let obj: object = {};

let obj: { name: string, age: number } = {
  name: 'a',
  age: 20
};

# Array (배열)

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

// 다중 타입 사용
let arr: (string | number)[] = [1, 'a', 2, 'b'];

// 제네릭 사용
let arr: Array<number> = [1,2,3];

# Tuple (배열의 길이와 요소의 타입이 고정된 배열)

배열과 비슷하다. 하지만 배열의 길이와 요소의 타입이 지정되어야 한다.
하지만 값을 할당할 때만 해당되며 push나 splice같은 메소드를 통해 값을 넣는건 가능하다.

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

// 타입 대신 값으로 대체할 수 있다.
let user: ['a', number];
user = ['a', 20]; // ["a", 20]
user = ['b', 30]; // error

# Enum (열거형)

특정 값(상수)들의 집합을 의미한다.
숫자 혹은 문자열 값 집합에 이름을 부여할 수 있는 타입으로, 값의 종류가 일정한 범위로 정해져 있는 경우 유용하다.
기본적으로 0부터 시작하며, 값은 1씩 증가한다.

enum Color {Red, Green, Blue}
console.log(Color);
// 0: "Red"
// 1: "Green"
// 2: "Blue"
// Red: 0
// Green: 1
// Blue: 2

// 기본적으로 0부터 시작한다.
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
console.log(c) // 1

// 시작 값을 지정할 수 있다. 다음 값은 시작 값을 기준으로 변경된다.
enum Color {Red = 2, Green, Blue}
let c: Color = Color.Green;
console.log(c) // 3

// 모든 값을 수동으로 지정할 수 있다.
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
console.log(c) // 2

// 하나의 매겨진 값을 이용하여 enum멤버의 이름을 알아낼 수 있다.
enum Color {Red = 1, Green, Blue}
let c: string = Color[2];
console.log(c); // 'Green'

# Any (모든 타입)

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

# Void (반환 값이 없음)

변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다.
또한 함수에 반환 값이 없는 경우 undefined를 반환한다.

// 변수
let unuseful: void = undefined;

// 함수
function notuse(): void {
  console.log("hello");
}
console.log(hello()); // undefined

# Never (발생하지 않는 값)

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

  }
}

// 어떠한 값도 발생하지 않는다.
function errorMsg() {
  throw new Error("오류 발생!");
}


참고자료
1. 타입스크립트 기본 타입
2. 타입스크립트(TypeScript) 타입 선언
3. 기본 타입

profile
프론트엔드 개발자
post-custom-banner

0개의 댓글