혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장의 도움이 됩니다
요즘 채용 공고에 Typescript가 많이 올라오고 선배 개발자분 강의 들으면 취업 전 어느정도 배우는 것 같았다. 그래서 오늘부터 유데미 강의를 기반으로 차근차근 공부하려고한다. 메인 프로젝트에 적용할 수 있을지는 모르겠지만 도전해본다!
파일 확장자
.ts
타입스크립트는 자바스크립트에 타입을 지정함으로써 예측 가능하도록 변환해줄 수 있는 언어이다. 완전히 새롭다기 보다는 예상치 못한 오류를 피할 수 있는 자바스크립트 파일로 컴파일해 준다고 생각하면 쉽다.
실행
tsc <.ts파일이름>
타입스크립트 파일이름과 동일한 자바스크립트 파일이 생성된다.
-> html 파일에는 변환된 자바스크립트 파일을 연결
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="using-ts.js" defer></script>
<!--
브라우저는 자바스크립트만 이해할 수 있으므로 .js를 import 한다.
tsc using-ts.ts 로 생성한 파일이다.
-->
</head>
<body>
<input type="number" id="num1" placeholder="Number 1" />
<input type="number" id="num2" placeholder="Number 2" />
<button>Add</button>
</body>
</html>TypeScript 예시
const button = document.querySelector('button')!;
const input1 = document.getElementById('num1')! as HTMLInputElement;
const input2 = document.getElementById('num2')! as HTMLInputElement;
// ! : null 혹은 undefined 값이 아님을 명시
// as HTMLInputElement : HTML요소 타입을 명시
function add(num1: number, num2: number) {
return num1 + num2;
}
button.addEventListener('click', function () {
console.log(add(+input1.value, +input2.value));
// +를 붙이는 것은 자바스크립트 문법으로 더하기 전 숫자타입으로 변환을 의미
console.log(typeof input1.value);
// 타입스크립트를 적용해도 'string' 으로 출력
});