Front-end Developer

0%

타입스크립트의 기본 타입

Posted on Edited on

기본 타입

javaScript에는 string, number, boolean, null, undefined, symbol의 원시타입과 object, array, function 등의 객체가 있는데, typeScript에서도 거의 동일한 데이터를 지원한다. typeScript의 타입은 다음과 같다.

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

타입 표기(Type Annotation)

:을 사용하여 표기한다.

1. Boolean

1
2
//진위값
const show: boolean = true;

2. Number

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

1
2
3
4
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

3. String

1
2
3
4
5
6
7
8
9
10
11
//JS 문자열 선언방식
const str = 'hello';

//TS 문자열
const tsStr: string = 'hello';

//x템플릿 문자열 사용가능
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.
I'll be ${age + 1} years old next month.`;

4. Array

배열의 표현 방법은 두 가지가 있다.

  • []: 배열요소들을 나타내는 타입 뒤에 []를 사용
  • 제네릭 배열 타입: Array<elemType>
1
2
3
4
5
6
//TS 배열 선언방식 <>안에 작성된 타입만이 배열의 요소로 사용가능
//<string>으로 작성되었는데 number를 넣으면 에러 발생.
const tsArr: Array<number> = [1, 2, 3];
const heroes: Array<string> = ['Capt', 'hulk', 'thor'];
//배열 리터럴을 통해 선언할 수도 있다.
const items: number[] = [1, 2, 3];

5. Tuple

요소의 타입과 개수가 고정된 배열 표현

1
2
3
4
5
6
7
//TS 튜플 - 배열의 특정 위치와 타입까지 설정.
const locations: [string, number] = ['gangnam', 100];

//정해진 인덕스 외의 요소에 접근하면 오류 발생
x[3] = 'world'; // 오류, '[string, number]' 타입에는 프로퍼티 '3'이 없습니다.

console.log(x[5].toString()); // '[string, number]' 타입에는 프로퍼티 '5'가 없습니다.

6. enum

c# 같은 언어에서 쓰는 것처럼 값의 집합에 더 나은 이름을 붙여준다. 즉 특정 값(상들의 집합을 말한다. 즉 특정 값(상수)들의 집합을 말한다. 값을 지정하면 지정한 값부터 멤버들의 번호를 매기고, 따로 지정하지 않았다면 0부터 시작하여 멤버들의 번호를 매긴다. 모든 값은 순차적으로 매기지 않고, 수동으로 설정해 줄 수도 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//따로 값을 매기지 않았으니 0부터 시작하여 순차적으로 번호가 매겨진다.
enum Color {
  Red,
  Green,
  Blue,
}

let c: Color = Color.Green;

//수동으로 값 설정
enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}
let c: Color = Color.Green;

// 매겨진 값을 사용해서 enum 멤버 이름을 알아낼 수 있다.
//아래 코드에서 2라는 값과 매칭되는 멤버의 이름을 알아낼 수 있다.
enum Color {
  Red = 1,
  Green,
  Blue,
}
let colorName: string = Color[2];

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

7. Object

1
2
3
4
5
6
7
8
9
10
11
12
//TS 객체
const obj: object = {};
const person: object = {
  name: 'capt',
  age: 100,
};

//객체의 구체적인 타입 설정
const tsPerson: { name: string; age: number } = {
  name: 'capt',
  age: 100,
};

8. Any

모든 타입 허용

알지 못하는 타입을 표현해야 하는 경우(사용자로부터 받은 값 혹은 데이터, 서드파티 라이브러리와 같은 동적 컨텐츠에서 온 값) any를 사용하여 표기하면 컴파일 중에 점진적으로 타입 검사를 하거나 하지 않을 수 있다.

1
2
3
4
//다음과 같이 타입의 일부만 알고 전체 타입을 모르는 경우 유용하다.
let list: any[] = [1, true, 'free'];

list[1] = 100;

9. Void

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

Void 타입의 변수 선언은 undefined, null만 할당할 수 있다.

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

10. Null and Undefined

유용하게 쓰는 경우가 거의 없다. 모든 타입의 하위 타입이기 때문에 number 같은 타입에 할당할 수 있다.

1
2
3
// 이 외에 이 변수들에 할당할 수 있는 값이 없다.
let u: undefined = undefined;
let n: null = null;

11. Never

절대 발생할 수 없는 타입

함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰인다. 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 될 수 있다. 이 역시 모든 타입에 할당 가능한 하위 타입이다. 그러나 never 자신을 제외한 어떠한 타입도 never에 할당할 수 없다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
  throw new Error(message);
}

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

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

References
타입스크립트 핸드북
타입스크립트 핸드북