쉽게 설명하자면 Javascript + Type 이라고 생각하면 된다.
자바스크립트의 모든 단점을 보완해 만든 언어이다. (JS의 확장버전)
아래 이미지로 쉽게 설명이 된다.
마이크로소프트 라는 든든한 형이 뒷받침 하고있다.
자바스크립트에 비해 초기 세팅이 까다롭고, 꽤 귀찮다.
(컴파일 옵션,모듈 사용 설정 등)
보통 자바스크립트 개발자인 경우 새로운 언어를 따로 배워 적용해야 한다는 단점이 있다.
타입스크립트는 자바스크립트보다 코드를 더 많이 작성해야 한다.
이것은 개발 기간이 늘어나며, 코드를 더 작성하기 때문에 가독성이 더 떨어지는 부작용도 있다.
function addNum(num1, num2) {
console.log(num1 + num2);
}
addNum(); //rersult: NaN
addNum(1); //result: NaN
addNum(1,2); //result: 3
addNum(3,4,5); //result: 7, 뒤에 5는 생략된다.
addNum('hello', 'world'); //result: "helloworld"
위에 코드 처럼 add 함수를 호출하면 자바스크립트는 문제가 있는 코드라 하더라도 어떠한 에러도 없이 실행시켜준다.
뭔가 이상하지 않나..?
addNum 함수의 목적은 숫자 2개 를 받아서 그에 맞는 값을 출력하는게 목적인데.
자바스크립트는 동적인 언어로, 런타임에 타입 결정/오류를 발견한다.
그러나 타입스크립트는 정적인 언어로, 컴파일 타임에 타입 결정/오류를 발견 한다.
아래 링크는 웹에서 타입스크립트를 별도의 설치 없이 테스트할 수 있는 사이트다.
-> https://www.typescriptlang.org/play
에러가 5개나 된다. 하나씩 알아보자
"파라미터 num1은 암시적으로 any 타입으로 선언되었다' 는 의미인데.
우선 Javascript는 any 타입을 기본으로 한다.
그러나 any 타입은 정말 개발자가 이 변수나 파라미터에 무슨 값이 들어올 지 모를 때 쓰는 값이고,
any 타입을 사용하면 Typescript를 쓰는 의미가 없으므로 타입을 지정해주자.
우리는 숫자 2개 를 받아서 쓸 것이므로, num1과 num2 뒤에 숫자 타입을 뜻하는 :number 를 붙여준다.
5번과 6번 에러가 난 줄을 한번 살펴보자
에러의 내용은 "2개의 매개변수가 필요한데, 넌 0개를 넣었어" 라고 한다.
타입스크립트는 자바스크립트와 다르게 컴파일 전에 미리 저렇게 개발자의 실수나 잘못된 코드를 걸러준다.
그리고 'hello'와 'world'를 매개변수로 넘긴 라인을 살펴보면 다음과 같은 에러메세지가 보인다.
"'문자열' 타입의 매개변수는 너가 지정한 '숫자' 타입의 매개변수에 맞지 않아." 라고 우리에게 메세지를 보낸거다.
그래서 'addNum' 함수를 잘못 호출한 코드를 지워준다면. 에러는 없어진다.
위에 코드가 이제 정상적인 코드이다.. 진짜 개조금 설명했는데 피곤하다
다음은 기본 타입에 관해 설명해보는 시간을 갖겠다.
참고한 자료 출처 )
https://fomaios.tistory.com/entry/TS-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8TypeScript%EB%9E%80
코딩앙마님 유튜브채널(https://www.youtube.com/channel/UCxft4RZ8lrK_BdPNz8NOP7Q)