타입스크립트를 왜 쓸까
타입스크립트도 결국 자바스크립트이다.
타입스크립트도 자바스크립트와 크게 다르지 않다. 따지고 보면 JS의 확장 느낌
자바스크립트에 타입에 대한 내용을 확장시킨것이 타입스크립트이다.
타입스크립트는 컴파일 후에 자바스크립트 파일을 떨군다.(tsc -w) 결과적으로 JS파일을 생성한다는 점에서 왜 굳이 타입스크립트를 쓰는지에 대한 의문이 생기는데 그 의문을 해결해보자.
다음과 같은 함수가 있다고 하자
function sum(x, y) {{
return x + y;
}
sum 함수가 파라미터로 어떤타입의 인자를 받는지, 어떤타입으로 리턴해주는지 명확하지가 않다.
자바스크립트는 dynamic typing을 지원하고 있다. 예를 들어 해당 함수에 x =3 , y = '5' 값을 인자로 넘겨줬을때 자바스크립트는 친절하게도 에러를 띄우지 않을 것이다.
그렇다면 결과로 출력된 35는 어떤타입일까?? 명확하지가 않다.
위 함수를 타입스크립트 관점에서 보자
function sum(x: number, y:number) {
return x + y;
}
타입스크립트는 인자로 어떤타입을 받을것인지 명확히 보여준다. 컴파일 단계에서 오류를 잡을 수 있고 명시적인 타입 지정은 개발자의 의도를 명확하게 코드로 나타낼 수 있다. 디버깅도 쉬워지겠지?
TypeScript
1. Type
타입스크립트는 닉값처럼 타입을 직접 지정해주고 컴파일 시점에서 에러를 잡을 수 있다.
const name : string = 'hansol'
const age : string | number = "30"
변수에 string 값이 아닌 다른 타입을 지정하면 에러가 발생한다.
' | ' or 조건으로 타입을 여러개 가질수도 있다.
2. bug
자바스크립트의 버그 중 15%를 타입스크립트의 사용으로 예방할 수 있다는 연구가 있다고 한다. 자바스크립트는 타입을 지정해주지 않기 때문에 동작하면서 나도 모르는사이 형변환이 일어날 수도 있고 그러한 현상때문에 의도치 않은 에러가 발생할 수 있다. 타입스크립트는 타입을 명확하게 지정해주기 때문에(에러 로그도 친절하다) 에러를 사전에 방지할 수 있다.
Javascript | Typescript |
동적 | 정적 |
인터프리터 언어 | 컴파일 언어 |
독립적으로 사용가능 | 자바스크립트에 의존적(자바스크립트로 컴파일) |
유연성(타입에 제한 없음) | 더 나은 구조와 간결함 |
.js | .ts |
간단한 프로젝트에 적합 | 대형 프로젝트에 적합 |
'javascript' 카테고리의 다른 글
[v8] V8엔진(Chrome V8) (0) | 2023.01.25 |
---|---|
[javascript] jQuery dynatree(트리구조) (1) | 2022.12.12 |