문서의 임의 삭제는 제재 대상으로, 문서를 삭제하려면 삭제 토론을 진행해야 합니다. 문서 보기문서 이동문서 삭제토론 TypeScript (문단 편집) == 자바스크립트와의 차이 == * 타입 선언 기능의 존재 타입스크립트에서는 버그가 일어나기 쉬운 요소의 타입을 선언하여 버그가 일어나는 것을 막아준다. 가령 자바스크립트에서는 타입이 다른 두 변수를 계산을 시켜주면 {{{#!syntax javascript const a = 3; const b = '5'; console.log(a*b) }}}이게 계산이 작동되어 15를 출력하는 기능이 있다. 만일 프로그래머가 이게 다른 언어처럼 계산이 작동하지 않을 것을 의도하고 이렇게 코드를 지었다면 의도치 않은 작업이 이루어지는 버그가 발생하는 것이다. 타입스크립트에서는 {{{#!syntax typescript const a:number = 3; const b:string = '5'; console.log(a*b) }}}이렇게 숫자면 숫자, 문자열이면 문자열이라고 타입을 선언해주어서 계산이 작동되지 못하게 하거나, 컴파일 전에 오류 메시지를 띄우게 한다.[*오류메시지 "The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.; 수리 연산의 우항 타입은 'any', 'number', 'bigint' 혹은 열거형이어야 합니다."] * 예시 [* 타입스크립트와 최신 자바스크립트를 이제 막 시작하는 초보 개발자들을 위해 조언하자면, 아래 소스코드에 있는것과 같은 var 지시어와 let 지시어는 첫 학습에만 익히고 var는 아예 사용하지 말고 let은 반복문 같이 꼭 필요한 곳을 제외하고 사용하지 않는 편이 좋다. 언제, 어떻게 변수가 변하는지, 그리고 언제 그 변수를 다시는 사용하지 않게 되는지, 언제 어떻게 변수가 필요없어지는지 명확하게 제시하기 위해서는 const, 상수 지시어만 사용하는 편이 훨씬 좋기 때문이다. const는 '{}으로 둘러싸인 곳 안에서 변하지 않는 상수'의 개념이다. 또한 const로 상수를 선언했을 때에는 굳이 타입을 선언할 필요가 없는 경우가 많은데 다른 값을 대입할 일이 없기 때문이다. 아래 예시처럼 const에 타입을 굳이 선언하는 경우는 컴파일러가 타입추론에 실패해서 하는 경우 등이다.][* 또한 아래 예시에서처럼 as로 Casting을 해주는 경우도 좋은 사례이지만, 애초에 저런 Casting없이 컴파일러의 타입추론만으로 함수나 변수, 클래스를 사용할 수 있게끔 타입을 정의하는 것이 더 중요하다. 그런 타입정의에 시간이 오래 걸리는것 같아도 결국에는 시간을 몇십배 절약할 수 있다.] * '''JavaScript (ES5)'''[* tsc에서 옵션을 정해주지 않으면 TypeScript는 JavaScript ES5로 변환되기 때문에 const나 let이 var로 바뀐다.] {{{#!syntax javascript var alist = document.querySelectorAll('a'); for (var i = 0; i < alist.length; i++) { alist[i].style.color = '#333' }; var example = document.querySelector('.exampleClass'); example.style.backgroundColor = "#ccc"; document.addEventListener('mousemove', function () { var x = event.clientX; document.querySelector('h1').style.fontSize = (x / 50) + 'px' }); }}} * '''TypeScript''' {{{#!syntax typescript const alist = document.querySelectorAll('a'); for (let i: number = 0; i < alist.length; i++) { alist[i].style.color = '#333' }; const example: HTMLElement = document.querySelector('.exampleClass'); example.style.backgroundColor = "#ccc"; document.addEventListener('mousemove', function (event: MouseEvent) { const x = event.clientX; (document.querySelector('h1') as HTMLElement).style.fontSize = String(x / 50) + 'px'; }); }}}저장 버튼을 클릭하면 당신이 기여한 내용을 CC-BY-NC-SA 2.0 KR으로 배포하고,기여한 문서에 대한 하이퍼링크나 URL을 이용하여 저작자 표시를 하는 것으로 충분하다는 데 동의하는 것입니다.이 동의는 철회할 수 없습니다.캡챠저장미리보기