TypeScript

TypeScript 란?

Javascript 를 기반으로 하여 정적 타입 문법을 추가한 프로그래밍 언어

• JavaScript 의 상위 집합으로 Microsoft 에서 개발했다.
• 따라서 JavaScript의 모든 기능을 TypeScript 에서도 사용할 수 있다.
• ES6 신규 문법을 포함하고 클래스, 인터페이스, 상속, 모듈 등의 객체 지향 프로그래밍 패턴을 제공한다.
• TypeScript 컴파일러를 사용하여 TypeScript(.ts) 파일을 Javascript(.js) 파일로 변환하여 실행한다.

 

TypeScript vs. JavaScript

🧐 속도, 안정성

자바스크립트는 동적 타입 언어로 런타임 속도는 빠르지만, 타입 안정성은 보장되지 않는다.

타입스크립트는 정적 타입 언어로 컴파일 시간이 길지만, 안정성이 보장된다.

 

🧐 실행되는 위치

자바스크립트는 클라이언트에서 실행된다.

타입스크립트는 클라이언트와 서버 단에서 실행된다.

 

🧐 소스 번역 방식

자바스크립트는 인터프리터 언어이다.

타입스크립트는 컴파일 언어이다.

타입스크립트는 다른 컴파일 언어랑은 방식에 차이가 있어 트랜스파일 언어라고 부르기도 한다.

 

🧐 컴파일러 필요 여부

자바스크립트는 웹 브라우저에서 실행되며 별도의 컴파일러가 필요하지 않다.

타입스크립트는 자바스크립트 파일로 변환되어 실행되어야 하므로 타입스크립트를 컴파일하는 컴파일러가 필요하다.

 

🧐 패턴

자바스크립트는 프로토타입 기반의 언어이다.

타입스크립트는 객체 지향 프로그래밍 언어이며 클래스, 상속, 인터페이스 및 수정자를 사용할 수 있다.

자바스크립트에서 클래스와 같은 기능을 활용하려면 함수와 프로토타입을 사용해 직접 작성해주어야 하지만 타입스크립트는 자체적으로 지원하고 있다.

✅ 프로토타입(prototype)
자바스크립트의 모든 객체는 프로토타입이라는 객체를 가지고 있어 프로퍼티와 메소드를 상속 받는다. 객체 안에는 __proto__ 속성이 있고 이는 자신의 원형 프로토타입 객체를 참조하는 숨겨진 링크이다.

 

🧐 독립적? 의존적?

자바스크립트는 독립적으로 사용할 수 있다.

타입스크립트는 자바스크립트로 컴파일된 후 실행하므로 자바스크립트에 의존적이다.

 

TypeScript 특징

• 타입 어노테이션을 이용해 변수에 타입을 선언하여 안정성을 확보한다.
• 클래스와 인터페이스를 지원하여 객체지향 프로그래밍 환경을 제공한다.
• 컴파일 과정에서 ES6 이상 문법들을 ES5(or ES3)로 바꿔주어 크로스브라우징 문제를 해결할 수 있다.

✅ Babel
타입스크립트에서는 ES6 기능들을 사용하기 위해 Babel과 같은 별도의 트랜스파일러를 사용하지 않아도 된다. 브라우저가 최신 버전의 자바스크립트 문법을 이해하지 못할 때 브라우저가 이해할 수 있는 문법으로 변환시켜주는 트랜스파일러이다.

 

TypeScript 타입 지정

변수를 선언할 때 타입을 지정하여 컴파일 시점에서 잘못된 코드를 잡아낼 수 있다.

• 일반 변수, 매개 변수, 객체 속성 등에 타입을 지정할 수 있다.
• 타입을 명시하지 않으면 모든 타입이 허용된다.
• 타입은 대소문자를 구분한다.
• 타입은 변수 : 타입과 같은 형태로 지정한다.

 

변수

- 숫자(number)

let num: number = 5;

 

- 문자열(string)

let str: string = 'hello';

 

- 참/거짓(boolean)

let isSomething: boolean = true;

 

- 배열([], Array)

let arr1: number[] = [1, 2, 3];
let arr2: Array<number> = [4, 5, 6];

 

- 객체({}, object)

let obj1: object = {name: 'anna', age: 15};
let obj2: {name: 'tom', age: 22};

 

- any : 기존 자바스크립트에서 사용하던 것과 유사하게 아무 타입이나 받음

let anyNumber: any = 10;
let anyString: any = 'hello';

console.log(anyNumber.length);  // undefined
console.log(anyString.length);  // 5

 

- unknown : any 타입과 동일하게 모든 값을 허용하지만 할당된 값이 어떤 타입인지 모름(이후 연산 불가)

let unknownNumber: unknown = 10;
let unknownString: unknown = 'hello';

console.log(unknownNumber.length);  // Object is of type 'unknown'
console.log(unknownString.length);  // Object is of type 'unknown'

if (typeof unknownString === 'string') {
  console.log(unknownString.length);  // 타입 체크 필수
}

 

함수

- 인자와 반환 값

예시에서는 string 타입 name과 number 타입 age 인자, number 타입 반환한다.

function myFunc(name: string, age: number) : number {
  // ...
}

 

- 옵션 인자

생략할 수 있는 인자 뒤에 물음표를 붙여 옵션 인자로 지정한다.

function myFunc(name: string, age?: number) : number {
  // age 인자 생략 가능
}

 

- never

절대 발생하지 않는 값의 타입, 에러나 무한루프에서 사용한다.

function myFunc(): never {
  throw new Error('error!!!');
}

 

- void

어떤 값을 가지지 않는 타입이다.

function myFunc(): void {
  console.log('아무 것도 반환하지 않음');
}