[typescript] 3. 개발 환경 구축 및 테스트 프로젝트
1. 필요 준비물
- node.js
- npm
- typescript
2. node.js 설치
- https://nodejs.org/ko/download/ 에서 다운 받아서 설치
3. npm 설치
- node.js 설치시 기본 적으로 설치가 됩니다.
- 최신으로 업데이트만 해주시면 됩니다.
> node install -g npm@lastest
4. npm을 이용한 모듈 관리 방법
- npm은 node.js 에서 필요한 third party 모듈을 관리해 주는 매니저 입니다.
- npm은 package.josn를 통해어 모듈을 관리합니다.
1) package.json만들기
>npm init [-y 옵션시 기본 값으로 생성 된다]
항목 |
설명 |
package name |
- 패키지 이름 - 기본 값 : package.json이 속한 디렉토리 이름 |
version |
- 현재 패키지 버전 ( 시맨틱 버저닝 형식으로 작성, 메이저.마이너.패치 버전 - 기본 값 : 1.0.0 |
description |
- 패키지 검색(npm search)로 패키지를 찾을때 표시될 패키지의 설명 |
entry point |
- require 함수로 호출될 모듈의 자바스크립트 파일 이름을 입력한다. - 기본 값 : index.js |
test command |
- 스크립트 명령을 입력 할 수 있다. |
git repository |
- 만들려는 패키지의 github 저장소가 있다면 해당 주소를 입력 |
keywords |
- 패키지를 배포한 뒤 패키지 검색이 잘 되도록 관련 키워드를 한개 이상 입력한다. |
author |
- 패키지를 만든 제작자명을 입력 한다. |
license |
- 라이센서 종류를 입력한다. - 기본 값 : ISC(internet Software Consortium) |
2) npm 주요 명령어
- [node.js] 3. npm 모듈 설치(윈도우 기준) 및 node.js 사용자 모듈 만들기 의 3번을 참조
5. typescript 설치 / 업데이트 / 삭제
1) 설치
- [typescript] 1. 설치 를 참조 하세요.
2) 업데이트
>npm outdated -g typescript
3) 삭제
> npm uninstall -g typescript
> npm cache clean
6. Hello World 프로젝트 만들기
1) CMD에서 프로젝트 생성 하기
- typescript는 tsconfig.json을 이용해서 프로젝트를 관리 한다고 볼수 있습니다.
- 그래서 tsconfig.json을 만드는 것이 프로젝트를 만든다고 이해 하면 될 것 같습니다.
(1) tsconfig.json 이란 ?
- 타입스크립트를 컴파일 할 때 필요한 설정을 관리하는 파일 입니다.
- command 창에서 tsc 만 입력하게 되면 기본적으로 tsconfig.json를 찾아서 설정을 읽어 들입니다.
tsconfig.json 검색 경로는 "현재 경로 -> root 디렉토리 경로" 순으로 검색 합니다.
(2) tsconfig.json 생성 하기
> tsc --init
- tsconfig.json 형식
(3) tsconfig.json 를 이용한 컴파일
1-Ex) typescript 파일 합쳐 특정 디렉토리리(dist)에 결과를 남기기
- 소스 코드
- tsconfig.json
- 실행 결과
> tsc 로 바로 실행
> dist 디렉토리 하위에 결과 파일 생성 및 실행 경과
2-Ex) typscript 특정 디렉토리리(dist)에 결과를 남기기
- 1-Ex)의 tsconfig만를 조금 수정 하여 사용
- 실행 결과
> tsc 로 바로 실행
> dist 디렉토리 하위에 개별 파일로 js 파일이 생성 됩니다.
2) VSCode로 프로젝트 생성하기
- VSCode에서는 빌드 작업을 자동화 하기 위해서 taskrunner를 사용합니다.
(1) taskrunner 란?
- VSCode에서 실행 할 작업 단위를 관리 하는데 사용합니다.
- tasks.json을 통해서 작업 할 단위를 관리 합니다.
(2) tasksrunner 설정 방법
- 프로젝트 하위에 .vscode/tasks.json 을 추가해야 합니다
- VSCode의 Configure Task를 사용하여 task.json을 생성 할수 있습니다.
[1]. tsconfig.json 만들기
- tsconfig.json이 존재 해야 VSCode는 현재 프로젝트가 typescript 프로젝트라고 인지하여 task.json을
자동으로 추가 할수 있게 하는 작업 목록을 제공합니다.
> tsc --init
[2]. Configure Task 선택
- Ctrl + Shift + p -> Configure Task 선택
[3]. tasks.json을 만들 설정을 선택
- 2개의 설정이 존재 합니다.
> tsc 감시 : watch 모드 상태에서 ts 파일이 변견될 때 만다 컴파일 합니다.
> tsc 빌드 : ts 파일을 바로 컴파일 합니다.
- 저는 typescript-test 디렉토리를 빌드 할 것 이기 때문에 "tcs 빌드: typescript-test\tsconfig.json"를 선택
했습니다.
<디렉토리 구조>
<tasks.json을 만들 tsconfig.json 선택>
(3) tasksrunner 사용 예제
[1] 테스트 코드 생성
- console.log('hello world')
[2] hello.ts 를 tasksrunner를 사용하여 컴파일 해보기
- 기본 터미널이 bash이면 오류 가 난다. power shell로 해야 합니다.
- bash 일 경우 "\"에 대한 처리를 모하기 때문에 경로를 못 찾는다고 에러가 납니다.
<error TS5058: The specified path does not exist:>
- ctrl + shift + b -> tsc : 빌드 - typescript-test\tsconfig.json 선택
[3] hello.js 실행
(4) tasksrunner default 작업 선택 하기
- 빌드(Ctrl + Shift + B) 에서 사용할 작업(task)이 여러개 일경우 기본으로 실행할 작업이 있다면
<기본 빌드 작업 구성>을 선택해 주면됩니다.
그럼 group 속성이 추가되고 기본 으로 그 작업을 할지 말지를 선택합니다.
- Ctrl + Shift + p -> tasks configure Default Build Task 선택
- group이 추가 됨
(4) 특정 파일만 빌드 하도록 tasks.json 설정 하기
- 간혹 특정 파일만 빌드 해야 하는 경우가 존재 합니다. 이경우에 사용하면 좋습니다.
3) tsconfig 속성 확장 하기
- tsconfig.json은 기본 설정 파일 입니다. 만약 tsconfig.json에 공통 설정을 부모 설정으로 두려면
base.json파일을 만들어 공통으로 사용할 설정을 분리하고, 부모 설정을 자식 설정에서 확장 하려면 extends
속성을 이용 하여 자식에게 상속 합니다.
(1) 공통 설정 파일 base.json
(2) extend 속성을 사용한 자식 설정 파일
'ProgrammingLang > typescript' 카테고리의 다른 글
| [typescript] 6. 연산자 와 디스트럭쳐링(destructuring) (0) | 2018.12.05 |
|---|---|
| [typescript] 5. 제어문 (0) | 2018.12.05 |
| [typescript] 4. typescript 기본 타입과 변수 선언 (0) | 2018.12.04 |
| [typescript] 2. 개요 (0) | 2018.12.01 |
| [typescript] 1. 설치 (0) | 2018.12.01 |