[TypeScript]

타입스크립트를 많이 사용하는 이유

1. 버그 예방

자바스크립트의 버그 중 15%를 타입스크립트의 사용으로 미리 예방할 수 있다는 연구가 있다고 합니다. 자바스크립트는 선언할 때 타입을 지정해주지 않기 때문에 동작하면서 언제 나도 모르게 형변환이 되어 있을 수도 있고, 그런 부분으로 인해 예기치 않은 버그가 발생할 수도 있습니다. 심지어 인터프립터 언어 특성상 그런 버그들을 찾는 것 조차 쉽지 않죠. 컴파일 과정이 없기 때문에 에러를 출력하지 않고 실행되기 때문입니다. 타입스크립트를 사용한다고해서 모든 버그를 완전히 막을 수 있는 것은 아니지만 적어도 컴파일단계에서 타입관련 에러는 막을 수 있습니다. 예를들어, strictNullCheck 옵션을 true로 해놨다면 객체/null/undefined가 할당될 수 있는 변수가 있을 때, null이나 undefined가 아닌지 체크하지 않고서는 객체의 속성을 가져올 수 없습니다.

 

타입스크립트가 제공하는 가장 큰 장점으로 기존 자바스크립트는 Array + Boolean = String을 반환했지만 타입스크립트는 런타임 환경이 아닌 컴파일 단계에서 에러를 캐치해준다. 에러가 있는 코드는 실제 프로그램이 돌아갈 때 실행되면 안되지만 자바스크립트는 가능했다. 타입스크립트로 작성하면 무조건은 아니고 버그 확률을 많이 줄여준다. 

2. 코드 퀄리티 향상

자바스크립트로 코드를 작성할 때, 객체의 필드나 함수의 매개변수로 들어오는 값이 무엇인지 알기 위해 여러 파일들을 살펴봐야했던 경험이 있을 것입니다. 하지만 타입스크립트를 제대로 사용함으로써 얻을 수 있는 가장 큰 장점중에 하나는 변수의 이름뿐만 아니라 그 데이터의 "type"까지 알 수 있게 해준다는 것입니다. 그래서 코드 작성이 좀 더 쉽고 직관적이게 만들어줍니다. 개발자는 로직과 같은 큰 구조들에만 집중할 수 있게 해주는 것이죠. 
또한 오브젝트 안의 속성값을 하나하나 기억할 필요없이 IDE가 자동으로 리스트업 해주기 때문에 개발자 입장에서는 훨신 편해집니다.

3. 크로스브라우징 문제 해결

모든 브라우저의 지원을 걱정해야하는 프론트개발자 입장에서는 ES6+을 써도 될지 고민이 많을 것입니다. 하지만 타입스크립트는 컴파일 과정에서 ES6+ 문법들을 ES5(또는 ES3)로 바꿔주기 때문에 Babel의 도움 없이 크로스브라우징 문제를 해결할 수 있습니다. 

 

타입 정의

타입 별칭(Type Alias)

// type 별칭 = 타입지정;
type Name = string;

선택적 변수 지정

type Info = {
    name:string,
    age?:number
}

타입 재사용

// 1
type Age = number
type Name = string
type Info = {
    name:Name,
    age?:Age
}

// 2
type Player = {
    name:string,
    age?:number
}
const A : Player = {
    name:"A"
}
const B : Player = {
    name:"B",
    age:10
}

const, let에 변수 할당 및 함수 사용

type Age = number
type Name = string
type Info = {
    name:Name,
    age?:Age
}

function playerMaker(name:string) {
    return {
        name: name
    }
}

const mi = playerMaker("mi")
mi.age = 13 // Error


function playerMaker(name:string) : Info {
    return {
        name: name
    }
}

const mi = playerMaker("mi")
mi.age = 13 // Info 타입이라는 것을 알아서 허용

// Info를 지정함으로 playerMaker가 함수임을 Typescript가 인지
// string 타입으로 name을 받고 Info 타입을 return하는 함수

//화살표형 함수
const playerMaker2 = (name:string) : Info => ({name})
const di = playerMaker2("di")
di.age = 13
console.log(playerMaker2("gi")) // gi
console.log(di) // {"name": "di", "age": 13}