JavaScript는 엄격한 규칙이 없으며 읽기 쉽고 또한 사용성도 좋아서 유명한 언어입니다. 그러나 JavaScript를 사용하는 프로젝트가 커지거나 팀 단위로 진행을 하거나, 오류를 최소한으로 잡으려 할 때는 JavaScript의 장점들이 발목을 잡게 됩니다.
TypeScript는 JavaScript으로부터 위의 문제를 해결하기 위해, 변수에 어떤 데이터 타입이 들어갈 것인지를 정할 수 있어 예측이 가능하며 읽기 쉽도록 만든 것입니다.
TypeScript 환경 설정
제 PC의 현재 상태입니다. 이는 사용자마다 다를 수 있습니다.
코드 에디터 : VScode
Node.js 버전 : 12.16.1
npm 버전 : 6.14.4
TypeScript 설치하기
콘솔을 열어서 아래의 명령어를 실행해주시면 됩니다.
>npm install -g typescript
사용자의 선택에 따라 -g 옵션은 제외하시고 typescript를 설치하시면 됩니다.
VScode 설정
package.json 생성
작업을 진행할 디렉터리에서 다음의 명령어를 통해 package.json을 만들어 줍니다.
>npm init
{
"name": "typescript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"author": "",
"license": "ISC"
}
저는 위와 같이 package.json이 생성되었습니다.
.gitignore 생성 (선택)
저는 GitHub에 올리기 위해서 .gitignore파일도 생성했습니다.
.gitignore 파일은 다음의 링크를 통해 만들었습니다.
https://github.com/github/gitignore/blob/master/Node.gitignore
github/gitignore
A collection of useful .gitignore templates. Contribute to github/gitignore development by creating an account on GitHub.
github.com
tsconfig.json 생성
해당 파일은 node.js를 평범하게 사용하고 import, export를 할 수 있게 하는 것입니다.
{
"compilerOptions": {
"module": "commonjs",
"target": "ES2015",
"sourceMap": true
},
"include": ["index.ts"],
"exclude": ["node_modules"]
}
compilerOptions는 TypeScript의 Compile사항들을 명시한 것입니다.
- module : node.js가 택한 commonjs방식으로 module을 컴파일합니다.
- target : JavaScript의 ES2015 버전으로 컴파일합니다.
- sourcemap : sourcemap 처리를 합니다. 빌드 파일과 원본 파일을 서로 연결시켜주는 기능입니다. (참고자료의 링크 참고)
- include : TypeScript에 어떤 파일들이 컴파일 과정에서 포함되는지 알려줍니다.
- exclude : TypeScript에 어떤 파일들이 컴파일 과정에서 포함되지 않는지 알려줍니다.
index.ts
TypeScript의 확장자 명은 ts입니다.
컴파일
다음의 명령어를 통해서 TypeScript는 컴파일됩니다.
>tsc
tsc를 통해 index.ts를 컴파일하면 index.js와 index.js.map이 생성됩니다.
package.json에 추가
일반 적으로 Node.js는 TypeScript를 이해하지 못하기 때문에 JavaScript로 컴파일하는 작업이 필요합니다. 따라서 아래와 같이 package.json을 수정하여, JavaScript를 실행하듯 TypeScript를 실행하도록 만들겠습니다.
{
"name": "typescript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js",
"prestart": "tsc"
},
"author": "",
"license": "ISC"
}
npm start 명령어를 입력하면 node는 prestart를 먼저 수행하여 TypeScript를 JavaScript로 변환하고, 변환된 파일을 수행합니다.
# 참고 자료
https://www.typescriptlang.org/index.html
TypeScript - JavaScript that scales.
State of the art JavaScript TypeScript offers support for the latest and evolving JavaScript features, including those from ECMAScript 2015 and future proposals, like async functions and decorators, to help build robust components. These features are avail
www.typescriptlang.org
https://academy.nomadcoders.co/courses/enrolled/303219
Typescript로 블록체인 만들기
[중급] JavaScript
academy.nomadcoders.co
소스 맵
Source Map | 웹팩 핸드북
소스 맵 소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요? 정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다. 소스 맵
joshua1988.github.io
# 작성 록
2020.04.03
요즘은 시간표를 만들어 공부를 진행하니 훨씬 더 효율적인 것 같습니다. 꼭 시간표를 지키는 것은 아니지만 하루의 목표를 설정해놓고 진행하니 의욕이 더욱 생기는 것 같습니다.