1/26 목 (@types/Node가 정확히 뭔지 알게 되어 속이 시원함) TIL, TIT

(TypeScript 공부 중)

배운 것:

타입스크립트의 Enum. 일단 Enum에는 숫자형과 문자형이 있다.

타입스크립트 컴파일러는 사실 index.d.ts 파일(들)을 찾아내는 것이 주 목적이고 그러기 위해 엄청난 노력을 한다(?!) → 컴파일러가 어떻게 필요 모듈들을 찾아 타입을 참고하여 트랜스파일 하는지 대략적인 순서를 알게 되었다.

@types/’라이브러리’ 라는 경로명은 역시 컨벤션이었다. 많은 자바스크립트 라이브러리가 타입스크립트 선언 보조 라이브러리를 제공할 때 약속처럼 만들어 넣는. 이 ‘보조’ 라이브러리는 타입스크립트 환경에서 자바스크립트 모듈을 실행하기 위해 타입만 몽땅 정의해서 넣어준, 말 그대로 ‘선언 파일(Declaration files)’이다. 확장자는 .d.ts.

느낀 점:

사실 npx ts-node src/*.ts 명령어로 실행하다가 뜬 Error: Cannot find module './*.ts’ 에러의 원인이 뭔지 파악하려고 알아보던 중이었는데, 죄다 ‘외부 모듈을 임포트할 때’ 나는 에러로써의 정보만 있어서 헛방을 친 것이었다. 직접적인 도움은 되지 않았지만, 그래도 그간 두루뭉술하게 알던 모듈 임포트의 개념과 컴파일러의 작업 과정에 대해 더 알게 되어서 속시원하기도 했다.

캠프 튜터가 라이브로 찍어서 올려준 유튜브 강의를 보며 공부했는데, 실제로는 어떻게 파일들을 떼어내 정리해나가면서 코드를 짜는지, 자잘하게 어떤 식으로 IDE 환경을 만들고 활용하는지 등을 볼 수 있어서 좋았다. 나는 이런 게 그렇게 궁금하다.

(여기 보는 중)

프로그래머스 문제 https://school.programmers.co.kr/learn/courses/30/lessons/86052

타입스크립트 전체 환경에서 중복되는 이름 컴파일 에러 해결 팁

서로 다른 스크립트에서 중복되는 변수명이라고 뜨는 빨간 밑줄을 없애는 방법들

module.exports = { 중복 변수명들 } 로 배출(?)을 해준다.

아니면

tsconfig.json에서 moduleDetection: “force”로 설정하기

에러 Error: Cannot find module './*.ts’ ✔️

발생 상황: npm run start:dev 명령을 실행하니 이렇게 에러가 떴다. 원래는 노드몬을 실행시켜서 src 폴더 내의 모든 타입스크립트 파일에 업데이트 사항이 있을 때마다 ts-node가 실행되어야 한다.

// package.json
"scripts": {
  "start:dev": "npx nodemon -q"
},
"dependencies": { // 없음 }, 
"devDependencies": {
  "@types/node": "^18.11.18",
  "nodemon": "^2.0.20",
  "ts-node": "^10.9.1",
  "typescript": "^4.9.4"
},

// nodemon.json
{
  "watch": ["src"],
  "ext": ".ts,.js",
  "ignore": [],
  "exec": "npx ts-node ./src/*.ts"
}

에러 메세지 전문:

C:\Users\USER\Desktop\Sparta\03.3_typescript_practice_intermmediate>npx ts-node ./src/**/* 
node:internal/modules/cjs/loader:998
  throw err;
  ^

Error: Cannot find module './*'
Require stack:
- C:\Users\USER\Desktop\Sparta\03.3_typescript_practice_intermmediate\src\imaginaryUncacheableRequireResolveScript
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Function.resolve (node:internal/modules/cjs/helpers:109:19)
    at requireResolveNonCached (C:\Users\USER\Desktop\Sparta\03.3_typescript_practice_intermmediate\node_modules\ts-node\dist\bin.js:549:16)
    at getProjectSearchDir (C:\Users\USER\Desktop\Sparta\03.3_typescript_practice_intermmediate\node_modules\ts-node\dist\bin.js:519:40)
    at phase3 (C:\Users\USER\Desktop\Sparta\03.3_typescript_practice_intermmediate\node_modules\ts-node\dist\bin.js:267:27)
    at bootstrap (C:\Users\USER\Desktop\Sparta\03.3_typescript_practice_intermmediate\node_modules\ts-node\dist\bin.js:47:30)
    at main (C:\Users\USER\Desktop\Sparta\03.3_typescript_practice_intermmediate\node_modules\ts-node\dist\bin.js:33:12)
    at Object.<anonymous> (C:\Users\USER\Desktop\Sparta\03.3_typescript_practice_intermmediate\node_modules\ts-node\dist\bin.js:579:5)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\USER\\Desktop\\Sparta\\03.3_typescript_practice_intermmediate\\src\\imaginaryUncacheableRequireResolveScript'
  ]
}

원인: 해결은 했으나 아직 원인이 무엇인지 모르겠다. Mac에서는 저런 경로로 잘 실행된다던데, 이게 힌트일 수 있을까.

시도:

tsconfig.json 에 다음 코드 추가 → 같은 에러가 계속 뜬다.
```
"moduleResolution": "NodeNext" 
또는
"moduleResolution": "Node"
```

