on
00. 타입스크립트 시작하기
00. 타입스크립트 시작하기
728x90
인프런 이재승 님 타입스크립트 강의를 듣고 여러 레퍼런스를 참고하여 정리한 내용입니다.
1. 타입스크립트란?
자바스크립트의 기능은 모두 지원하면서 정적 타입을 지원하는 자바스크립트의 수퍼셋(superset).
자바스크립트 동적 타입 언어 변수의 type이 런타임에 결정
타입스크립트 정적 타입 언어 변수의 type이 컴파일타임에 결정
동적 타입 언어와 정적 다입 언어는 어떻게 다른가?
정적 타입 언어 진입 장벽 높음(타입 종류나 지정 등 처음부터 배울 양이 많아 일반적으로 높음) 코드의 양이 많을 때 생산성 높음 타입 오류가 컴파일 때 발견 예시: Java, C++, ...
동적 타입 언어 진입 장벽 낮음 코드의 양이 적을 때 생산성 높음 타입 오류가 런 타임 때 발견 -> 사용자에게 버그가 노출될 가능성이 높아짐 예시: Python, PHP, JS, ...
그외 특징
타입스크립트는 마이크로소프트가 개발하고 있고 자바스크립트가 지원하는 기능들은 빠르게 추가된다.
다른 JS 정적 타입 언어들보다 큰 생태계를 갖고 있고
마이크로소프트가 개발한 VS CODE와 궁합이 잘 맞는다.
타입 정의 파일
웬만큼 유명한 라이브러리는 타입스크립트의 타입 정의 파일이 존재한다.
라이브러리에 내장되어 있거나, DefintedlyTyped 라는 깃헙 저장소에 포함되어 있다.
DefintedlyTyped에 추가된 패키지는 @types/name 처럼 앞에 @types 가 붙는다.
npm i @types/name
위와 같이 입력하면 name라는 타입 정의 파일이 설치된다.
참고
2. 타입스크립트를 사용하는 이유: 높은 생산성
컴파일 타임에서 에러 발생 -> 에러 조기 식별 및 조치 가능
const mike = { friends: ['june', 'james']}; const totalFriends = mike.friendsList.length;
위와 같은 자바스크립트 코드가 있다고 해보자.
위 코드는 friendsList라는 잘못된 프로퍼티를 가져오고 있기 때문에
TypeError: Cannot read property 'lenngth' of undefined
라는 에러가 런타임 시에 발생한다.
문제는 이걸 컴파일 타임이 아니라 런타임 떄 나온다는 것이다.
개발 단계에서 미리 발견하고 조치하는 게 아니라 사용자에게 에러가 노출이 될 확률이 높기 때문이다.
하지만 위와 똑같은 코드를 타입스크립트로 작성하면
IDE(VS CODE)가 에러를 감지하고 바로 개발자에게 알려주며, 컴파일 당시 에러가 발생하여
개발자가 자신의 실수를 고칠 수 있게 한다.
컴파일 타임에서 타입이 지정됨
const total = product.
자바스크립트에서는 런타임 이전엔 product의 타입을 알지 못하기 때문에 product가 객체인지 배열인지 알 수 없다.
interface Product {} let product: Product = {} as Product; const totalParts = product.parts.length;
하지만 타입스크립트는 미리 타입을 지정하기 때문에 product의 타입이 무엇인지, 또 그 안에 포함된 속성이 무엇인지도 알 수 있다.
또 리팩토링 시 속성의 이름을 바꾸고자 한다면,
자바스크립트 같은 경우 해당 속성을 찾아바꾸기(command + f) 등의 기능을 이용하지만 이 방법은 실수할 여지가 많다.
타입스크립트는 interface등 미리 정의된 속성만 바꿔주면 IDE가 알아서 바꿔준다.
또 타입 스크립트에서 코드는 타입들로 묶여 있기 때문에 파일들을 오가며 탐색하기도 쉽다.
3. 타입스크립트 설치부터 컴파일까지
타입스크립트 설치 및 셋업
일단 node.js 공식홈페이지를 통해 node.js 를 설치한다.
패키지 다운로드를 위해 package.json 파일이 설치.
npm init -y
타입스크립트 설치
npm i typescript
타입스크립트 설정 파일 설치 -> tsconfig.json 이라는 파일 생성
npx tsc --init
여기서 npx 라는 명령어는 node_modules 밑에 .bin이라는 폴더 밑 특정 바이너리(여기선 tsc)를 실행해준다.
tsconfig.json 파일을 살펴보자
target이라는 속성은 컴파일 타겟이다.
{ "compilerOptions":{ "target": "es5", // es5로 컴파일하겠다는 뜻이다. "module": "commonjs", // 모듈 방식. 다른 방식도 있다. "strict": true, // 별다른 이유가 없다면 true로 한다. 타입스크립트의 장점인 정적 타입화를 잘 할 수 있기 때문. 단 JS -> TS로 마이그레이션 하는 경우, strict는 false로 해두고 세부 strict옵션들을 하나하나 true로 바꿔 가는 것도 방법이 될 수 있다. } }
타입스크립트 컴파일
ts 파일을 컴파일할 때는 아래 명령어를 입력한다.
npx tsc
그럼 ts 파일에 해당하는 js 파일이 하나 생성된다.
const v1 = 123; const v2 = () => console.log('123');
위와 같은 ts 파일을 컴파일 하면
"use strict"; var v1 = 123; var v2 = function () { return console.log('123'); };
위와 같이 변경되는데, 이건 tsconfig.json 에서 target이 es5로 설정되어 있기 때문이다. es6로 변경후 다시 컴파일하면
"use strict"; const v1 = 123; const v2 = () => console.log('123');
위와 같이 es6 문법들이 사용되어 적용된다.
또한
const v1: number | string = 123; const v2 = () => console.log('123');
위와 같이 타입 정의를 해도
"use strict"; const v1 = 123; const v2 = () => console.log('123');
위와 같이 컴파일 결과는 달라지지 않는데, 이는 타입 정보는 컴파일 타임에만 사용되고 결과코드에는 제거된다.
lodash 설치
npm i lodash npm i @types/lodash
lodash만 설치했을 때는 타입 정의 파일이 lodash 내부에 없어서 IDE가 타입을 읽어오지 못한다.
이때 DefinitelyTyped에 등록이 된 라이브러리라면 @types/name으로 타입 정보를 받아올 수 있다.
npm i @types/lodash
이걸로 lodash의 타입 정보를 받아오면 VS CODE가 lodash의 타입정보를 읽어올 수 있게 된다.
참고
4. 타입스크립트 실행 방법 및 몇 가지 팁
타입스크립트 실행법: 1. npx tsc
컴파일 -> js 파일 생성 -> node.js로 실행
2.ts 파일 생성 npx tsc node 2.js
타입스크립트 실행법: 2. VSC 익스텐션
VSC 익스텐션을 이용하는 방법이 있다.
VSC 익스텐선 code runner 인스톨 npm 파키지 ts-node 다운
npm i ts-node
VSC 설정에서 executorMap 검색 후
Code-runner: Executor Map Set the executor of each language.
옵션 선택 후
setting.json 파일에 아래 옵션 입력
{ "code-runner.executorMap": { "typescript": "node_modules/.bin/ts-node" } }
이후 실행하고 싶은 타입스크립트 파일로 이동해서 control + option + n 을 클릭하면 실행된다.
타입스크립트 실행법: 3. 타입스크립트의 플레이그라운드
타입스크립트의 플레이그라운드 사이트를 이용하는 것이다.
https://www.typescriptlang.org/play
위 주소로 접속
몇몇 단축키
Auto import -> import하고자 하는 변수 혹은 함수를 입력하고 command + .
또한 한 파일 안에 const로 선언된 동일한 이름의 변수가 있으면 에러가 발생한다.
이때 export {} 를 어느 한 파일 위에 적어주면
타입스크립트는 해당 파일을 모듈로 인식하여 변수의 스코프가 해당 파일로만 제한되게 된다. 따라서 에러가 발생하지 않게 된다.
728x90
from http://ryusm.tistory.com/148 by ccl(A) rewrite - 2021-11-22 19:01:30