타입스크립트는 일반 변수, 매개 변수, 객체 속성 등에: TYPE
과 같은 형태로 타입을 지정할 수 있다.
let a: string = 'text'; // 문자열
let b: number = 0; // 숫자형
let c: boolean = true; // 논리형
let d: any = true; // 어떤 타입이 올지 모를 때
let e: string | number = '0'; // 문자열이나 숫자가 올 때
만약 아래와 같이 타입을 선언하고 다른 타입의 값을 대입하거나 값이 선언된 후에 다른 타입의 값이 대입되면 에러를 발생한다.
// 문자열로 선언하고 숫자를 대입하면 에러 발생
let a: string = 0; // error
// 문자열 값이 들어가고 이후에 숫자가 대입하면 에러 발생
let b: string = 'text';
b = 1; // error Type '1' is not assignable to type 'string'. TS2322
출력창에서 TS2322
라는 에러 코드를 볼 수 있으며, 이를 검색하면 쉽게 에러 코드에 대한 정보를 얻을 수 있다.
타입스크립트는 ES5, ES6의 상위 확장인 언어이므로 자바스크립트의 타입을 그대로 사용하며, 이외에도 타입스크립트의 고유의 타입이 추가로 제공된다.
Type | JS | TS | Description |
---|---|---|---|
boolean | ◯ | ◯ | true와 false |
null | ◯ | ◯ | 값이 없다는 것을 명시 |
undefined | ◯ | ◯ | 값을 할당하지 않은 변수의 초기값 |
number | ◯ | ◯ | 숫자(정수와 실수, Infinity, NaN) |
string | ◯ | ◯ | 문자열 |
symbol | ◯ | ◯ | 고유하고 수정 불가능한 데이터 타입이며 주로 객체 프로퍼티들의 식별자로 사용(ES6에서 추가) |
object | ◯ | ◯ | 객체형(참조형) |
array | ◯ | 배열 | |
tuple | ◯ | 고정된 요소수 만큼의 타입을 미리 선언후 배열을 표현 | |
enum | ◯ | 열거형. 숫자값 집합에 이름을 지정한 것 | |
any | ◯ | 타입 추론(type inference)할 수 없거나 타입 체크가 필요없는 변수에 사용, var 키워드로 선언한 변수와 같이 어떤 타입의 값이라도 할당 가능 | |
void | ◯ | 일반적으로 함수에서 반환값이 없을 경우 사용 | |
never | ◯ | 결코 발생하지 않는 값 |
let bool01: boolean = true;
let bool02: boolean = false;
let num01: number = 5;
let num02: number = 3.14;
let num03: number = NaN;
ES6의 템플릿 문자열도 지원한다.
let str01: string = 'text';
let str02: string = `my name is ${val}`;
배열은 아래와 같이 두가지 방법으로 타입을 선언할 수 있다.
// 문자열만 가지는 배열
let arr01: string[] = ['a', 'b', 'c'];
let arr02: Array<string> = ['a', 'b', 'c'];
// 숫자형만 가지는 배열
let arr03: number[] = [1, 2, 3];
let arr04: Array<number> = [1, 2, 3];
// Union 타입(다중 타입)의 문자열과 숫자를 동시에 가지는 배열
let arr05: (string | number)[] = [1, 'a', 2, 'b', 'c', 3];
let arr06: Array<string | number> = [1, 'a', 2, 'b', 'c', 3];
// 배열이 가지는 값의 타입을 추측할 수 없을 때 any를 사용할 수 있다.
let arr07: (any)[] = [1, 'a', 2, 'b', 'c', 3];
let arr08: Array<any> = [1, 'a', 2, 'b', 'c', 3];
함수는 파라미터에 각각 타입을 선언해 주며, 파라미터 우측에는 해당 함수의 리턴값 타입도 선언해 주면 된다.
function sum(a: number, b: number): number {
return a + b;
}
console.log(sum(2, 3)); // 5
리턴값을 숫자형으로 선언하였는데 다른 값이 리턴된다면 역시 에러가 난다.
function sum(a: number, b: number): number {
return null; // error
}
기본적으로 typeof 연산자가 object
로 반환하는 모든 타입을 나타낸다. 여러 타입의 상위 타입이기 때문에 그다지 유용하지 않다.
let obj: object = {};
let arr: object = [];
let func: object = function() {};
let date: object = new Date();
보다 정확하게 타입 지정을 하기 위해 아래와 같이 객체 속성들에 대한 타입을 개별적으로 지정할 수 있다.
let user: { name: string, age: number } = {
name: 'a',
age: 20
};
console.log(user); // {name: "a", age: 20}
배열과 유사하다. 차이점은 정해진 타입의 요소 개수 만큼의 타입을 미리 선언후 배열을 표현한다.
let tuple: [string, number];
tuple = ['a', 0];
console.log(tuple); // ["a", 0]
정해진 요소의 순서 및 개수가 다르면 오류를 출력한다.
let tuple: [string, number];
tuple = [0, 'a']; // error
tuple = ['a', 0, 1]; // error
아래와 같이 데이터를 개별 변수로 지정하지 않고, 단일 튜플 타입으로 지정해 사용할 수 있다.
// 기존 변수
let name: string = 'a';
let age: number = 20;
// 튜플
let user: [string, number] = ['a', 20];
console.log(user); // ["a", 20]
값으로 타입을 대신할 수도 있다. 처음 선언할 때의 값과 다른 값이 할당 되면 에러가 출력된다.
let user: ['a', number];
user = ['a', 20]; // ["a", 20]
user = ['a', 30]; // ["a", 30]
user = ['b', 30]; // error
튜플은 정해진 타입과 고정된 길이의 배열이지만, 값을 할당할 때만 해당된다. push나 splice같은 메소드를 통해 값을 넣는건 막을 수 없다.
let user: [string, number];
user = ['a', 20]
console.log(user); // ["a", 20]
user.push(30);
console.log(user); // ["a", 20, 30]
숫자 혹은 문자열 값 집합에 이름을 부여할 수 있는 타입으로, 값의 종류가 일정한 범위로 정해져 있는 경우 유용하다. 기본적으로 0부터 시작하며, 값은 1씩 증가한다.
enum obj {
a,
b,
c,
d,
e
}
console.log(obj);
// 0: "a"
// 1: "b"
// 2: "c"
// 3: "d"
// 4: "e"
// a: 0
// b: 1
// c: 2
// d: 3
// e: 4
수동으로 값을 변경할 수 있으며, 변경한 부분부터 다시 1씩 증가한다.
enum obj {
a,
b = 10,
c,
d,
e
}
console.log(obj.b); // 10
console.log(obj.c); // 11
Any는 모든 타입을 의미하며, 기존의 자바스크립트 변수와 마찬가지로 어떠한 타입의 값도 할당할 수 있다. 불가피하게 타입을 선언할 수 없는 경우, 유용할 수 있다.
let any:any = 'String';
any = 0;
console.log(any); // 0
any = true;
console.log(any); // true
빈 타입인 Void는 리턴값이 없는 함수에서 사용된다. 리턴값의 타입을 명시하는 곳에 작성하며, 리턴값이 없는 함수는 undefined
를 반환한다.
function hello(): void {
console.log("hello");
}
console.log(hello()); // undefined
Never 타입은 절대 발생할 수 없는 타입을 나타낸다.
function errorMsg() {
throw new Error("오류 발생!");
}
console.log(errorMsg()); // Uncaught Error: 오류 발생!
errorMsgd
함수는 오류를 발생시키기 때문에 null
, undefined
를 포함한 어떠한 값도 반환하지 않는다. 이럴 경우 never 타입을 사용하면 된다.
한눈에 보는 타입스크립트(updated)
정적 타이핑
타입스크립트 기초 연습
TypeScript-Handbook 한글 문서
3.1 기본 타입
타입스크립트 기초 연습