[TypeScript] 개념 및 JavaScript와의 차이점, 사용이유

타입스크립트(TypeScript)란?

TypeScript는 JavaScript를 확장하여 만든 프로그래밍 언어이다.

⇒ 즉! JavaScript로 개발하다보니 에러나 가독성 등의 측면에서 불편해서 만들어진게 TypeScript! 

2014년경에 Microsoft에 의해 개발・발표되었다.

 

TypeScript로 작성된 코드를 컴파일하면 JavaScript 코드로 변환이 된다.

그 때문에, JavaScript 파일을 실행할 수 있는 환경이라면 곧바로 사용할 수 있어,

JavaScript 라이브러리도 TypeScript에서 사용할 수 있는 등 호환성이 높은 것이 특징이다.

 

TypeScript는 규모가 큰 프로젝트처럼 많은 프로그래머들이 개발할 때, 오류를 방지하기 위해 설계가 되었다.

이외에도 변수의 데이터 형을 미리 정하는 것이나, 

하나의 함수 정의로 다른 데이터형의 인수를 처리할 수 있는 것 등의 특징이 있다.

 

이러한 대규모 개발을 견딜 수 있는 사양으로 인해 2017년 Google이 사내 표준 개발 언어로 TypeScript를 채택하면서 수요가 확대되었다.

TypeScript는 국내에서도 향후의 보급이 예상되는 장래성이 높은 언어라고 할 수 있다.

---

■ TypeScript와 JavaScript의 차이

TypeScript는 JavaScript가 진화한 버전의 프로그래밍 언어다. 

TypeScript와 JavaScript의 구체적인 차이점은 아래와 같다.

・JavaScript는 동적타이핑(Dynamic typing), TypeScript는 정적타이핑(static typing)

・TypeScript에서는 클래스를 작성할 수 있다.

・TypeScript에서는 JavaScript와 동일한 구문을 사용할 수 있다.

 

차이점1.  변수 타입(Type)

데이터형은 프로그램에서 다루어지는 데이터의 종류를 나타내는 용어로

JavaScript 코드에서는 실행 시 데이터형(type)이 자동으로 결정된다.

이 구조는 동적타이핑이라고 불리며 소스코드를 쉽게 작성이 가능하지만, 실행하지 않으면 오류(bug)를 알 수 없다는 단점이 있다.

+정보)다른 언어로 Ruby나 Phthon 등이 있다.

 

한편 TypeScript는 변수의 데이터형(type)을 미리 정할 수 있다.

이 구조는 정적타이핑이라고 불리며 컴파일을 하는 시점에서 에러를 알 수 있다. 

변수의 데이터형을 미리 선언하기때문에 자바스크립트에서 모호하게 사용되는 데이터형을 제어할 수 있으므로

더 간편하게 에러를 해결할 수 있다.

+정보)다른 언어로 C# 등이 있다.

 

차이점2. 클래스(class) 작성 가능

클래스는 소스코드를 간결하게 기술하기 위한 구성으로 TypeScript 파일에서는 클래스를 쉽게 정의할 수 있다.

 

차이점3. TypeScript에서 JavaScript와 동일한 구문이 사용가능

TypeScript는 JavaScript의 기능을 확장해서 만들어졌기 때문에,

JavaScript의 구문을 사용할 수 있다.

---

■ TypeScript의 장점

・JavaScript보다 짧고 읽기 쉬운 코드 작성 가능

: TypeScript에서는 클래스를 작성할 수 있기 때문에 짧고 읽기 쉬운 코드를 쓸 수 있다.

동일한 기능을 구현하는 경우에는TypeScript쪽이 코드는 간결하다.

 

・ JavaScript와의 호환성

: TypeScript 에디터의 코드 보완 기능을 사용하면 좀 더 예쁘게 코드를 쓸 수 있다.

또한, TypeScript와 JavaScript는 호환이 돼서 JavaScript 개발 환경이 있으면 쉽게 도입이 가능하다.

이 때문에 JavaScript 파일을 TypeScript에서 호출하여 사용할 수도 있다.

 

・데이터형(type)을 선언하기 때문에 오류를 미연에 방지 가능

: TypeScript는 변수의 타입을 프로그램 코드 내에서 선언할 수 있어서 에러를 미연에 방지할 수 있다.

