작년 유데미에서 블랙 프라이데이 기념으로 세일 행사 중이길래 냅다 타입스크립트 강좌를 샀었다. 한참 프로젝트 진행중일 때라 프로젝트 끝나면 봐야지~ 하고 샀었다가 드디어 오늘 첫 스타트를 끊었다. ㅋㅋㅋ 무리하게 진행 할 생각은 없어서 딱 소개정도만 봤지만... 기억보단 기록을 남겨야지... ㅎㅎ 그래서 간단하게라도 기록한다!
목차
- 타입스크립트란?
- 왜 써야하는 걸까?
- 어떻게 사용하는 걸까?
타입스크립트란?
MS에서 개발한 자바스크립트의 슈퍼셋(Superset) 프로그래밍 언어
자바스크립트의 슈퍼셋이란, 자바스크립트를 기반으로 만들어졌고 자바스크립트의 장점과 새로운 기능들을 더해져서 만들어진 프로그래밍 언어라는 의미다.
왜 써야하는 걸까?
타입스크립트의 가장 큰 단점은 브라우저같은 자바스크립트 환경에서 실행을 하지 못한다는 점이다. 그럼에도 불구하고 써야하는 이유는 무엇일까? 먼저 타입스크립트를 어떻게 사용하는지 알아야 한다. 타입스크립트로 작성한 코드를 컴파일하면 자바스크립트가 만들어지고, 그 자바스크립트를 브라우저에 실행시킨다.
한 줄로 요약하자면 아래와 같다.
"타입스크립트 작성 -> 컴파일 -> 자바스크립트 자동 생성 -> 자바스크립트 실행"
한 번 걸쳐서 자바스크립트가 생성되기 때문에 에러가 있을 경우 실행하기 전 미리 체크할 수 있어 도움이 된다.
그리고 이름에서부터 알 수 있다시피 type 을 추가한다. 타입을 추가하면 논리적 오류를 좀 더 명확하게 잡아낼 수 있다.
어떻게 사용하는 걸까?
- 타입스크립트 다운받기 (TypeScript 공식 홈페이지)
$sudo npm install -g typescriptindex.html파일 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Study TypeScript</title>
<script src="app.js" defer></script> //! defer: app.js가 존재하면 실행시킴
</head>
<body></body>
</html>app.ts파일 생성
console.log('Hello TypeScript..!');- 터미널에 아래와 같이 입력하면
app.js가 자동 생성됨
$tsc app.tsindex.html실행
개발자 도구 - 콘솔을 열어보면 작성된 걸 확인할 수 있다!
๑•‿•๑