타입스크립트(TypeScript)의 특징

 

타입스크립트는 2012년 마이크로소프트가 발표한 자바스크립트를 기반으로 '정적 타입 문법'을 추가한 프로그래밍 언어이다.  타입스크립트는 매우 흔하게 사용되고 있어 최근 프론트엔드 개발자를 구인할 때 우대가 아닌 필수요소가 되었다고 한다. 대형 기업들은 타입 스크립트를 활발히 사용하고 있으며 그렇지 않은 기업들도 타입스크립트 사용을 고려하고 도입하고 있다.

 

DEV Community

 

 

1. 타입스크립트의 특징

 

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

자바스크립트는 인터프리터 언어 (동적 타입)로, 런타임 시 오류를 발견할 수 있다. 그러나 타입스크립트는 정적 타입의 컴파일언어이며 런타임이 아닌 그 전에 타입스크립트 컴파일로 또는 바벨을 통해 자바스크립트 코드로 변환된다. 즉 명시적으로 변수, 함수, 객체등의 타입을 선언해야하고 타입 오류를 '컴파일 단계'에서 발견할 수 있다. 이를 통해 버그를 사전에 방지한다.

 

2) 확장자를 .js -> .ts로 변환함으로서 간편하게 사용할 수 있다.

 

3) 객체 지향 프로그래밍 지원 : 클래스, 인터페이스, 상속, 모듈등과 같은 객체지향 프로그래밍 패턴을 지원한다.

 

 

2. 왜 타입스크립트를 써야할까?

 

1. 코드 유지보수성 (디버깅)

타입스크립트는 사전에 코드에 목적을 명시하고, 그 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시키기 때문에 버그를 사전에 제거할 수 있다. 타입 오류가 있는 부분은 컴파일 단계에서 확인할 수 있으므로 리팩토링 작업을 수월하게 할 수 있다. 실제로 어떤 연구에 따르면 모든 자바스크립트 버그의 15%가 타입스크립트로 감지할 수 있다고 ...

 

2. 자바스크립트와의 호환타입스크립트는 자바스크립트와의 호환성이 매우 높다. 기존의 자바스크립트 코드를 타입스크립트로 변환하는 것이 어렵지 않으며 자바스크립트의 모든 라이브러리와 프레임워크를 사용할 수 있다. 즉 백엔드나 프론트엔드나 자바스크립트를 활용하는 곳이면 어느곳에서나 ts를 사용할 수 있으며 대형 프로젝트에서도 동일하게 사용된다.

 

3. 대규모 프로젝트 지원

프로젝트 규모가 커지면 타입 정보를 제공하고 타입 간의 의존성을 체계적으로 관리하는것이 중요하다. 타입스크립트는 타입을 정의하는 인터페이스, 제네릭 등의 기능을 제공해 타입 시스템을 더욱 유연하게 사용할 수 있다.

 

4. 코드 자동 완성과 가이드

타입스크립트의 또 다른 장점은 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다는 것이다. VS code IDE 의 내부가 ts로 작성되어있기 때문에  ts 개발에 최적화되어있다.

 

 

 

3. 프레임워크와의 호환성

1) 리액트 : 리액트와 타입스크립트의 호환성은 좋은 편이다. CRA나 Vite와 같은 보일러 플레이트도 간단한 옵션 추가만으로 typeScript를 설정할 수 있다.

 

2) Vue, Angular : 타입스크립트를 공식 지원하며 특히 앵귤러는 타입스크립트 기반으로 만들어졌으며 타입스크립트를 권장하고 있다.

 

 

 

 

4. 기본 문법

 

- 변수에 타입 설정

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
};

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

 

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

 

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;
}

 

 

4. 타입스크립트 공부

(공식 문서) https://typescript-kr.github.io/

TypeScript 한글 문서

https://react.vlpt.us/using-typescript/

8장. 리액트 프로젝트에서 타입스크립트 사용하기 · GitBook

www.youtube.com/watch?v=BwuLxPH8IDs

 

 

---

 

 

Reference:

https://www.samsungsds.com/kr/insights/typescript.html#:~:text=%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%EC%82%AC%EC%9A%A9%EC%9D%84%20%EA%B3%A0%EB%A0%A4%ED%95%B4%EC%95%BC%20%ED%95%98%EB%8A%94%20%EC%9D%B4%EC%9C%A0&text=%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94%20%EC%BD%94%EB%93%9C%EC%97%90,%EC%83%9D%EC%82%B0%EC%84%B1%EC%9D%84%20%EB%86%92%EC%9D%BC%20%EC%88%98%20%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4.

활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트[TypeScript] | 인사이트리포트 | 삼성SDS