타입스크립트 정리하기 3. 타입스크립트의 주요타입

본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다.

본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다.

 

3. 타입스크립트의 주요 타입

3-1. String Literal Types

String Literal Types는 문자열이 가질 수 있는 특정 값을 한정할 수 있다.

let myFavoritePet: "dog";
myFavoritePet = "dog"; // OK

myFavoriyePet = "rock"; // Error: Type '"rock"' is not assignable to type '"dog"'.

타입의 이름을 주어 enum과 같은 역할을 할 수 있다.

 

type Species = "cat" | "dog" | "bird";

function buyPet(pet: Species, name: string): Pet { /* ... */ }

buyPet(myFavoritePet, "Rocky"); // OK
buyPet("rock", "Rocky"); // Error: Argument of type '"rock"' is not assignable to parameter of type "'cat' | "dog" | "bird".

오버로드를 사용할 수 있다.

function buyPet(pet: Species, name: string) : Pet;
function buyPet(pet: "cat", name: string) : Cat;
function buyPet(pet: "dog", name: string) : Dog;
function buyPet(pet: "bird", name: string) : Bird;
function buyPet(pet: Species, name: string) : Pet = { /* ... */ }
let dog = buyPet(myFavoritePet, "Rocky"); // type: Dog

사용자정의 타입가드를 사용할 수 있다.

interface Pet {
	species: Species,
    eat();
    sleep();
}

interface Cat extends Pet {
	species: "cat"
}

interface Dog extends Pet {
	species: "dog"
}

interface Bird extends Pet {
	species: "bird",
    sing();
}

function petIsCat(pet:Pet): pet is Cat {
	return pet.species === 'cat';
}

function petIsBird(pet:Pet): pet is Bird {
	return pet.species === 'bird';
}

function playWithPet(pet: Pet) {
	if(petIsCat(pet)) {
    	pet.eat();
        pet.sleep();
    } else if(petIsBird(pet)) {
    	pet.eat();
        pet.sing();
        pet.sleep();
    }
}

 

3-2. Tuple

배열의 특정 요소에 타입을 지정할 수 있다.

let day: [number, string]
day = [0, 'Monday']; // OK
day = ['zero', 'Monday'] // Error; 'zero' is not numeric
console.log(day[0]); // 0
console.log(dat[1]); // 'Monday'
day[2] = 'saturday'; // OK
day[3] = false; // Error; 배열에 들어갈 수 있는 값은 number | string

 

3-3. Boolean

true/false를 사용하는 변수를 지정하기 위하여 사용

let isTrue: boolean = true;
let isFalse: boolean = false;
let isBoolean: boolean // returns 'undefined'
let isBoolean: boolean = null // returns 'null'

 

3-4. Intersection Types

두 개 이상의 타입을 합쳐서 사용할 수 있다.

interface Knife {
	cut();
}

interface BottleOpener {
	openBottle();
}

interface ScrewDriver {
	turnScrew();
}

type SwissArmyKnife = Knife & BottleOpener & ScrewDriver;

function use(tool: SwissArmyKnife) {
	console.log("I can do anything!");
    
    tool.cut();
    tool.openBottle();
    tool.turnScrew();
}

 

3-5. function argument의 타입지정과 리턴 type 지정 - 숫자편

function을 선언할 때, argument의 변수타입과 return값의 type을 지정할 수 있다.

function sum(x: number, y: number): number {
	return x + y;
}

입력되는 x와 y값은 모두 숫자값이어야 하며, 반환되는 값도 숫자값이다.

 

function sum(x: string, y: string): number {
	return x + y;
}

function sum(x: number, y: number): string {
	return x+y;
}

위와같이 사용하는 경우, 에러가 발생한다.

error TS2322: Type 'string' is not assignable to type 'number'

error TS2322: Type 'number' is not assignable to type string'

 

3-6. function argument의 타입지정과 리턴 type 지정 - 문자열편

function hello(name: string): string {
	return `hello ${name}`;
}

 

3-7. const Enum

컴파일 타임에서 어떤 객체도 생성되지 않는다는 점만 빼면 const Enum은 일반적인 Enum과 동일하다. 

대신 const Enum을 사용할 때  문자 그대로의 값이 대체된다.

// 선언은 일반적은 Enum과 동일하게 한다.
const enum NinjaActivity {
	Espionage,
    Sabotage,
    Assassination
}

// 컴파일시 자바스크립트에는 아무것도 생성되지 않는다.
// 타입스크립트에서 사용할 수 있다.
let myFavoriteNinjaActivity = NinjaActivity.Espionage; // 0

// 다른 Enum 값도 마찬가지다.
console.log(NinjaActivity["Sabotage"]); // 1

일반적인 Enum은 런타임에서 enum 변수에 직접 접근할 수 있다.

const Enum은 컴파일타임에서 숨겨지기 때문에 런타임에서 직접 접근할 수 없다.

즉, const enum은 컴파일 타임 전용 기능이며 원래 enum은 런타임 + 컴파일 타임 기능이고, 대부분의 프로젝트는 const enum에 적합하지만 enum이 선호되는 경우가 있다.

* 실제로 컴파일이 완료되었을 때 const enum이 크기가 더 작다고 한다.

 

3-8. Number

숫자값은 integer값과 floating point 값을 모두 포함한다.

10진수가 기본값이지만, 다른 진법의 수를 할당할 수도 있다.

let pi: number = 3.14;
let hexadecimal: number = 0xFF; // 255
let binary: number = 0b10; // 2
let octal: number = 0o755; // 493

3-9. String

문자열값

let SingleQuotes: string = 'single';
let DoubleQuotes: string = "double";
let templateString: string = `I am ${SingleQuotes}` // I am single

3-10. Array

배열에 값 할당

let ThreePigs: number[] = [1, 2, 3];
let genericStringArray: Array<string> = ['first', 'second', 'third'];

3-11. enum

문자열 대치값

기본값은 0부터 할당된다.

enum Day { Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday };
let bestDay: Day = day.Saturday; // bestday = 5;

기본값을 지정할 수 있다.

enum TenPlus { Ten = 10, Eleven, Twelve } // 최초값을 지정하고, 다음 값들은 순차적으로 할당된다.
// Eleven = 11, Twelve = 12

enumMyOddSet { Three = 3, Five = 5, Seven = 7, Nine = 9 } // 모든 값을 할당한다.

3-12. Any

타입을 지정하지 않을 때 any를 선언하면 어떤 타입이든 할당할 수 있다.

* 타입검사를 실시하지 않는다.

let everything: any = "string"

everything = 5; // OK

3-13. Void

어떤 타입도 필요 없을 때 void 형을 선언한다.

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

void 형에는 null과 undefined만 할당할 수 있다.