❓오늘 공부한 내용
타입스크립트 / Typescript로 블록체인 만들기 (노마드코더)
⚙️ 타입스크립트 설정하기
타입스크립트는 어디에 설정해야하고 어떤 것들을 설정해야 하는지를 배웠다. 물론 React나 NextJS같은 프레임워크나 라이브러리를 사용한다면 자동으로 웹팩에 설정이 되어있기에 딱히 설정을 건드릴 필요는 없다. 하지만 정해준대로가 아닌, 무언가 변경하고 싶은 설정이 있을 수도 있기 때문에 일단 설정하는 방법에 대해 알아둘 필요가 있을 것 같다.
일단 타입스크립트 설정을 공부할 파일을 만든다.
npm init -y //초기화된 package.json 만들어졌다.
npm i -D typescript //타입스크립트를 설치했다!그리고 루트에 src폴더를 생성해주고 index.ts파일을 만들어준다.
index.ts 파일에는 정말 간단한 화살표 함수를 작성했다.
const Hello = () => "hello!"
그러고 나서 다시 터미널에서 타입스크립트 설정 파일을 설치해준다.
touch tsconfig.json //타입스크립트 설정 파일. 이름은 수정될 수 없다.🔎 tsconfig.json
tsconfig.json는 해당 프로젝트의 루트에 있어야 한다. 해당 파일에서 설정한 옵션들로 프로젝트가 자바스크립트로 컴파일된다.
자 이제 tsconfig.json로 들어가면 가장 먼저 컴파일할 파일이 있는 "주소"를 적어준다.
✅ include, exclude
{
"include": ["src"], //이제 타입스크립트는 src안에 있는 모든 파일들을 자바스크립트로 컴파일 할 것이다!
}다만 exclude라는 설정도 있었다.
files과include모두 지정되어 있지 않다면 컴파일러는 기본적으로exclude속성을 사용하여 제외된 것은 제외하고 모든 TypeScript (.ts,.d.ts 그리고 .tsx) 파일을 포함하는 디렉토리와 하위 디렉토리에 포함시킵니다.
✅ compilerOptions
compilerOptions 속성은 생략될 수 있으며 생략하면 컴파일러의 기본 값이 사용된다고 한다.
{
"compilerOptions": {
"outDir": "build" // 컴파일된 "자바스크립트" 파일들을 어디에 생성할 것인지 설정해준다. 여기서는 build라는 폴더 안에 생성한다고 설정되었다.
}
}그러고 나서 package.json으로 가서 기존에 있던 script 코드를 지우고 아래 코드를 작성해 터미널에서 돌아가는지 확인할 수 있다.
"script": {
"build": "tsc"
}
// npm run build 실행하면 build 폴더가 생성되고 컴파일된 ts파일 코드가 들어가있음을 확인할 수 있다.var hello = function () {return "hi"};위에 예시로 들었던 화살표함수는 이렇게 컴파일 되었다. 아주 낮은 버전의 es3이다.
디폴트로 es3이 설정되어 있지만 다른 버전으로도 설정 가능하다.
{
"include": ["src"], //이제 타입스크립트는 src안에 있는 모든 파일들을 자바스크립트로 컴파일 할 것이다!
"compilerOptions": {
"outDir": "build", // 컴파일된 "자바스크립트" 파일들을 어디에 생성할 것인지 설정해준다. 여기서는 build라는 폴더 안에 생성한다고 설정되었다.
"target": "ES6", //어떤 자바스크립트 버전으로 컴파일 할건지 설정
"lib": ["ES6", "DOM"] //목표로 하는 실행환경 설정, 자바스크립트 코드가 어디에서 동작할 것인지 알려줌. 브라우저 환경에서 ES6를 쓸 것이라고 미리 알려줌. 그럼 타입스크립트는 `document`가 갖고 있는 모든 이벤트와 내장 메소드를 보여준다.
}
}"lib": ["ES6", "DOM"]
목표로 하는 실행환경 설정, 자바스크립트 코드가 어디에서 동작할 것인지 알려준다. 위와 같은 예시는 브라우저 환경에서 ES6를 쓴다는 뜻이다. 그럼 타입스크립트는 document가 갖고 있는 모든 이벤트와 내장 메소드를 자동완성으로 보여주고. lib.dom.d.ts에 들어가 자세하게 살펴보면 타입까지 모두 지정되어있다는 것을 볼 수 있다. 그리고 이 lib.dom.d.ts이 바로 다음에 설명할 declaration files(정의파일)이다.
"DOM"을 사용하지 않으면 Node.js를 위한 백엔드를 개발하는 것이라고 여겨져 타입스크립트는 자동완성 기능을 제공하지 않는다.
Declaration Files
자바스크립트 이벤트나 메소드의 타입들을 정의한 파일을 Declaration Files라고 말한다.
다양한 패키지나 프레임워크와 라이브러리는 자바스크립트를 기반으로 만들어졌기 때문에 타입스크립트는 자바스크립트 코드를 이해할 수 없다. 그래서 자바스크립트 기반의 코드이더라도 타입스크립트에서 사용할 수 있게 자바스크립트 코드의 모양을 설명한 타입 정의가 된 파일을 만든 것이다.
이러한 타입 정의는 타입스크립트가 자바스크립트 코드와 API 타입을 이해할 수 있게 만들어준다.
{
"include": ["src"],
"compilerOptions": {
"outDir": "build",
"target": "ES6",
"lib": ["ES6", "DOM"],
"strict": true,
"allowJs": true
}
}
"strict": true
이 설정은 코드를 굉장히 강하게 타입 보호한다. 에러가 날 것 같은 부분은 모두 에러로 처리한다.
아래 예시로 다른 JS파일에서 TS파일로 import를 했을 때 파일 경로 부분이 에러가 난 것을 볼 수 있을 것이다.
// myPackage.js ** 자바스크립트로 된 node module
export function init(config) {
return true;
// index.ts
import { init } from "myPackage"; // myPackage Error!
"strict": "true"로 설정해놓는다면 만약 어떤 자바스크립트 코드에 Declaration Files(정의 파일)이 없는데 타입스크립트 파일에서 임포트해 사용할 경우 에러를 발생시킬 것이다. 왜냐하면 타입 정의가 되어 있지 않기 때문에 타입스크립트는 이게 무슨 코드인지 이해하지 못하기 때문이다.
만약 어떤 자바스크립트 함수 파일을 만들었고 이 함수를 다른 타입스크립트에서 사용하고 싶을 경우 d.ts파일에 정의해줘서 타입스크립트에게 이해시켜야한다.
정말로 실행해보니 자바스크립트에는 에러가 발생하는 한편 타입스크립트로 함수를 만들어 import 했을 때는 에러가 나지 않는 것을 확인할 수 있었다!
만약 자바스크립트 코드를 만들어 이해시키고 싶다면
[해당문서이름].d.ts 파일을 만들어 타입을 정의해주면 된다.
declare module "minus" {
function minus(num: number): number;
function separate(string:string, separator: RegExp|string, limit: number): Array<string|RegExp|number>
function categorize<T>(object:Object, path: Array<T>|string): boolean;
function filter<T>(array:Array<T>, predicate: Function): Array<T>
}
// minus는 function, num는 number, 리턴값은 number라고 타입 정의!만약 복잡한 경우 interface 등 다양하게 사용하면 된다.
직접 d.ts파일을 만드는 경우는 많이 없겠지만(보통 패키지 다운받으면 정말 대개는 정의 파일이 있음!) 타입스크립트에 자바스크립트로 된 모듈 코드를 어떻게 이해시켰는지 알아볼 수 있었다.
그런데 패키지를 다운받는 경우가 아니라도 자바스크립트 파일을 타입스크립트 파일로 이전하려고 할 때가 있다.
// myPackage.js ** 자바스크립트 파일
export function init(config) {
return true;
// index.ts
import { init } from "./myPackage"; // myPackage Error!
node module이 아니라 자바스크립트 파일인 경우에도 에러는 발생한다.
{
"include": ["src"],
"compilerOptions": {
"outDir": "build",
"target": "ES6",
"lib": ["ES6", "DOM"],
"strict": true,
"allowJs": true
}
}
이러면 타입스크립트에서 자바스크립트 파일을 임포트 해서 쓸 수 있게 되는데, 왜냐하면 타입스크립트가 타입을 추론하기 떄문이다. 이렇게 타입스크립트와 자바스크립트를 섞어서 쓰려고 하는 경우에 이렇게 사용할 수 있다. 섞어서 쓰려고 하는 경우는 기존의 프로젝트가 자바스크립트 코드로 되어있는데 새로운 코드를 추가할 때 타입스크립트로 타입 보호를 받고 싶어하는 경우가 있을 수 있다. 그런 경우 사용한다. 타입스크립트는 자바스크립트 코드도 보호해준다.
🔎 JSDOC: @ts-check
@ts-check는 타입스크립트에게 자바스크립트 파일을 확인하라고 알려준다. 자바스크립트 파일에서 타입스크립트 보호 장치를 사용하고 싶은 경우에 JSDoc을 사용한다.
JSDoc은 코멘트로 이루어진 문법이며 함수 바로 위에 코멘트를 적어주면 된다. 그리고 타입스크립트가 이 코멘트를 체크할 수 있다.
/**로 ts-check이 자동완성 된다.
// init.js 파일
// @ts-check
/**
* @param {object} config
* @param {boolean} config.debug
* @param {string} config.url
* @returns {boolean}
*/
export function init(config) {
return true;
} 만약 계속 에러가 발생한다면
tsconfig.json파일에서
"compilerOption": {
//...기타 다른 설정
"allowJs": true,
}으로 설정되어있는지 확인!
오늘 배운 것들 총정리
- 타입스크립트 동작 원리와 설정
타입스크립트는 자바스크립트 코드를 좀더 타입 보호해주는 진화된 언어이다. 자바스크립트 코드로 컴파일해주는 과정이 거치며 변환된 코드는 ES3로 디폴트 설정되어있다. 이런 설정들은 tsconfig.json파일에서 변경할 수 있다.(파일 이름 바꾸면 안됨!) 이 설정 파일에서 컴파일된 자바스크립트 코드를 어디로 내보낼 것인지, 어떤 자바스크립트 버전으로 컴파일 할 것인지, 어떤 실행환경에서 동작하는 것인지 등등을 설정할 수 있다.
- 자바스크립트 코드이더라도 타입스크립트 같은 타입 보호 받기1
타입스크립트가 등장하기 전 짠 코드이지만 타입 보호를 받고 싶은 경우 자바스크립트 코드에 대한 타입 정의를 한 파일을 만들면 된다. 그것을 Declaration Files(정의 파일)이라고 부르며, 폴더에[파일명].d.ts이름으로 된 파일을 만들면 된다.
최근에는 npm에서 다운받을 때 많이 추가되어 있는 추세다.
만약 없다면@types/node를 다운받으면 된다.
- 자바스크립트 코드이더라도 타입스크립트 같은 타입 보호 받기2
@ts-check인 경우
[파일명].d.ts와 같은 파일을 만들지 않고도 타입 보호를 받을 수 있는 경우가 있는데 JSDoc를 사용하면 된다.
JSDoc은 해당 자바스크립트 파일 상단에 각 타입들을 명시해주면 된다. 설정에서 "allowJs": true도 잊지 말고!
봐주셔서 감사합니다!🙂🙂
