타입스크립트 기초 1

 

타입 할당

 

function add(n1: number, n2: number) {
    return n1 + n2;
}

const number1 = '5';
const number2 = 2.8;

const result = add(number1, number2); // number1은 숫자만 받아들일 수 있음

 

타입스크립트만 갖는 고유한 기능이며 n1과 n2에 : number를 입력하여 타입 배정을 하여 n1과 n2에는 숫자형 타입만 들어올 수 있게 합니다.

그러므로 number1에서 문제가 발생하게 됩니다.

 

 

vs 자바스크립트

 

function add(n1: number, n2: number) {
    if (typeof n1 !== 'number' || typeof n2 !== 'number' ) {
        throw new Error('Incorrect Input!');
    }
    return n1 + n2;
}

const number1 = '5';
const number2 = 2.8;

const result = add(number1, number2);

 

typeof를 이용하여 자바스크립트 코드로 위와 같이 해결할 수 도 있습니다.

하지만 자바스크립트는 동적 타입이므로 개발 도중에 어떤 타입인지 명확히 할 수 없으며 이를 해결하기 위해 타입스크립트는 정적 타입으로 어떤 타입을 보유할 수 있는지 여부를 명확히 할 수 있게 합니다.

타입스크립트 타입은 컴파일 중에 확인되는 반면, 자바스크립트 타입은 런타임 중에 확인됩니다.

이는 버그를 보다 앞서 수정할 수 있다는 것을 의미합니다.

 

 

타입

 

function add(n1: number, n2: number, showResult: boolean, phrase: string) {
    // phrase가 문자형이기에 먼저 숫자를 합쳐줌
    const result = n1 + n2;
    if (showResult) {
        console.log(phrase + result);
    } else {
        return n1 + n2;
    }
}

const number1 = 5;
const number2 = 2.8;
const printResult = true;
const resultPhrase = 'Result is: ';

add(number1, number2, printResult, resultPhrase); // Result is: 7.8

 

다른 프로그래밍 언어들은 실수형, 정수형, 이중형 등으로 나누기도 하나 자바스크립트와 타입스크립트의 모든 숫자형은 기본적으로 float 실수형입니다. 그리고 가장 기본적인 문자열과 불리언 타입도 있습니다.

 

 

타입 추론

 

let number1: number;
number1 = '5'; // 에러

let number1 = 5;

 

위의 두 코드는 number1 변수에는 숫자형이 저장될 거라고 알려주는 것입니다.

아래의 코드는 위의 과정을 합친 것이고 이제 타입스크립트는 처음으로 할당된 값과 같은 타입이 저장될 거라고 생각하며 그걸 타입 추론이라 합니다.

 

 

객체

 

const person = {
    name: 'iltae',
    age: 29
}

 

기본적으로 자바스크립트의 객체를 작성하는 방법은 다음과 같습니다.

 

// const person: object = {
//     name: 'iltae',
//     age: 29
// }

const person: {} = {
    name: 'iltae',
    age: 29
}

 

타입스크립트에서 객체 타입을 지정하기 위해선 object 또는 객체를 할당합니다.

빈 객체는 object로 적는 것과 같은 기능을 합니다.

 

const person: {
    name: string;
    age: number;
} = {
    name: 'iltae',
    age: 29
}

 

이렇게 객체 타입 쌍으로 타입 할당할 객체를 채워 넣을 수 있습니다.

작업 중인 객체를 타입스크립트가 이해할 수 있도록 해주는 객체 타입의 타입스크립트 표현일 뿐 사실 타입을 명시적으로 추론할 수 있도록 맨 처음 자바스크립트에서 하듯이 작성해 주는 게 좋습니다.

 

 

배열

 

// 문자열들의 한 배열이라고 타입스크립트에게 알려주는 작업
let favoriteActivities: string[];

favoriteActivities = 'Game'; // 에러
favoriteActivities = ['Game', 5]; // 에러

 

배열타입은 상당히 생소하게 생겼습니다.

 

let favoriteActivities: any[];

favoriteActivities = ['Game', 5];

 

any는 모든 타입을 가능하게 해 유연하지만 타입스크립트가 지닌 장점을 이용할 수 없기에 자주 사용할 타입은 아닙니다.

 

const person=  {
    name: 'iltae',
    age: 29,
    hobbies: ['Badminton', 'Cleaning']
};

for (const hobby of person.hobbies) {
    console.log(hobby.toUpperCase()); // 문자열로 추론하기에 문자열 조작 가능
    console.log(hobby.map()); // 문자열이기에 배열을 조작하는 map은 불가능
}

 

 

튜플

 

배열과 똑같이 생겼지만 길이가 고정된 배열입니다. 또 길이뿐 아니라 타입도 고정됩니다.

 

const person: {
    name: string;
    age: number;
    hobbies: string[];
    role: [number, string];
}=  {
    name: 'iltae',
    age: 29,
    hobbies: ['Badmintion', 'Cleaning'],
    role: [2, 'master'] // 첫 번째는 숫자이고 두 번째는 문자열이어야함 ++ 길이는 2 => 튜플이 적합
};

 

기본적으로 role 위의 속성들은 명시적으로 추론이 가능하기에 굳이 필요하진 않으나 튜플은 그 길이와 타입이 고정되기에 타입 할당을 먼저 해주어야 합니다.

 

person.role[1] = 10; // 에러
person.role.push('etc');

 

이렇게 지정된 타입을 벗어나면 에러가 뜨게 됩니다.

하지만 push는 에러가 뜨지 않는데 타입스크립트가 이를 에러로 잡지 못한다고 합니다.

 

 

열거형(enum)

 

문자열을 더 편하게 관리하기 위해 만들어진 타입입니다.

 

enum Tier {MASTER, GRANDMASTER, CHALLENGER}

const person =  {
    name: 'iltae',
    age: 29,
    hobbies: ['Sports', 'Game'],
    tier: Tier.MASTER
};

 

 

 

이렇게 식별자는 숫자로 관리되며 쉽게 그 식별자들을 고를 수 있게 됩니다.

 

enum Tier {MASTER = 'master', GRANDMASTER = 200, CHALLENGER = 300}

const person =  {
    name: 'iltae',
    age: 29,
    hobbies: ['Sports', 'Game'],
    tier: Tier.MASTER
};

 

또한 필요에 따라 식별자에 어떤 것이든 할당할 수 있습니다.