[TypeScript] 타입스크립트는? 용도와 프로젝트 코드 변경 (1)

1. typescript?

타입 스크립트 설치의 경우 포스팅 링크를 올려두도록 한다. (링크)

2022.02.25 - [Node.js] - [Typescript] Typescript 설치

[Typescript] Typescript 설치

타입 스크립트를 먼저 구글에 검색하면 먼저 나오는 것이 바로 웹 프런트 언어?라는 말이 있는데, 정확히 타입 스크립트는 

타입 스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다. [5] 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다.

위는 위키백과의 일부에서 발췌했으나 단순히 프런트에만 사용되는 것이 아닌 백에서도 사용할 수 있음을 볼 수 있다.

타입스크립트의 공식문서에서는 타입스크립트를

 The main benefit of TypeScript is that it can highlight unexpected behavior in your code, lowering the chance of bugs.

라고 이야기한다.
개발자가 예측하지 못하는 버그의 발생을 줄여준다는 것이다. 

(https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)

 

먼저 JS는 타입을 따로 명시하지 않아도 되는 Dynamic Typing이 가능한 언어이다. 대표적인 예로 python , JS가 그렇다.
이 글을 보는 사람이 C로 개발을 처음 시작했다면 Python을 만났을때의 신선함을 생각해보자. 신기하지 않았는가? 
필자는 대단하다고 생각하면서도, 상당히 근본없는 언어라고 생각했다.(물론 당시의 이야기다.)

타입을 따로 지정하지 않아도 변환이 가능하다는 것은 큰 장점이다. 

예를들어 let x = 3 ; 라는 코드를 던졌을때 console.log(typeof(x))를 찍어보면 당연하게도 number가 출력된다.

하지만,  let x = 3 + '5'; 를 실행하면 이는 무엇을 출력할까. 답은 String이다.  

개발자가 이를 의도했다면 아무 문제가 없겠지만, 코드의 유지보수등에 있어 타인이 보기에는 이 개발자가 스트링끼리의 연산을 원했는지, 아니면 실수로 스트링처리를 해버린건지 알기 힘들다. 

이는 컴파일러가 타입설정을 런타임 시점에 정하기 때문인데, 코드가 짧다면 상관이 없겠지만 파일 수가 늘어나고 프로젝트가 커진다면..? 개발에 있어 이는 편의 기능이 아닌 언제든 오류를 뿜어낼수 있는 잠재적 버그일 것이다. 

이런 기능을  TypeScript에서는 타입추론 (Types by Inference) 이라고 한다.

이런 타입 추론으로 인한 문제를 해결하기 위한 것이 다음에 설명할 기능이다.

 

1-1 타입 정의 / 타입 어노테이션

이 부분에 대해서는 필자가 확인한 결과 Typescript 공식 핸드북에서는 Defining Types (Type Definition) 이라고 표현하며, 의미상 같은 의미로 사용되는 것이 Type annotation 이다. 

이를 위해  typescript의 interface를 사용한 예제를 보이려고 한다.

코드를 먼저 보자

interface User{
    name : String, //사용자 이름
    id : number,    // id
    admin : boolean //관리자 여부
}

//객체 생성.
const user: User = {
    name: "DongD",
    id : "23",
    admin : false
}


console.log(user)

Interface 의 개념은 JAVA와 같은 다른 객체 지향언어에서는 쉽게 접할 수 있는 개념이나, JS에서는 생소한 개념일 수 있다. ES6에서 지원하지 않기 때문이다. 

Interface는 JAVA와 같은 언어에서는 메소드등을 선언하고 다른 클래스들이 해당 인터페이스를 상속함으로써 클래스의 기능등을 정의 하는 역할을 한다. 

TS에서의 interface 역시 메소드와 프로퍼티를 인터페이스에 선언함으로써 이를 상속받는 객체가 해당 타입을 가져야 함을 정의한다. 이를 통해 일관성을 유지할 수 있도록 하는 것이다.

위에서의 코드처럼 객체가 사용할 타입을 지정함으로써 객체의 값에 해당 타입이 아닌 값이 들어간다면 오류를 출력한다.

admin의 타입을 boolean으로 지정했으나 String값을 넣었기 때문에 오류를 출력한다.

interface User{
    name : String, //사용자 이름
    id : number,    // id
    admin : boolean //관리자 여부
}

//객체 생성.
const user: User = {
    name: "DongD",
    id : 1,
    admin : true
}
console.log(user)


//방법 1
class userclass implements User {
    constructor(
        public name: string,
        public id: number,
        public admin: boolean) {}
}
const member = new userclass("hello",123,false);
console.log(member);


// 방법2
class userclass2 {
    name : string;
    id : number;
    admin : boolean;

    constructor(name: string, id: number ,admin: boolean) {
        this.name = name;
        this.id = id;
        this.admin = admin;
    }
}

const member2 = new userclass2("bye",999,false);
console.log(member2);

 

타입스크립트 타입 어노테이션을 사용한 객체 생성법을 정리해 보았다. (방법1 과 2)

 

ts코드를 tsc 명령을 통해 변환한 JS코드이다. 실제 러닝은 해당 코드로 해야한다.