실행 전에 타입을 선언하기 때문에 동작이 빠른 것도 TypeScript의 장점이다.

---

아래의 예제를 확인하면 자바스크립트의 단점과 이 단점을 보완한 타입스크립트의 장점을 이해할 수 있다.

function sum(x, y)
{
	return x + y;
}

위 함수를 정의한 개발자의 의도는 2개의 숫자 타입 인수를 전달받아 그 합계를 반환하려고 하는 것이다.

하지만 코드상으로는 어떤 타입의 인수를 전달해야하는지, 어떤 타입의 반환값을 반환해야하는지 명확하지 않다.

따라서 위 함수는 아래와 같이 호출 될 수도 있다.

function sum(x, y)
{
	return x + y;
}

sum('a', 'b'); // 결과 값은 'ab'

위 코드는 자바스크립트 문법상 어떠한 문제도 없으므로 자바스크립트 엔진은 아무런 이의 제기 없이 위 코드를 실행한다.

이러한 상황이 발생하는 이유는 변수나 반환값의 타입을 사전에 지정하지 않는

자바스크립트의 동적타이핑(dynamic typing)에 의한 것이다.

 

위에서 작성한 스크립트를 타입스크립트의 정적 타입을 사용하여 다시 작성하면 아래와 같다.

function sum(x:number, y:number)
{
	return x + y;
}

sum('a', 'b');
// error 발생 : TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'.

TypeScript는 정적 타입을 지원하기 때문에 컴파일 단계에서 오류를 찾을 수 있는 장점이 있다.

명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있기 때문에 코드의 가독성을 높이고 예측할 수 있으며 디버깅이 쉽다.

 

---

JavaScript 프레임워크와의 관계성

TypeScript로 애플리케이션을 만드는 경우 JavaScript 프레임워크와의 관계성을 아는 것이 중요하다.

 

프레임워크를 사용하면 애플리케이션을 효율적으로 개발할 수 있다.

프레임워크에 따라 정해진 설정파일을 수정하면 애플리케이션을 더 쉽게 만들 수 있다.

 

JavaScript 프레임워크에는 여러 종류가 있는데 주요 프레임워크 3개만 적어보자면 아래와 같다.

 

■ AngularJS

AngularJS는 Google에서 만들었다. TypeScript에서 개발이 권장되는 JavaScript 프레임워크이다.

다양한 동작 단말기로 움직이는 것이 특징이다.

페이지 수가 적은 Web 애플리케이션이나, 관리 화면계열의 애플리케이션을 만들 때 적합하다.

■ React

React는 Facebook에서 만든 JavaScript 프레임워크이다.

확장 기능을 사용하면 TypeScript에서도 사용할 수 있으나 별로 권장하지는 않는다.

유지보수가 쉽고 동작이 빠른 게 특징이다. UI나 싱글 페이지 애플리케이션의 개발에 적합하다.

■ Vue.js

Vue.js는 Evan You라는 사람이 만들었고, React와 마찬가지로 JavaScript 프레임워크이다.

다른 라이브러리와 조합하기 쉽다는 것이 특징이다.

간단하고 소규모인 애플리케이션부터 본격적인 개발까지 유연하게 대응할 수 있다.

---

 

▶ typeScript를 사용하는 이유 ◀

위에서 언급한 장점때문에 사용하지만 다시 한번 정리하자면

시스템의 규모가 커짐에 따라서 시스템의 복잡도가 증가하게 된다.

이럴 때 TypeScript(정적타이핑 : static typing)를 사용한다면 이러한 현상을 보완할 수 있다.

1. 실행되기 전에 상당수의 오류를 발견할 수 있다. 즉, 빠른 오류(Bug) 발견이 가능하다.
2. 컴파일러 및 코드 에디터가 코드를 실행하지 않더라도 프로그램에 대해 훨씬 더 많은 정보를 알 수 있다.
3. 자바스크립트는 간단한 실수도 실제로 코드를 실행을 해야 발견할 수 있는 반면에,
   타입스크립트는 실행전에 발견할 수 있어 안전하고 간편하게 코드를 작성할 수 있다.

즉, 에러를 사전에 미리 예방할 수 있다는 것이다.