[TypeScript] TypeScript 파헤치기

Typescript

Created: Apr 7, 2021 12:54 PM
Tags: javascript, typescript

TypeScript 란?

TypeScript는 JavaScript의 Superset 이다.
완전히 새로운 언어가 아닌, JavaScript를 기반으로한 언어이다.

JavaScript의 모든 기능을 포함하고 있으며,
JavaScript에 존재하지않는 새로운 기능을 제공한다.

즉, TypeScript는 JavaScript 코드를 보다 쉽고, 강력하게 작성할 수 있는 좀 더 나은 버전의 JavaScript라 할 수있다.

TypeScript를 사용함으로 얻을 수 있는 이점

• 버그를 줄인다.
• 쉬운 유지보수가 가능해진다.
• 질좋은 코드 작성이 가능하다.

TypeScript의 특징

타입 표기
변수 값에 데이터 타입 지정이 가능하다.

강제된 기능은 아니지만, 프로그램 코드 작성 시 타입을 지정하면 좀 더 예측 가능하고, 디버깅이 용이한 코드를 작성할 수 있다.

객체지향적
TypeScript는 객체 지향적 프로그래밍 특성을 지원함

컴파일타임오류
컴파일 시 발생하는 애러에 대한 캐치가 가능함.

타입스크립트는 프로그래밍 언어인 동시에 컴파일러 이다.
TypeScript → JavaScript

Type Inference ( 타입추론 )

let a = 5;

a = 'hello';
// error !

a = 10;
// success !

**TypeScript** 에서는 타입정보가 없을경우 타입정보를 제공하기위해 타입을 추론이라는 것을 한다.

위 코드에서 변수 a 에 할 당된 값은 숫자 5이기 때문에 TypeScript는 타입추론을 통하여,
변수 a의 타입은 Number로 결정한다.

이것을 Type inference ( 타입추론 ) 이라 한다.

Defining Types ( 타입 지정 )

let name:string = 'Juno';

변수 선언 시, 변수값의 타입을 명시함으로써 변수값의 데이터 유형을 지정함.

function getUser(id:number) : object {
    return {}
}

함수의 파라미터 및 반환값도 타입명시가 가능하다.

위 코드의 getUser() 함수는 id가 number 타입인 파라미터를 받고,
object 타입의 데이터를 리턴한다.

Interface

interface는 타입 지정에서 객체의 구조를 정의 할 때 사용한다.

let id:number = 10;
let name:string = 'Juno';

function getUser(id:number): {
    id:number = 10;
    name:string = 'Juno';
} {
}

위 코드를 interface를 사용하여 바꾸게되면 아래와 같이 좀 더 간결하고 알아보기 쉽게 바꿀 수 있다.

interface User {
    id:number,
    name:string
}

function getUser(id:number):User {
    return {}
}

getUser() 함수의 반환값은 반드시
interface User 에 정의된 프로퍼티 값을 따라야 한다고 명시 한다.

선택적 프로퍼티

interface User {
    id:number,
    name:string
}

function getUser(id:number):User {
    return {
        id:number
    }
}
// error !

getUser 함수에서 retrun 되는 객체에 name 프로퍼티가 빠져있다.
getUser 함수의 반환값은 interface User로 명시 되어있기 때문에,
interface 내 모든 프로퍼티가 들어오지 않으면 애러가 발생한다.

getUser 함수의 반환값에 name이 있어도 되고 없어도되도록, 조금더 유연하게 사용하려면
아래 코드와 같이 interface에 옵셔널 기호를 넣어주어서 값이 있어도 되고, 없어도 된다는 것을 표시해주면 된다.

interface User {
    id:number,
    name?:string
}

function getUser(id:number):User {
    return {
        id:number
    }
}
// Success !

Interface 재사용

interface는 아래코드와 같이 다른 함수에서의 재사용에도 용이하다.

interface User {
    id:number,
    name?:string
}

function getUser(id:number):User {
    return {
        id:number
    }
}

function createUser(user:User):void {
    return {}
}

createUser 함수의 파라미터 user 는 interface User 에 정의된 프로퍼티 값을 따른다.

Interface 와 Method

method는 object 내에서 정의된 함수를 일컫는다.

interface 내에서 Method 선언도 가능하다.

interface User {
    id:number,
    name?:string
    add?: (item:string) => string;
}

Interface 와 Readonly 프로퍼티

읽기전용 프로퍼티로 객체 생성시 할당된 프로퍼티 값을 바꿀수 없게한다.

interface User {
    readonly id:number,
    name?:string
    add?: (item:string) => string;
}

const change = (user:User): void => {
    user.id = 11;
    // error !
}

id는 읽기전용 프로퍼티이기 때문에 변경할 수 없다는 애러가 출력된다.

열거형과 리터럴 타입

interface User {
    gender: string
}

function getUser(id:number):User {
    return {
        gender: 'male'
    }
}

interface 의 gender 프로퍼티는 string 타입이다.
이를 단순히 male 이나 female 두가지 값중에 하나만 받을 수 있도록 하는 방법은 두가지가 있다.

열거형 (Enum)

연관된 아이템들을 함께묶으 표시할 수 있는 수단

숫자 열거형

TypeScrip 는 enum item들 각각에 0번부터 index 값을 할당하여 맵핑한다.

즉 enum 속 값의 value에는 숫자가 들어가게 된다.

enum GenderType {
    Male, // 0
    Female // 1
}

interface User {
    gender: GenderType
}

function getUser(id:number):User {
    return {
        gender: GenderType.Male
    }
}

문자 열거형

enum 속 value가 숫자형이 아닌 그냥 문자열 male || female 로 받고 싶다면,
아래와 같이 그냥 각각의 값을 할당해주면 된다.

enum GenderType {
    Male = 'male', 
    Female = 'female'
}

interface User {
    gender: GenderType
}

function getUser(id:number):User {
    return {
        gender: GenderType.Male
    }
}

리터럴 타입

리터럴 타입은 enum 을 사용 했을 때와 똑같은 결과를 얻지만 사용법은 더 간단하다.

interface User {
    gender: 'male' || 'female'
}

function getUser(id:number):User {
    return {
        gender: 'male'
    }
}

애니타입, 유니언 타입

애니타입

any 타입은 어떠한 타입이든 모두 할당 될 수 있다.
하지만 **TypeScript**의 일반적인 규칙은 타입의 관한 더 많은 정보를 명시할수록 좋기 때문에
특수한 상황이 아닌이상은 사용을 추천하지 않는다.

ex) 동적컨텐츠를 받아와 사용할 때, 프로그램 작성 단계에서 변수의 타입을 알 수 없어 타입지정이 어려운경우.

let value : any;

value = 5;
value = '';
value = [];
...
// Success !

Union type ( 유니언타입 )

제한된 타입들을 동시에 지정하고 싶을 때 사용된다.

let value : number | string;

변수 value 는 number 나 string 두가지 중 아무타입이나 할당 되어도 된다.

이렇게 타입들을 조합하여 사용하면 되는데, 같은 조합이 계속 반복되는 변수가 선언되는 경우에는
코드를 타입으로 지정하고 재활용 하는것이 현명하다.

이럴 땐 Type Aliases 를 사용한다.

type 키워드를 사용하여 새로운 타입을 선언 하는 것을 Type Aliases라 한다.

type strOrNum = number | string;

let value : strOrNum;
let value2 : strOrNum;