본문 바로가기
Programming/4. JavaScript & React

012_정적 타입 언어와 동적 타입 언어, 그리고 TypeScript

by @sangseophwang 2022. 3. 25.

타입(type)이란?

- 자료형을 뜻한다.
- boolean, string, number, Symbol, Object 등

동적 타입 언어란?

- 대표적인 언어로는 JavaScript, Python 등이 있다.
- 동적 타입 언어의 자료형은 컴파일 시 자료형을 정하는 것이 아니고, 실행할 때 결정한다.

장점
1. 프로그래머들이 타입을 고민할 필요 없이 빠르게 코드를 작성할 수 있다.
2. 런타임까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 유연성이 높다.

※ 런타임
프로그래밍 언어가 구동되는 환경


단점
1. 사전에 버그를 미리 간파하기 어렵다.
2. 실행 도중에 변수에 예상치 못한 타입이 들어와 TypeError를 발생시킬 수 있다.

정적 타입 언어란?

- 대표적인 언어로는 C, C#, C++, Java, 그리고 TypeScript가 있다.
- 간단히 정리하자면 변수 생성 시 타입을 같이 명시해주는 것이다.
- 그리고 미리 타입을 지정했기 때문에 컴파일 시 자료형에 맞지 않는 값이 들어가면 에러를 발생시킨다.

장점
1. 컴파일 시 타입에 대한 정보를 미리 결정했기 때문에 실행속도의 이점이 있다.
2. 타입 에러로 인한 문제점을 초기에 발견할 수 있어 안정성이 있다.

단점 
1. 매번 코드 작성시 변수형을 결정해줘야 하는 번거로움이 있다.

타입스크립트에 대한 빌드업 완료!

위 타입 언어에 대한 설명은 왜 타입스크립트를 최근에 대부분의 회사에서 사용하는지에 대한 빌드업이었다.

1. TypeScript는 동적 타입 언어인 JavaScript의 약점을 보완하기 위해 탄생했다.

자바스크립트는 참 많은 장점이 있다. 프로그램의 표현식을 구성하는 기본 문법이 다른 언어와 비교했을 때 단순하다는 점, 함수형 언어의 높은 표현력을 사용할 수 있다는 점, JSON이라는 강력한 표현력 및 범용성을 가진 데이터 구조가 기본 데이터 구조라는 점, 그리고 다양한 플랫폼(web, app, server, desktop)에서 사용할 수 있는 생태계가 갖춰져 있는 언어라는 점 등 많은 장점을 가진 언어다. 하지만 '프로젝트가 진행될수록 동적 언어인 자바스크립트의 특성상 개발자의 의도대로 정확히 동작하는지, 에러가 발생했는데 어느 부분에서 발생한건지 파악하기 어렵다' 는 단점이 이야기되기 시작했다. 그래서 이러한 단점을 보완하기 위해 TypeScript가 탄생했다.

2. TypeScript의 차별점
- 정적 언어의 특성을 살려 타입을 직접 지정해줘야 한다.
- 이로 인해 값을 메모리에 저장할 때 참조하는 값의 크기를 미리 파악해 메모리를 절약할 수 있게 됐다.
- 또한 타입으로 인해 발생할 수 있는 에러 핸들링이 보다 쉬워졌다.
- 다른 동료들과 협업할 때 코드의 예측이 가능해졌다.
- 브라우저는 JavaScript밖에 모르기 때문에 타입스크립트로 작성한 파일(.ts,.tsx)은 JavaScript로 변환하는 트랜스파일링이 필요하다. 이 과정에서 미리 에러를 잡을 수 있기 때문에 에러의 예측이 쉬워졌다.
- 마이크로소프트가 만들었기 때문에 마이크로소프트가 만든 Visual Studio Code 에디터를 활용해 에러 핸들링에 대한 도움을 보다 많이 받을 수 있다.

간단한 타입 지정 방법

// 1. ':타입' 방식으로 직접 입력한다.
const myName: string = "SEOP";

// 2. interface를 활용한다.
interface PeopleInterface {
  name: string
  age: number
}

// 3. type를 활용한다.
type PeopleType = {
  name: string
  age: number
}

// 4. generic을 활용한다.
function getText<T>(text: T): T {
  return text;
}

getText<string>('hi');
getText<number>(10);
getText<boolean>(true);
반응형

댓글