Typescript에는 다양한 타입이 존재한다.
기본적으로 알기 쉬운 number, string, boolean 등
/* number 형 */
const integer : number = 10;
/* string 형 */
const text : string = "Text";
/* boolean 형 */
const turly : boolean = true;으로 표현할 수 있으며 변수명을 지정하고 : 구분자를 활용하여 타입을 지정한다.
이외에 다양한 타입에 대해서 정리해보자
1. Object
Javascript에서는 object를 다음과 같이 선언할 수 있다.
const person = {
name : "jigom",
age : 35
};Typescript에서는 다음과 같이 선언할 수 있다.
: object라고 타입을 선언한 경우
const person : object = {
name : "jigom".
age : 35
};
// or
const pserson : {} = {
name : "jigom".
age : 35
};
// object 혹은 {} 라고 선언하면 속성에 접근할 때 에러가 발생
// object라고 명시하지 않고 각 속성마다 타입을 선언해주어야 한다.
console.log( person.name );
object의 각 속성마다 타입을 선언해주는 경우
const person : {
name : string;
age : number;
} = {
name : "jigon",
age : 35
};
// or
// 각 변수마다 어떤 값이 들어갈지 알기 때문에
// 굳이 속성마다 타입을 지정해줄 필요는 없음
const person = {
name : "jigon",
age : 35
};
console.log( person.name );
- object는 각 속성마다 타입을 표기해주자
- 속성마다 타입을 지정할 때는 콤마(
,)가 아닌 세미콜론(;)으로 작성해야 한다.
2. Array
Javascript의 Array는 C언어나 C++에서 사용하는 것과는 다르게 여러가지 타입을 넣을 수 있다.
다음과 같이 말이다.
const arr = [ 1, "A", 1.09 ];처음 이걸 봤을 때 너무 충격적이었는데, Javascript의 Array는 내가 알고 있는 Array와는 다르기 때문이다.
Javascript의 Array은 배열의 요소를 위한
1) 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며
2) 연속적으로 이어져 있지 않을 수도 있는 희소 배열의 형태를 가진다.
Javascript Array은 엄밀히 말하면 일반적인 배열의 동작을 흉내 낸 특수 객체이다.
그렇기 때문에 Typescript에서의 Array는 다양하게 지정할 수 있다.
2-1. 단일 타입 array
예제를 위해 string만 들어가는 array를 만들어보자.
let arr : string[];이렇게 string으로 선언한 배열이 있다고 하자.
arr 에 arr = 'A'라고 하면 어떻게 될까?
= "A" 혹은 ='A'는 string이지 string[]이 아니다.
그렇기 때문에 arr = ['A'] 혹은 arr = ["A"]라고 해주어야 한다.
( 여기서 '과 " 는 둘다 사용할 수 있어서 표기하였다. 다음부터는 둘 중 하나만 사용할 것임 )
[ 주의할 점 ]
배열 선언만 해두었을 경우 push 를 하면 오류가 난다.
빈 배열( [] )을 할당하거나 미리 값을 할당해두면 오류가 나지 않는다.
이렇게 하지 않고
이렇게 해주어야 오류가 발생하지 않는다.
2-2. 혼합 타입 array ( Union )
다양한 타입이 들어가는 array를 표기하기 위해서는 |구분자가 사용된다.
다양한 타입을 가지는 array 를 Union이라고 부르기도 하는데 나중에 알아보자.
let arr : ( string | number )[];
arr = [ "A", 1 ];
// arr = [ 1, "A" ]
// 순서 관계 없이 string과 number로만 이루어진 배열을 나타냄3. Tuple
길이가 고정된 배열이다.
일반 Javascript의 배열은 길이를 동적으로 할당할 수 있기 때문에 사용된다.
길이가 2이고 0번째에 number형만, 1번째에 string형만 넣고 싶다면 다음과 같이 선언하면 된다.
let arr : [ number, string ] = [ 0, 'A' ];
arr = [ 'B', 'A' ]
// error, 0번째는 number만
arr = [ 'B', 1 ]
// error, 0번째는 number만
arr = [ 2, 'a' ] // ok!!
arr = [ 2, 'a', 'A' ] // error
// error, arr의 길이는 2로 고정하지만 push는 지원되지 않아 적용이 된다는 문제가 있으니 주의해서 사용하자
let arr : [ number, string ] = [ 0, 'A' ];
arr = [ 2, 'a', 'A' ] // error
// error, arr의 길이는 2로 고정
arr.push('B')
console.log( arr )
// [ 0, 'A', 'B' ]4. enum
Javascript에는 없는 타입이다.
숫자로 표현하고 싶더라도 사람이 읽을 수 있는 라벨로 표기할 수 있는 자료형이다.
등급에 따라 게시물을 조회하는 프로젝트를 개발하고 있다고 하자.
숫자 0은 관리자, 1은 회원, 2는 손님이라고 하자.
관리자는 읽기, 쓰기, 수정이 가능
회원은 읽기, 쓰기 가능
손님은 읽기만 가능하다고 했을 때 코드로 표현하면 다음과 같이 표현할 수 있다.
let MEMBER_LEVEL : number;
// or 전역 변수로 각 역할을 지정해두어도 된다.
//const ADMIN = 0;
//const MEMBER = 1;
//const GUEST = 2;
function access_information ( level : number ){
if( level === 0 ){
console.log( "Admin : Read & Write & Modify" );
}else if( level === 1 ){
console.log( "Member : Read & Write" );
}else{
console.log( "Guest : Only read");
}
}만약 MEMBER_LEVEL의 숫자 의미를 잊어버린다면 초기에 작성해두었던 문서를 찾아보거나 팀원에게 물어야 오류없는 코드 작성이 가능할 것이다.
이런 불편함을 줄이기 위해 적용된 자료형이 바로 Enum이다.
enum MEMBERS {
ADMIN, // 0, 숫자를 지정해서 관리할 수도 있다 ADMIN = 1
MEMBER,
GUEST
}
function access_information ( Who : MEMBERS ){
if( Who === MEMBERS.ADMIN ){
console.log( "Admin : Read & Write & Modify" );
}else if( Who === MEMBERS.MEMBER ){
console.log( "Member : Read & Write" );
}else{
console.log( "Guest : Only read");
}
}이렇게 Enum 으로 관리하면 사람이 확인할 수 있는 직관적인 코드로 작성할 수 있다.
5. Any
모든 타입을 정의할 수 있는 타입이다.
자주 쓰면 Typescript의 장점을 살리기 힘들다.
더하기 함수를 하나 작성해보자
function sum( a, b ){
console.log( a + b );
};
이렇게 타입을 지정하지 않으면 자동으로 Any 타입이 설정되거나 강제로 할 수도 있다.
6. Literal
변수에 특정 문자열이나 숫자에 대한 값을 지정할 수 있는 타입니다.
const program_language : 'Javascript' | "Typescript" | "C" | "C++" | "Java" | "...";이렇게 선언하면 program_language 변수는 'Javascript', "Typescript", "C", "C++", "Java", "..." 6가지 값 밖에 가질 수 없다.
7. Type
작성자가 손쉽게 볼 수 있도록 별칭을 정할 수 있도록 type 이 선언되어 있다.
type User = { name : string; age : number };
function greet( user : User ){
console.log( user.name );
}