타입시스템과 타입스크립트에 대해 알아가자 : DAY ONE
What is Type System?
- 타입 시스템은 프로그램 내에 타입을 이용해 기술된 프로그래머의 여러 의도가 말이 되는지, 서로 모순을 일으키지 않는지 검사(타입 검사type check)하는 시스템이다.
- 적용되는 언어에 따라 타입시스템의 엄격함의 정도가 달라진다. (하나의 예로 Haskell은 Typescript보다 훨씬 더 엄격한 기준을 적용한다.)
JavaScript vs. TypeScript
- 타입스크립트를 자바스크립트와 비교하였을 때 가지는 가장 큰 차이점은 요소들의 타입이 어디에 의해서 결정되는지 이다.
🟨 JavaScript is ...
- 동적 타입 언어.
- 런타임에 의해 변수 타입이 결정된다.
- "런타임(runtime)에 의해 변수가 결정된다" 는 말은 할당되는 값에 의해 변수의 타입이 결정된다는 의미이다.
🟦 TypeScript is ...
- 정적 타입 언어 (자바스크립트처럼 동적 타입도 사용할 수 있다.)
- 타입스크립트는 프로그래밍 언어임과 동시에 컴파일러의 성향을 띄고 있다.
- 자바스크립트의 모든 기능을 지원하면서 컴파일에 의해서 변수의 타입이 정해진다.
- 컴파일 환경에서 오류를 감지하기 때문에 생산성이 높아지는 것이다.
🤔 컴파일이 뭔가요?
TypeScript는 JavaScript 환경에서 실행될 수 없다. 그 이유는 자바스크립트가 실행되는 브라우저가 타입스크립트를 이해하지 못하기 때문이다. 따라서 TypeScript를 Javascript로 바꾸어주는 과정이 필요한데 이를 TypeScript 상의 컴파일이라고 지칭한다.
🟨🟦 예시로 쉽게 이해해보자
자바스크립트는 런타임에 의해 변수 타입이 결정되고 타입스크립트는 컴파일에 의해 변수 타입이 결정된다고...? 😧 알듯 말듯 이해가 안간다면 간단한 예시로 이해해보자.
예를 들어, 두개의 number를 인자로 받아 두 수의 합을 반환해주는 함수 sum을 작성해보자.
// JavaScript
const sum = function(num1, num2) {
return num1 + num2;
}위와 같이 작성한 함수에 number 타입이 아닌 string 타입의 값을 넣어준다면 어떻게 될까?
console.log(sum('10'+'15')); // "1015"우리는 분명히 두 수를 입력받아 그 합을 반환하는 함수를 만들 의도였으나, console.log 안에서 실행된 함수는 문자열을 합치는 함수다 되어버렸다. 만약 이 값이 또 다른 곳에서 사용되는 경우 중간에 의도와는 다른 값이 리턴되면서 이후의 로직이 전부 꼬이는 불상사가 벌어지는 것이다.
그렇다면 TypeScript를 사용하면 어떻게 될까?
const sum = function(num1:number, num2:number) {
return num1 + num2;
}
console.log(sum('10'+'15')); // Error 발생자바스크립트와 똑같이 console.log(sum('10'+'15'))를 실행시키자 에러가 발생한다. 함수의 선언 부분에서 인자의 타입을 number로 정해주었기 때문에 타입이 다른 인자가 들어온 경우 즉시 오류를 발생시키는 것이다.
이처럼 타입스크립트를 통해 변수의 타입을 지정해주면 작성자의 의도와 다른 결과가 나옴으로써 발생되는 오류들을 효과적으로 줄여줄 수 있다. 정말이지 어메이징하다 ㅇㅅㅇ
🔍 런타임(Runtime)과 컴파일타임(Compiletime)
런타임(Runtime)과 컴파일타임(Compiletime)은 소프트웨어 프로그램개발의 서로 다른 두 계층의 차이를 설명하기 위한 용어이다.
프로그램을 생성하기 위해 개발자는 첫째로 소스코드를 작성하고 컴파일(compile)이라는 과정을 통해 기계어코드로 변환 되어 실행 가능한 프로그램이 되며, 이러한 편집 과정을 컴파일타임(Compiletime) 이라고 부른다.
컴파일과정을 마친 프로그램은 사용자에 의해 실행되며, 이러한 응용프로그램이 동작되는 때를 런타임(Runtime)이라고 부른다.⛔ Runtime Error 와 Compillation Error
런타임과 컴파일타임이라는 용어는 종종 서로 다른 두 가지 타입의 에러를 나타내기 위해 사용된다.
컴파일 에러(Compillation Error)는 컴파일러가 이해할 수 없는 코드가 있을 때 발생하는 오류를 말한다. 프로그램이 성공적으로 컴파일링되는 것을 방해하는 Syntax error나 파일참조 오류와 같은 문제들이 Compillation Error에 해당하며, 이런 경우 컴파일러는 Compillation Error를 발생시키고 일반적으로 문제를 일으킨 소스코드 라인을 지시해준다.
만약 어떤 소스코드가 이미 실행가능한 프로그램으로 컴파일 되었다 할지라도, 프로그램의 실행 중에 버그를 일으킬 수 있다. 예를 들자면, divide by 0, 무한 루프 등의 예상치 못한 오류 또는 충돌로 동작하지 않을 수 있다. 이렇게 프로그램 실행 중 수행할 수 없는 작업을 시도할 때 발생하는 오류를 런타임 에러(Runtime Error) 라고 한다.
Typescript does ...
- 크로스 플랫폼 지원: 자바스크립트가 실행되는 모든 플랫폼에서 사용할 수 있다.
- 객체 지향 언어: 클래스, 인터페이스, 모듈 등의 강력한 기능을 제공하며, 순수한 객체 지향 코드를 작성할 수 있다.
- 정적 타입: 정적 타입을 사용하기 때문에 코드를 입력하는 동안에 오류를 체크할 수 있다.(에디터 혹은 플러그인의 도움이 필요하다.)
- DOM 제어: 자바스크립트와 같이 DOM을 제어해 요소를 추가하거나 삭제할 수 있다.
- 최신 ECMAScript 기능 지원: ES6 이상의 최신 자바스크립트 문법을 지원한다.
How to use Typescript?
- 타입스크립트의 확장자는
.ts이다. - TS는 작성 후 타입스크립트 컴파일러를 통해 JS 파일로 컴파일하여 사용된다.
- VSCode(Visual Studio Code)와 WebStorm은 타입스크립트 지원 기능이 내장되어 있다.
- 별도의 설정 없이도 .ts , tsconfig.json 등의 타입스크립트 파일을 인식할 수 있다.
- 코드 검사, 빠른 수정, 실행 및 디버깅 등의 다양한 기능을 바로 사용할 수 있다.
- 단, 컴파일러는 포함되어 있지 않기 때문에 npm을 사용해 별도로 설치해야 한다.
How to start Typescript?
- npm 패키지 중 하나이기 때문에 node와 npm 설치가 필요하다.
- npm을 이용해 typescript 컴파일러를 설치해주어야 한다.
// global
$ npm install -g typescript
// devDependencies
$ npm install -D typescript
// version check
$ tsc --version- 타입스크립트 파일을 경로로 지정하면 해당 파일을 컴파일한다.
$ tsc ./src/hello.ts- 타입스크립트를 전역설치한 것이 아니라면
tsc가 아닌npx tsc명령을 사용해야 한다.
$ npx tsc ./src/hello.tstsconfig.json파일로 컴파일 및 타입스크립트 환경을 조정할 수 있다.
VScode와 WebStorm을 사용하는 경우, tsconfig.json 파일을 프로젝트 루트 경로에 생성하면 에디터에 의해 구성 옵션이 분석된다.
$ npx tsc -initTBC...
- tsconfig 설정에 대한 부분은 더 자세히 알아보고 돌아올 예정.
- 타입추론에 대한 부분도 알아보자.
