TypeScripts란?

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

자바스크립트는 동적 타입 언어로 런타임에서 오류를 발견할 수 있다. 이에 반해 타입스크립트는 정적 타입 언어로 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환된다.

 

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

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

 

객체 지향 프로그래밍 지원

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

 

장점

• 코드 작성 단계에서 타입을 체크해 오류 확인
• 미리 타입을 결정하기 때문에 실행 속도가 매우 빠름

단점

• 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭다
• 코드량이 증가하며 컴파일 시간이 오래 걸림

 

사용해야 하는 이유

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

타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다.

자바스크립트 호환

타입스크립트는 자바스크립트와 100% 호환된다. 따라서 프론트엔드 또는 백엔드 어디든 자바스크립트를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있다. 타입스크립트는 앱과 웹을 구현하는 자바스크립트와 동일한 용도로 사용 가능하다.

강력한 생태계

대부분의 라이브러리들이 타입스크립트를 지원하며 각종 에디터(VS code)가 타입스크립트 관련 기능과 플러그인을 지원한다.

점진적 전환 가능

기존의 자바스크립트 프로젝트를 타입스크립트로 전환하는데 부담이 있다면 추가 기능이나 특정 기능에만 타입스크립트를 도입함으로써 프로젝트를 점진적으로 전환할 수 있다.

프로젝트의 규모가 크고 복잡할수록, 유지보수가 중요한 장기 프로젝트일수록 타입스크립트의 이점이 부각될 것이다.

 

기본 문법

• 변수에 타입 설정

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

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

• 함수에 타입 설정

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

인터페이스

인터페이스 : 타입을 정의한 규칙

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

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

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

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

ts의 기본타입 중 js에 없는 타입

• Tuple
• var arr: [string, number] = ['aa', 100];
• Enum: Number 또는 String 값 집합에 고정된 이름을 부여할 수 있는 타입
• enum Shoes { Nike = '나이키', Adidas= '아디다스'}
• Any: 모든 데이터 타입을 허용
• Void: 변수에는 undefined와 null만 할당하고 함수에는 리턴 값을 설정할 수 없는 타입입니다.
• Never: 특정 값이 절대 발생할 수 없을 때 사용합니다.

 

---

[참고]https://www.samsungsds.com/kr/insights/TypeScript.html