TypeScript 개념

TypeScript

: 자바스크립트 기반, 정적 타입 문법을 추가한 프로그래밍 언어

 

특징

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

↕ js는 동적 타입의 인터프리터 언어 → 런타임에서 오류를 발견

ts 컴파일러 또는 바벨(Babel)를 통해 js로 변환됨

코드 작성 단계에서 타입을 체크해 오류를 확인하고, 미리 타입을 결정하여 실행 속도가 매우 빠름.

but,  코드 작성 시 매번 타입을 결정해야 해 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸림.  

 

*바벨(Babel) : 호환

: ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 코드로 변환하는 JavaScript 트랜스컴파일러

= 이전 브라우저(실행 환경)에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 도구

- 바벨은 js의 최신 문법 뿐만 아니라 TypeScript나 JSX로 작성된 코드를 변환할 때도 많이 사용된다.

- React의 경우, JSX 문법을 사용해 코딩을 하기 때문에 개발자가 작성한 원본 코드는 브라우저에서 실행되지 않는다.

따라서 Webpack 번들러와 Babel 로더를 이용해 React 프로젝트를 빌드한다.

*트랜스파일러 : 다른 실행 환경에서도 돌아갈 수 있도록 같은 언어를 유지한체 소스 코드의 형태만 바꾸는 과정을 의미

 

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

: JS 기본 문법에 TS 문법을 추가한 언어

유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다.

 

3. 객체 지향 프로그래밍 지원

TS는 ES6에서 사용된 문법을 포함하고 있으며, 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공합니다.

 

 

장점

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

• 에러의 사전 방지
  • 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다.
• 코드 가이드 및 자동 완성(개발 생산성 향상)
  •  작업과 동시에 디버깅이 가능하다

 

2. 자바스크립트 호환

TS는 JS와 100% 호환이 가능 → 프론트, 백엔드 어디든 JS를 사용할 수 있는 곳이라면 TS도 쓸 수 있다.

 

3. 강력한 생태계

TS는 신생 언어임에도, 대부분의 라이브러리들이 TS를 지원하며, 각종 에디터가 TS 관련 기능과 플러그인을 지원한다.

 

4. 점진적 전환 가능

기존 JS프로젝트를 TS로 전환하는데 부담이 있다면, 추가 기능이나 특정 기능에만 TS를 도입하여 프로젝트를 점진적으로 전환할 수 있다 → 코드베이스가 완전히 바뀌도록 준비 기간을 가질 수 있다.

---

TypeScript 문법

// 변수에 타입 설정
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;
}
//옵셔널 파라미터
function log(a: string, b?: string, c?: string) {
 console.log(a);
}

// 추가적인 기본 문법은 아래 참고 주소에서 확인하실 수 있습니다.

---

참고

타입 스크립트

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

바벨 https://bravenamme.github.io/2020/02/12/what-is-babel/ https://www.daleseo.com/js-babel/