타입스크립트란?

리액트를 공부하는데 타입스크립트를 써서 개발할 수도 있다는 걸 알았다. 그런데 이름만 들었을 땐 자바스크립트 짝퉁이거나 비스무리한 것 같다. 비슷한 거라고 치면 왜 리액트 개발할 때 이걸 같이 사용할까? 이 생각이 들어서 이번 포스팅을 쓰게 됐다.

 

먼저 타입+스크립트로 단어를 2개로 떼어놓고 생각해봤다. 타입은 프로그래밍에선 보통 int, float 같은 자료형을 의미한다. 여기에 자바스크립트의 스크립트가 붙었다고 친다면, 타입과 관련되서 자바스크립트가 진화한 건가? 싶다. 그리고 타입스크립트는 왜 쓰는 것인가? 아래는 위키백과에서 설명하는 타입스크립트다.

 

https://ko.wikipedia.org/wiki/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

타입스크립트 - 위키백과, 우리 모두의 백과사전

타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejsberg가 개발에 참여한다. 클라이언트와 서버 사이드를 위한 개발에 사용할 수 있다.
타입스크립트는 자바스크립트 엔진을 쓰면서 커다란 앱을 개발할 수 있게 설계된 언어다. 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 타입스크립트에서 내가 원하는 타입을 정의하고 프로그래밍하면 자바스크립트로 컴파일되어 실행할 수 있다. 타입스크립트는 모든 OS, 브라우저, 호스트에서 쓸 수 있는 오픈소스다

 

https://en.wikipedia.org/wiki/TypeScript

TypeScript - Wikipedia

타입스크립트는 마이크로소프트에서 개발, 유지 관리하는 프로그래밍 언어다. 자바스크립트의 엄격한 구문 상위 집합(슈퍼셋)이며 언어에 선택적 정적 유형 지정을 추가한다. 대규모 앱 개발을 위해 설계됐으며 자바스크립트로 트랜스컴파일된다. 자바스크립트의 상위 집합(슈퍼셋)이므로 기존 자바스크립트 프로그램도 유효한 타입스크립트 프로그램이다. 타입스크립트는 클라이언트, 서버 사이드 실행(Node.js 또는 Deno에서와 같이) 모두를 위한 자바스크립트 앱을 개발하는 데 사용할 수 있다.
트랜스컴파일에는 여러 옵션을 쓸 수 있다. 기본 타입스크립트 checker를 쓰거나 바벨 컴파일러를 호출해 타입스크립트를 자바스크립트로 바꿀 수 있다. 타입스크립트는...(중략)...자바스크립트 라이브러리의 타입 정보를 포함할 수 있는 정의 파일을 지원한다. 이렇게 하면 다른 프로그램에서 파일에 정의된 값을 정적으로 유형이 지정된 타입스크립트 엔티티인 것처럼 쓸 수 있다. Node.js 기본 모듈용 타입스크립트 헤더도 사용 가능하므로 타입스크립트 안에서 Node.js 프로그램을 개발할 수 있다

 

정리하면 타입스크립트는 이런 언어다.

 

• 마이크로소프트가 만들었고 관리 중인 언어다
• 자바스크립트의 상위 호환이다
• 클라이언트, 서버 모두 사용 가능하다
• 바벨 컴파일러를 쓰면 자바스크립트로 컴파일된다
• 크게 앱 개발할 때 사용한다

 

누가 만들었는진 알겠는데, 타입스크립트가 뭐냐는 근본적인 궁금증은 덜 해소됐다. 좀 더 찾아봤다.

 

https://medium.com/@wonjong_oh/typescript-1-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-f4b02f54009c

TypeScript #1 타입스크립트란 무엇인가?

...(중략) 타입이라는 특징을 가지고 ES7 이하의 표준을 포함하고 있다. 또한 ES6의 새 기능들을 쓰기 위해 바벨 같은 별도 트랜스파일러를 쓰지 않아도 ES6의 새 기능을 기존 자바스크립트 엔진에서 쓸 수 있다. 타입스크립트의 장점은 정적 타입 언어기 때문에 컴파일 시 시간이 좀 걸리더라도 안정성을 보장한다는 점이다. 자바스크립트는 동적 타입 언어기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않는다. 타입스크립트는 자바스크립트의 이런 단점을 보완하기 위해 만들어졌다. 이런 이유로 MS는 타입스크립트에 Javascript that scales(확장된 자바스크립트)라는 슬로건을 만들었다

- 타입스크립트 특징

타입스크립트는 대규모 어플리케이션 개발에서 다음과 같은 3가지 특징을 지원한다

