front-end / / 2023. 11. 27. 06:46

[typescript] 기본타입

이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다.

코드앙마 타입스크립트


문자열 타입

let car:string = 'bmw';

car = 'benz';

car는 문자열이다. 문자열에는 string으로 타입을 지정할 수 있다.

let car:string = 'bmw';

car = 1; // 오류

car에 숫자로 된 값을 넣으면 에러가 발생하는 것을 알 수 있다.

타입 추론

타입스크립트는 타입을 지정하지 않으면 값을 가지고 예측을 한다.

//예) 
let car = 'bmw'; // car는 string으로 지정

//예) 
let car = 123; // car는 number로 지정

다른 타입

let age:number = 30;  // number로 지정
let isAudult :boolean= true;  // boolean 타입
let a:number[] = [1, 2, 3]; // 배열
let a2:Array<number> = [1, 2, 3]; // 배열은 이런식으로도 된다.

let week1:string[] = ['mon', 'tue', 'wed']; // 문자열 배열
//week1.push(3); // 문자열 배열에 숫자를 추가하면 에러가 발생
let week2:Array<string> = ['mon', 'tue', 'wed'];

다양한 유형의 타입으로 지정할 수 있다.

튜플 (Tuple)

튜플은 배열 모양인데 인덱스별로 타입이 다를 때 이용할 수 있다.

let b:[string, number];

b = ['z', 1]; // 이렇게 입력하는 것은 가능
//b = [1, 'z']; // 이렇게 입력하는 것은 불가능

//문자을 소문자로 변환하는 toLowerCase()
b[0].toLowerCase(); // 가능
b[1].toLowerCase(); // 불가능

타입을 미리 알고 있기 때문에 .(dot)을 찍었을 때 미리 알 수 있다.

void, never 타입

void는 함수에서 아무것도 반환하지 않을 때 사용할 수 있다.

function sayHello():void {
    console.log('hello');
}

never는 에러를 반환하거나 영원히 끝나지 않는 타입으로 사용할 수 있다.

function showError():never {
    throw new Error();
}

function infLoop():never {
    while(true) {
        // do something
    }
}

enum 타입

javascript에는 없는 타입이다. enum은 비슷한 타입으로 묶어 놓은 것이다.

enum Os {
    Window,
    Ios,
    Android
};

마우스를 올려보면 Window는 0, Ios는 1, Android는 2로 할당이 되는 것을 알 수 있다.

enum Os {
    Window = 3,
    Ios, // 4
    Android // 5
};

여기서 Window를 3으로 변경하면 Ios는 4, Android는 5가 된다.

enum Os {
    Window = 3,
    Ios= 10l,
    Android // 11
};

Ios를 10으로 바꾸면 Android가 11이 된다.

위의 코드를 javascript로 컴파일된 코드를 보면 아래와 같다.

var Os;
(function (Os) {
    Os[Os["Window"] = 3] = "Window";
    Os[Os["Ios"] = 10] = "Ios";
    Os[Os["Android"] = 11] = "Android"; // 11
})(Os || (Os = {}));
;

이것의 의미는 아래와 같다.

console.log(Os[10]); // Ios가 나오고
console.log(Os['Ios']); // 10이 나온다는 말이다.

enum에는 숫자가 아닌 문자열도 입력할 수 있다.

enum Os {
    Window = 'win',
    Ios= 'ios',
    Android = 'and'
};

이럴 때는 숫자가 아닐 때는 단방향 매핑만 가능하다.

위의 코드는 아래와 같은 코드가 된다는 의미이다.

const Os = {
    Window : 'win',
    Ios : 'ios',
    Android : 'and'
};
let myOs:Os; 

myOs는 Os 타입이라고 정의하면 myOs에서는 Window, Ios, Android만 입력이 가능하다

특정 값만 입력하도록 강제하고 싶을 때 enum을 사용하면 된다.

null, undefined 타입

let a:null = null;
let b:undefined = undefined;
반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유