nodemon.json 에서 실행 경로명을 바꿔봄

"exec": "npx ts-node ./src/**/*.ts" -> 실패
"exec": "npx ts-node ./src/**/*" -> 실패
"exec": "npx ts-node ./src/*" -> 실패

해결:

애매한 해결 - nodemon.json에서 실행될 경로명을 ./src/ 로 바꾸니 되긴 되었다.

"exec": "npx ts-node ./src/" -> 성공
"exec": "npx ts-node ./src/index.ts" -> 이것도 된다.

선언 파일(Declaration file)이란

TypeScript Declaration File

: 자바스크립트로 작성된 파일을 타입스크립트가 알아들을 수 있도록 필요한 타입 선언을 해준 버전.

: 타입스크립트 환경에서 임포트하여 실행할 수 있도록 자바스크립트 모듈들에 타입(만)을 달아 정리해둔, 말 그대로 ‘(타입) 선언 파일’.

: @types/ 보조 라이브러리 내에 .d.ts 확장자로 정의되어 있는 파일들. 타입스크립트 코드의 타입 추론을 돕는 파일.

Node.js나 jQuery, lodash같이 유명한 자바스크립트 라이브러리는 대부분 @types 라는 별칭으로 타입스크립트 추론이 가능한 보조 라이브러리를 제공한다. 이것을 npm i -D @types/node 같이 설치해서 사용하면 된다.

선언 파일이 없는 자바스크립트 라이브러리같은 경우는 스스로 선언하든가 해야 하는데 고려해야 하는 사항이 많다. 뉴비(와 숙련된) 번역가를 위한 안내서가 있으니 나중에 참고하자(https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)

참조:

@types 라이브러리란? - https://joshua1988.github.io/ts/config/types.html#types-라이브러리의-내부-구조

https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

모듈 구현과 타입 선언

모듈 구현(implement)과 타입 선언(declaration)은 별개라는 것이다. 모듈 구현은 모듈의 동작부를 작성하는 것이고, 타입 선언은 타입스크립트 컴파일러에서 제공하는 타입 검증을 위해 객체의 타입을 서술하는 것이다.

.ts파일로 작성한 스크립트의 경우 모듈 구현과 타입 선언이 동시에 이루어지지만,

.js파일에서는 오로지 모듈 구현만 이루어지고,

.d.ts파일에서는 타입 선언만 이루어진다

거시적인 관점에서 타입스크립트 컴파일러가 하는 일은 타입 선언을 참조하여 모듈을 올바르게 사용하는지 검증하는 것이다. 따라서 사실상 타입스크립트는 모듈 구현부를 불러오는 것이 아니라 타입 선언을 불러오는 것이다.

자, 두가지 패턴의 모듈 불러오기 방식을 살펴보자

import modulename from “modulename”( ES6 모듈 패턴 )이 패턴은 모듈의 타입 선언을 불러오는 동시에 해당 구문을 require("modulename")포맷으로 변환한다(컴파일러 설정에 따라 변경될 수 있다)
⇒ 헐, 이래서 require()만으로 불러왔을 때랑 import … from으로 불러왔을 때랑 컴파일 에러가 뜨는 게 달랐던 건가봐..!

/// <reference types="modulename" />(triple-slash directive)이 패턴은 모듈의 타입 선언만을 불러오며 .js로 변환된 파일에서는 단순 주석으로 취급된다. 보통 글로벌에 구현된 모듈의 타입 선언을 불러올 때 사용한다.

예시:

// node_modules/@types/node/index.d.ts의 코드는 전부 이렇게 생겼다: 
...
/// <reference path="globals.d.ts" />
/// <reference path="async_hooks.d.ts" />
/// <reference path="console.d.ts" />
/// <reference path="dom-events.d.ts" />
/// <reference path="events.d.ts" />
...
/// <reference path="globals.global.d.ts" />

이 두가지 패턴을 통해 모듈을 불러왔을 때 컴파일러가 어떻게 동작하는지 자세히 알아보도록 하자.

(중략)

아래는 키워드만 적어 놓는다:

tsc --traceResolution : 이 명령어로 타입스크립트 컴파일러가 타입 선언 파일을 탐색하는 과정을 볼 수 있다.

tsconfig.json에서 타입 선언 파일 탐색에 관련되 옵션들은:

{
 “compilerOptions”: {
		 “baseUrl”: “”,
		 “typeRoots”: [],
		 “types”: [],
 },
 “files”: [],
 “include”: [],
 “exclude”: [],
}

타입스크립트의 모듈 검색(Module Resolution) : 상대경로, 비 상대경로 모듈 불러오기
- 비 상대경로 모듈 탐색(Non-relative Module Resolution) 과정 : 비 상대경로로 모듈을 불러온 경우, 컬파일러는 다음과 같은 순서로 해당 모듈의 타입 선언 파일(index.d.ts)을 찾는다 (생략)

앰비언트 모듈 선언(Ambient Modeul Declaration) : 선언 파일이 컴파일 시점에 포함(include)된다면 이 모듈에 대한 타입 선언은 앰비언트 모듈 선언 목록에 추가된다.

전체 과정 :

(후략)

참조:

버릴 게 없는 설명에 이해가 아직이라, 그대로 찾아가서 재독 삼독을 하길 권함:

Uploaded by N2T