타입스크립트 특징, 사용하는 이유, 문법

타입스크립트란 자바스크립트에 타입을 부여한 언어!

---

🥨  타입스크립트의 특징

컴파일 언어, 정적 타입 언어

자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 자바스크립트와 달리 브라우저에서 실행하려면 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환해야 한다. 이 변환 과정을 컴파일(compile)이라고 부른다.

• 장점 : 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다.
• 단점 : 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다.

자바스크립트 슈퍼셋(Superset)

타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다.

객체 지향 프로그래밍 지원

타입스크립트는 ES6(ECMAScript6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

 

🥨  타입스크립트 사용을 고려해야하는 이유

높은 수준의 코드 탐색과 디버깅

타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 또한 코드 자동 완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다.

자바스크립트 호환

타입스크립트는 자바스크립트와 100% 호환된다. 따라서 프론트엔드 또는 백엔드 어디든 자바스크립트를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있다. 타입스크립트는 앱과 웹을 구현하는 자바스크립트와 동일한 용도로 사용 가능하며 서버 단에서 개발이 이루어지는 복잡한 대형 프로젝트에서도 빛을 발한다.

강력한 생태계

타입스크립트는 그리 오래되지 않은 언어임에도 불구하고 강력한 생태계를 가지고 있다. 대부분의 라이브러리들이 타입스크립트를 지원하며 마이크로소프트의 Visual Studio Code를 비롯해 각종 에디터가 타입스크립트 관련 기능과 플러그인을 지원한다. 특히 Visual Studio Code는 툴의 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화되어 있다!

점진적 전환 가능

기존의 자바스크립트 프로젝트를 타입스크립트로 전환하는데 부담이 있다면 추가 기능이나 특정 기능에만 타입스크립트를 도입함으로써 프로젝트를 점진적으로 전환할 수 있다. 자바스크립트에 주석을 추가하는 것에서부터 시작해 시간이 지남에 따라 코드베이스가 완전히 바뀌도록 준비 기간을 가질 수 있다.

 

하지만, 새로운 프로그래밍 언어에 대한 러닝 커브, 상대적으로 낮은 가독성, 코드량 증가 등의 이유로 타입스크립트 사용을 망설이는 개발자가 많다. 프로젝트 성격에 따라 타입스크립트를 사용할지 결정하면 된다. 프로젝트의 규모가 크고 복잡할수록, 유지보수가 중요한 장기 프로젝트일수록 타입스크립트의 이점이 부각될 것이다.

 

🥨  타입스크립트 기본 문법

기본 타입

타입스크립트는 다양한 기본 타입을 제공한다.

• Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never

변수에 타입 설정

let str: string = 'hi';
let num: number = 100;

let arr: Array = [1, 2, 3];
let arr2: number[] = [1, 2, 3];

let obj: object = {};
let obj2: { name: string, age: number } = { name: 'hoho', age: 22 };

위와 같이 : 를 이용해 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)이라고 한다.

함수에 타입 설정

function add(a: number, b: number): number {
	return a+b;
}

function log(a: string, b?: string, c?: string) {
	console.log(a);
}

 

기본 타입 중 자바스크립트에 존재하지 않는 타입은 다음과 같다.

• Tuple : 배열의 타입 순서와 길이를 지정할 수 있는 타입

var arr: [string, number] = ['aa', 100];

 

• Enum :  Number 또는 String 값 집합에 고정된 이름을 부여할 수 있는 타입
  • C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 값의 종류가 일정한 범위로 정해져 있는 경우에 유용하다.
  • 기본적으로 0부터 시작하며 값은 1씩 증가한다.

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;
let hero: Avengers = Avengers[0];

 

• Any : 모든 데이터 타입을 허용하는 타입
  • 기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입!
• Void : 변수에는 undefined와 null만 할당하고 함수에는 리턴 값을 설정할 수 없는 타입
• Never : 특정 값이 절대 발생할 수 없을 때 사용

// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
  while (true) {

  }
}

인터페이스

인터페이스는 타입을 정의한 규칙을 의미한다.

interface User {
	age: number;
	name: string;
}

 

변수와 함수에 활용한 인터페이스

var person: User = {
	age: 30,
	name: 'aa'
}

function getUser(user: User) {
	console.log(user);
}

 

인터페이스 인덱싱

interface StringArray {
	[index: number]: string;
}

var arr2: StringArray = ['a', 'b', 'c'];
arr[0] = 10 //Error

 

딕셔너리 패턴

interface StringArray {
	[index: number]: string;
}

var arr2: StringArray = ['a', 'b', 'c'];
arr[0] = 10 //Error

 

인터페이스 확장

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

interface User extends Person {
	language: string;
}

오퍼레이터

Union 타입

• 자바스크립트의 OR 연산자와 같은 의미의 타입니다. Union 타입으로 지정하면 각 타입의 공통된(보장된) 속성에만 접근 가능하다.

function askSomeone(someone: Developer2 | Person) {
	console.log(someone);
}

 

Intersection 타입

• 자바스크립트의 AND 연산자와 같은 의미의 타입이다. 각각의 모든 타입이 포함된 객체를 넘기지 않으면 에러가 발생한다.

function askSomeone(someone: Developer & Person) {
	console.log(someone);
}

제네릭

한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다. 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다.

function logText<T>(text: T):T {
	return text;
}

logText<string>('aa');
logText<number>(100);

타입 추론

타입스크립트가 코드를 해석하는 과정을 의미한다.

아래 코드는 a 변수를 Boolean 타입으로 추론했기 때문에 Number 타입을 할당하면 에러가 발생한다.

var a= true;

a = 100; //Error

 

• 가장 적절한 타입(Best Common Type)
  • 배열에 담긴 값들을 추론하여 Union 타입으로 묶어 나가는 것을 의미
  • 타입스크립트는 아래 코드의 타입을 Number | Boolean 으로 정의한다.

var arr = [1, 2, true];

 

• 인터페이스와 제네릭을 이용한 타입 추론 방식

interface Dropdown<T> {
	value: T,
	text: 'String'
}

var items: Dropdown<boolean> {
	value: true,
	text: 'aa'
}

타입 단언

특정 타입이 다른 타입에 잘 호환되는 지를 의미한다.

 

구조적 타이핑 : 코드 구조 관점에서 타입이 서로 호환되는 지를 판단하는 것이다. 구조적으로 더 큰 타입은 작은 타입을 호환할 수 없다.

interface Developer {
	name: string;
	age: string;
}

interface Person {
	name: string;
}

var developer: Developer;
var person: Person;

developer = person; //Error
person = developer;

 

 

🐱‍👤 참고 :

https://www.samsungsds.com/kr/insights/TypeScript.html

https://joshua1988.github.io/ts/intro.html