1. ES6 모듈 및 네임스페이스 : 타입스크립트는 ES6에서 제공하는 모듈 선언과 호출 방식을 지원한다. 또한 클래스가 커지고 개수가 많아지면 유사한 기능의 클래스들을 그룹으로 구분지어야 할 필요가 생기는데, 이 때 타입스크립트에선 네임스페이스를 지원해 라이브러리 단위 모듈 구성에 유리하다

2. 클래스, 인터페이스 : 타입스크립트는 ES6의 클래스 특징을 받아들이고 인터페이스 특징을 지원해서 완전한 객체지향 프로그래밍 환경을 제공한다. class, interface, extends처럼 전통적 객체지향 언어에서 쓰던 키워드를 그대로 쓸 수 있다. 기존 언어와의 차이를 보면 타입스크립트에서는 자바처럼 다중 생성자를 선언할 수 없다는 점이 있다. 그리고 타입스크립트는 자바와 달리 디폴트 초기화 매개변수와 선택 매개변수를 선언할 수 있다

3. 타입 시스템 : 타입스크립트는 타입 시스템을 지원한다. 타입 시스템은 자바스크립트의 타입을 확장하고 타입 어노테이션을 이용해 변수에 타입을 선언할 수 있게 한다. 이렇게 타입이 지정되면 엄격한 타이핑이 적용돼 타입 안정성을 확보한다

 

https://hanamon.kr/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%9E%80-typescript/

타입스크립트(TypeScript)란? - 하나몬

타입이란 프로그램에서 다룰 수 있는 값의 종류를 의미하는데 타입 안정성이 보장되지 않는다는 것은 이런 값의 종류가 잘못 전달될 경우(버그)를 잡기 어렵다는 걸 의미한다. 그래서 자바스크립트로 작성한 프로젝트가 커질수록 디버그하는 게 어려워진다. 타입스크립트는 정적 타입 언어기 때문에 컴파일 시 시간이 좀 걸려도 안정성을 보장한다는 게 장점이다

 

타입은 자료형을 말하는 게 맞고 타입을 사용하기 때문에 타입스크립트가 자바스크립트보다 안정성이 높다고 한다.

그리고 클래스, 인터페이스라는 자바에서 자주 사용하는 개념들도 사용할 수 있다. 또한 타입이 있기 때문에 자바로 개발을 해 본 사람이라면 익숙한 제네릭도 타입스크립트에는 존재한다. 물론 자바스크립트에는 없다.

다른 글에서도 표현만 다를 뿐 말하는 건 비슷해서 위 2개만 참고 사이트를 적었다.

 

타입스크립트와 자바스크립트의 차이를 간단한 예제로 확인해보자. 먼저 자바스크립트 코드는 아래처럼 생겼다.

 

function Greeting(name) {
    return "Hi, " + name;
}

console.log(Greeting("철수"));

 

개발자 도구에서 실행하면 "Hi, 철수"가 출력되는 게 보인다.

이걸 타입스크립트로 바꾸면 아래와 같이 변한다.

 

function Greeting(name: string) {
    return "Hi, " + name;
}

console.log(Greeting("철수"));

 

어디서 많이 본 형태다. name 뒤에 콜론과 타입이 붙었다.

안드로이드 개발에 쓰이는 언어 중 코틀린이 있는데 코틀린 사용 시 저런 형태로 변수명 뒤에 콜론과 자료형을 붙인다. 그래서 코틀린을 공부했거나 개발을 해봤다면 이 형태가 많이 친숙할 것이다.

타입스크립트의 클래스는 아래 같은 형태를 하고 있다.

 

class Person {
    public name: string;
    public age: number;
    private isAlive: boolean

    constructor(name, age, isAlive) {
        this.name = name;
        this.age = age;
        this.isAlive = isAlive;
    }
}

 

이 부분은 그냥 자바랑 아주 흡사하게 생겼다. 자바 95% 코틀린 5% 정도로 비슷한 느낌이다.

인터페이스를 클래스와 같이 쓰면 아래처럼 쓸 수 있다.

 

interface InterfacePerson {
  name: string;
  age: number;
  isAlive: boolean;
  sayHi(): void;
}

class Person implements InterfacePerson {
  constructor(
    public name: string,
    public age: number,
    public isAlive: boolean
  ) {}

  sayHi() {
    console.log(`Hi, ${this.name}`);
  }
}

function greeter(person: InterfacePerson): void {
  person.sayHi();
}

const person = new Person('철수', 12, true);
console.log(person.sayHi());

 

인터페이스에는 변수와 추상 메서드를 정의할 수 있고 이를 클래스에서 구현 시 인터페이스에서 정의한 변수, 추상 메서드를 반드시 구현해야 한다. 이건 자바와 똑같다.

자바, 코틀린같은 언어로 개발한 사람이라면 타입스크립트에 적응하는 건 그리 어렵지 않을 것 같지만 자바스크립트를 첫 언어로 시작한 사람에게는 어려울 수도 있어보인다.