TypeScript 타입2

IT공부중·2020년 3월 30일
0

TypeScript

목록 보기
4/9
post-thumbnail
post-custom-banner

데이터 타입 나머지

null 과 undefined

자바스크립트에서 값으로 존재하는 null과 undefined는 타입 스크립트에서 각각 값으로 존재함

undefined와 null 타입은 다른 타입과 함께 유니온 타입으로 정의할 때 많이 사용 된다.

let v: number | undefined = undefined;
v = 123;

void와 never

아무 값도 반환하지 않고 종료되는 함수의 반환 타입은 void 타입으로 정의할 수 있다. 그리고 항상 예외가 발생해서 비정상적으로 종료되거나 무한 루프 때문에 종료되지 않는 함수의 반환 타입은 never 타입으로 정의할 수 있다.

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

    }
}

교차 타입과 유니온 타입

여러 타입의 교집합과 합집합을 교차 타입과 유니온 타입으로 표현 가능하다. 교차타입은 &, 유니온 타입은 |으로 표현한다.

let value: (1 | 3| 5) & (3 | 5 | 7);
value = 3;
value = 1 // 타입에러

변수 value의 타입은 교차 타입과 유니온 타입 때문에 3 | 5가 된다. 3 또는 5 아닌 값을 할당 할 수 없다.

enum

enum은 열거형 타입이다.

enum Sports {
    soccer,
    basketball,
    baseball
}
const value1: Sports = Sports.soccer;
const value2: Sports.basketball | Sports.baseball = Sports.basketball; // 1, 2 와 같은 숫자를 넣어도 된다!

열거형 타입을 이용해서 스포츠를 정의하고 사용해보았다.

명시적으로 값을 입력할 수도 있다.

enum Sports {
    soccer,
    basketball = 10,
    baseball
}

열거형 타입의 첫 번째 원소에 값을 할당하지 않으면 자동으로 0이 할당된다.
열거형 타입의 각 원소에 숫자 또는 문자열을 할당할 수 있따. 명시적으로 값을 입력하지 않으면 이전 원소에서 1만큼 증가한 값이 할당된다. 위 예에서 soccer은 0 basketball은 10 baseball은 11이 된다.

enum Sports {
    soccer = 1,
    basketball,
    baseball
}
const value1: Sports = Sports.soccer;
const value2: Sports.basketball | Sports.baseball = 2;

console.log(Sports.soccer); // 1
console.log(Sports[1]); // soccer

숫자를 넣었을 경우에는 value 값으로도 key를 알 수 있다. 각 원소의 이름과 값이 양방향으로 매핑되어 있다.

한개라도 문자열을 넣으면 다른 원소들도 문자열을 넣어야한다. 문자열은 단방향으로 매핑되어 있기 때문에 value 값으로 key를 알아낼 순 없다.

함수 타입

function getInfo(name: string, age: number): string {
    return `${name}의 나이는 ${age}입니다.`;
}
const v1: string = getInfo('문건우', 26);
const v2: string = getInfo('문건우', "26"); // 타입에러
const v3: number = getInfo('문건우', 26); // 타입에러

?를 붙임으로써 선택 매개변수로 만들 수 있다. 기본값은 옆에 =으로 적어주면된다.

function getInfo(name: string, age: number = 26, language?: string) {
    // 구현부
}

선택 매개변수는 제일 오른쪽에 와야한다. 기본 값은 타입을 적어주지 않아도 가능하다. 기본값대로 타입이 지정된다.

만약에 함수의 this 타입을 지정해주기 위해서는 첫 번째 매개변수 위치에 지정해주면 된다. 지정해주지 않으면 any 값이 된다. this 타입은 매개변수로 치지 않으므로 원래대로 함수를 사용하면 된다.

다음 시간에는 interface와 type을 적어보겠다!

profile
4년차 프론트엔드 개발자 문건우입니다.
post-custom-banner

0개의 댓글