Typescript 기본 타입 정의하기

타입 정의하기

 

타입스크립트는 타입을 원하는대로 정의할 수 있다.

 

 

const size: number = 123;
const isBig: boolean = size >= 100;
const msg: string = isBig ? '크다' : '작다';

const values: number[] = [1, 2, 3];
const values2: Array<number> = [1, 2, 3];

const data: [string, number] = [msg, size];

위와 같이 변수 옆에 ': 타입'을 해주면 타입스크립트에서는 타입을 인식하여 변수에 정해진 타입과 다른 것이 들어오면 곧바로 오류가 발생했다는 것을 알려준다.

 

 

위와 같이 정해진 타입과 다른 값이 들어오니 곧바로 오류 발생을 알려주고 있다는 것을 알 수 있다.

 

 

console.log('typeof 123 =>', typeof 123)
console.log('typeof "abc" =>', typeof "abc")
console.log('typeof [1, 2, 3] =>', typeof [1, 2, 3])

//typeof 123 => number
//typeof "abc" => string
//typeof [1, 2, 3] => object

자바스크립트에서는 number와 string 타입은 체크할 수 있지만 배열의 타입은 따로 없다는 것을 확인 할 수도 있었다.

 

 

 

 

let v1: undefined = undefined;
let v2: null = null;
v1 = 123; //오류

let v3: number | undefined = undefined;
v3 = 123; //통과

undefined 와 null 또한 타입으로 정해줄 수 있다. ' | '은 or 와 같은 기능으로 보면 된다.

 

 

 

let v1: 10 | 20 | 30;
v1 = 10;
v1 = 15; //오류

let v2: '김진석' | '석진김'
v2 = '진석'; //오류

 위의 코드를 보면 ' | '의 예이면서도 숫자와 문자 또한 타입으로 정해줄 수 있다는 것이 특징이다. union 코드라고 한다.

 

 

 

let v1: (1 | 3 | 5) & (3 | 5 | 7);
v1 = 3; //통과
v1 = 1; //오류

위와 같이 교집합 형식의 union 코드 또한 사용할 수 있다.

 

 

 

 

console.log('typeof undefined =>', typeof undefined);
console.log('typeof null =>', typeof null

//typeof undefined => undefined
//typeof null => object

여기서 자바스크립트로에서는 null 타입은 원래 정의되지 않고 있다는 것을 확인할 수도 있었다.

 

 

 

 

let value: any;
value = 123;
value = '456';
value = () => {};

'any' 타입은 어떤 타입이든 들어올 수 있게 해주는 특징이 있다. 기존 자바스크립트로 작성된 것을 타입스크립트로 바꿀 때 타입을 잘 모르겠거나 무슨 타입을 정하기 어려울때 쓸 수 있다. 하지만 남발하면 타입스크립트의 사용 의의를 잃게 되니 막 쓰면 안된다.

 

 

 

function f1(): void {
    console.log('hello');
}
function f2(): never {
   throw new Error('some error')
}
function f3(): never {
    while (true){
        // ....
    }
}

• 'void'의 타입 함수는 아무것도 반환하지 않고 종료되는 타입을 말하는 것이다.
• 'never'는 예외적인 상황에 비정상적으로 종료되거나 무한루프때문에 종료되지 않는 타입을 말한다. 사실 거의 쓰이지 않는다.

 

 

 

type Width = number | string;

let width: Width;

width = 100; //통과
width = '100px' //통과

위와 같이 타입 자체를 type 키워드를 사용하여 변수화 시켜 적용시킬 수도 있다.