타입시스템과 타입스크립트에 대해 알아가자 : DAY ONE
🤔 컴파일이 뭔가요?
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) 라고 한다.
.ts
이다.// 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.ts
tsconfig.json
파일로 컴파일 및 타입스크립트 환경을 조정할 수 있다.$ npx tsc -init