Typescript를 쓰는 이유

사람들이 하도 TS를 사용해야 된다. 라고 강조하길래 TS를 쓰는 이유에 대해 정리를 해봤다.

TS도 결국엔 JS다.

결국엔 JS라고 표현했지만 결과론 적으로 보면 TS은 JS의 상위 확장이다.
Javascript + Type = TypeScript 자바스크립트에 타입에 대한 내용을 확장시킨 것이 TS!
타입스크립트는 컴파일 이후에 자바스크립트가 된다. 이 점에서 그럼 굳이 타입스크립트를 쓰는 이유가 뭐야? 결국엔 자바스크립트로 컴파일 된다면서! 라고 친구가 되물어 볼때 그에 해당하는 답편을 정리해봤다..(저 답편이 막연하게 떠오르거나 답편 정리가 안된다면 이 글을 정독하자ㅎ)

Foundation intro

자바스크립트는 1995년 넷스케이프사의 브렌던 아이크(Brendan Eich)가 자사의 웹브라우저인 Navigator 2에 탑재하기 위해 개발한 스크립트 언어이다. 초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 이 시기에 대부분 로직은 주로 웹서버에서 실행되었고 브라우저(클라이언트)는 서버로부터 전달받은 HTML과 CSS를 렌더링하는 수준이었다.

HTML5가 등장하기 이전까지 웹 애플리케이션은 플래시, 실버라이트, 액티브엑스와 같은 플러그인에 의존하여 인터랙티브한 웹페이지를 구축해왔다. 그러다가 HTML5가 등장함으로써 플러그인에 의존하던 구축 방식은 자바스크립트로 대체되었다. 또한 AJAX의 활성화로 데스크탑 애플리케이션과 유사한 사용자 경험을 제공할 수 있는 SPA(Single Page Application)가 대세가 되었다. 이로써 과거 서버 측이 담당하던 업무의 많은 부분이 클라이언트 측으로 이동하게 되었고, 자바스크립트는 웹의 어셈블리 언어로 불릴 만큼 중요한 언어로 그 위상이 높아지게 되었다.

모든 프로그래밍 언어에 장단점이 있듯이 자바스크립트도 언어가 잘 정제되기 이전에 서둘러 출시된 문제와 과거 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어진 태생적 한계로 좋은 점도, 나쁜 점도 많은 것이 사실이다.

자바스크립트는 C나 Java와 같은 C-family 언어와는 구별되는 아래와 같은 특성이 있다.

- Prototype-based Object Oriented Language
- Scope와 this
- 동적 타입(dynamic typed) 언어 혹은 느슨한 타입(loosely typed) 언어

이와 같은 특성은 클래스 기반 객체지향 언어(Java, C++, C# 등)에 익숙한 개발자를 혼란스럽게 하며 코드가 복잡해질 수 있고 디버그와 테스트 공수가 증가하는 등의 문제를 일으킬 수 있어 특히 규모가 큰 프로젝트에서는 주의하여야 한다.

이같은 자바스크립트의 태생적 문제를 극복하고자 TypeScript를 도입하게 되었다.

출처

Prototype-based Object Oriented Language

인터페이스, 제네릭 등과 같은 강력한 객체지향 프로그래밍 지원은 크고 복잡한 프로젝트의 코드 기반을 쉽게 구성할 수 있도록 도우며, Java, C# 등의 클래스 기반 객체지향 언어에 익숙한 개발자가 자바스크립트 프로젝트를 수행하는 데 진입 장벽을 낮추는 효과도 있다.

동적인 자바스크립트를 정적으로!

typescript를 사용하는 가장 큰 이유라고 생각한다.

예를들어

function sum(a,b) {
  return a+ b;
}

위 함수를 정의한 개발자의 의도는 아마도 숫자 2개를 a, b에 인자로 전달받아 그 합계를 리턴하는 함수였을 것으로 생각한다. 하지만 코드상으로는 어떤 타입의 인수를 전달하여야 하는지, 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않다. 따라서 오류를 예측하지 않은 값이 리턴될 수 있는 함수이다.

function sum(a,b) {
  return a+ b;
}
sum("x", "y") //xy

위 코드는 자바스크립트 엔진은 아무런 오류가 없이 코드를 실행하게 될 것이다. 이러한 상황은 자바스크립트의 특징인 동적 타이핑에 의한 것이기 때문에 typescript를 사용하면 오류를 제거할 수 있다.

function sum(a: number, b: number) {
  return a+ b;
}
sum("x", "y") //Error

TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 생긴다. 명시적인 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있고, 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅이 쉬워진다.

Typescript

1.Type

타입을 직접 지정해주고 컴파일 시점에 에러를 잡아 낼 수 있다.

const myName: string = "9bin";

만약 변수에 string타입이 아닌 다른 타입을 지정해주면 Error가 발생한다.

2.interface

인터페이스는 일반적으로 타입 체크를 위해 사용되며 typealias와 유사한 기능을 한다. 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의한다.

export interface Person {
	name: string;
  	age: number;
  	address: string;
}

export를 사용하여 외부 파일에서도 사용할 수 있다.

3.type alias

인터페이스와 비슷한 동작을 하지만 default값을 지정할 수 있다는 점이 다르다. 타입 앨리어스는 extends 나 implements가 될 수 없으므로 상속을 통해 확장이 필요하다면 타입엘리어스보다 인터페이스가 유리하다

 type Person {
	name: string;
  	age: number;
  	address: string;
}

4. generics

제네릭은 타입스크립트에서 함수, 클래스, interface, type을 정의하는 시점에 매개변수나 반환값의 타입을 선언하기 어려운 경우 사용 한다.

function MyParams<T>(param: T) {
	return {param}
}

const params = MyParams(10);

< T > 는 컨벤션이며 제네릭에 해당하는 타입에는 어떤 타입이라도 들어올 수 있게 되며 Myparams는 인수 타입에 의해(number) 타입 매개변수가 결정된다.