study: js module 시스템의 2가지 변경법(pacakge.json, tsconfig.json), ts-node 사용(-g)

Author: dltlaos11

EF-TS/ch01/01/01.js

@@ -0,0 +1,8 @@
+"use strict";
+const states = [
+    { name: 'Alab', capital: "mont" },
+    { name: 'Alab', capital: "mont" },
+];
+for (const state of states) {
+    console.log(state.capital);
+}

EF-TS/ch01/02/02.js

@@ -0,0 +1,16 @@
+"use strict";
+// function add(a, b) {
+//     return a + b;
+// }
+// add(10, null);
+// ----------------------------------------------------------------
+// const x: number = null
+// ----------------------------------------------------------------
+const el = document.getElementById('status');
+// el.textContent = 'Ready'; Object is possibly 'null'
+if (el) {
+    el.textContent = 'Ready'; // OK, null has been excluded, const el: HTMLElement
+}
+el.textContent = 'Ready'; // OK, we've asserted that el is non-null, 
+// const el: HTMLElement | null, null이 아니라 단언했으니 htmlEle
+// !. 강제 형변환

README.md

@@ -2132,6 +2132,35 @@ export = jQuery;
 - `export default axios`로 되어 있다면 아래와 같이 `import` 가능
   - `import axios from 'axios';`
 
+#### Error
+
+```ts
+모듈 '"/Users/okpanda/git/Typescript-Study/axios"'에는 기본 내보내기가 없습니다.ts(1192)
+// tsconfig.json에서 옵션 변경
+"moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
+(node:4703) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
+// package.json 추가
+"type": "module",
+```
+
+- `tsconfig.json`에서 `"module": "ES2022" -> "module": "CommonJS"` 설정을 바꾸어주어더니 `package.json`에서 추가한 `"type": "module",`때문에 에러가 났다.
+
+  - `Typescript는` 기본적으로 ES모듈을 지원하며, js의 모듈 시스템을 변경하는데(`ES` or `CommonJS`) 2가지 방법이 존재
+    - `package.json`에서 `'types'필드`를 사용하여 바꿀 수 있음.
+      - `"type": "module"`은 `ES 모듈 시스템`을 사용하고 있음을 나타내며, `"type": "commonjs"`는 `CommonJS 모듈 시스템`을 사용하고 있음을 나타냄
+    - `tsconfig.json: "module"` 필드를 사용하여 `TypeScript` 컴파일러에게 `JavaScript` 파일을 어떤 모듈 형식으로 생성할지 지시할 수 있다.
+      - `"module": "ES2022"`는 `ES 모듈 시스템`을 사용하여 `JavaScript` 파일을 생성하고, `"module": "CommonJS"`는 `CommonJS 모듈 시스템`을 사용하여 `JavaScript` 파일을 생성
+
+- `"package.json"` 파일에서 `"type": "module"`을 추가하는 것은 해당 프로젝트가 `ES 모듈 시스템`을 사용한다는 것을 명시하는 것
+
+  - 이것은 `Node.js`에서 기본적으로 `CommonJS` 모듈 시스템을 사용하는 것과는 다르다.
+
+- `ES 모듈 시스템`은 `"import"` 및 `"export"` 구문을 사용하여 모듈을 가져오고 내보내는 데 사용된다. 반면에 `CommonJS` 모듈 시스템은 `"require"` 및 `"module.exports"`를 사용한다.
+
+- 따라서 `"type": "module"`을 추가하면 해당 프로젝트의 `JavaScript` 파일은 `ES 모듈 시스템`의 규칙을 따르게 되며, `"import"` 구문을 사용하여 외부 패키지를 가져올 수 있다. 그래서 `"axios"`와 같은 패키지를 `"import"`를 사용하여 가져올 수 있게 된다.
+
+- `"ReferenceError: exports is not defined in ES module scope"`와 같은 오류는 `CommonJS 모듈 시스템`을 사용할 때 발생하는 오류로, `"exports"`라는 변수가 ES 모듈 시스템에서는 정의되어 있지 않기 때문에 발생, `"type": "module"`을 추가하면 `Node.js`는 `ES 모듈 시스템`으로 인식하므로 `CommonJS` 관련 오류가 발생할 수 있다.
+
 ### 다양한 방식으로 사용 가능한 axios
 
 - 브라우저(), node 양측에서 요청을 보낼 떄 사용 가능
@@ -2206,3 +2235,61 @@ export class Axios {
   - `axios();`
   - `axios.get();`
   - `axios.get;` `axios.delete;` 는 `class Axios`에 들어있다.
+
+axios.ts
+
+```ts
+import axios from "./node_modules/axios/index";
+
+(async () => {
+  try {
+    const res = await axios.get("https://jsonplaceholder.typicode.com/posts/1");
+    console.log(res);
+  } catch (error) {}
+})();
+```
+
+axios.js
+
+```js
+"use strict";
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+const axios_1 = __importDefault(require("axios"));
+(async () => {
+  try {
+    const res = await axios_1.default.get(
+      "https://jsonplaceholder.typicode.com/posts/1"
+    );
+    console.log(res);
+  } catch (error) {}
+})();
+
+🟠response
+
+ export interface AxiosResponse<T = any, D = any> {
+  data: T;
+  status: number;
+  statusText: string;
+  headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
+  config: InternalAxiosRequestConfig<D>;
+  request?: any;
+}
+```
+
+tsconfig.json
+
+```ts
+"module": "ES2022" -> "module": "CommonJS"
+```
+
+- js변환(`npx tsc`), `node axios.js`가 귀찮으면, `npm i -g ts-node`
+  - `-g`옵션을 통해 `npx ts-node axios`가 아닌 `ts-node axios`가 가능
+  - `npx는` `npm` 패키지를 실행하는 데 사용되는 도구
+  - 일반적으로 npm 패키지를 전역으로 설치하지 않고 특정 프로젝트에서만 사용하려는 경우에 사용, npx를 사용하면 로컬 프로젝트에 설치된 패키지를 간단하게 실행할 수 있다.
+  - `npx를` 사용하면 전역 설치된 패키지를 찾아 실행할 필요가 없으며, 로컬 프로젝트의 패키지를 사용할 때 편리, 만약 전역으로 ts-node를 설치했다면 npx를 사용하지 않고 ts-node axios.ts로 실행할 수 있다.
+- `__importDefault`: CommonJS랑 ES2015Module 둘 다 지원하기 위한 트릭

axios.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+const axios_1 = __importDefault(require("axios"));
+(async () => {
+  try {
+    const res = await axios_1.default.get(
+      "https://jsonplaceholder.typicode.com/posts/1"
+    );
+    console.log(res);
+  } catch (error) {}
+})();

axios.ts

@@ -1,3 +1,8 @@
-import axios from "./node_modules/axios/index";
+import axios from "axios";
 
-axios.get;
+(async () => {
+  try {
+    const res = await axios.get("https://jsonplaceholder.typicode.com/posts/1");
+    console.log(res.data);
+  } catch (error) {}
+})();

first.js

@@ -1,19 +1,31 @@
 "use strict";
-let a = 'hello';
-a = 1234;
-// 에디터가 자동으로 타입검사를 해준다. ctrl+`: 터미널 열기
-// tsc --noEmit하면 처음에는 터미널이 알아듣지 못한다. 이떄 node를 사용🟢 tsc컴파일러를 설치해야 된다.
-// 1. npm init -y : package.json이 생김, Typescript-Study폴더가 node 프로젝트가 됨
-// node 프로젝트의 설정을 모아둔 곳이 package.json, 이제 npm 명령어들을 프로젝트에서 사용가능🟢
-// 2. npm i typescript : typescrpt 설치, npm은 node의 프로그램들 정확히 말하면 node의 package라고 부르는데,
-// node의 프로그램들을 모아두는 저장소를 npm이라는 node package mananger가 있다.
-// 그러면 현재 npm안에 저장되어 있는 typescrpt를 설치한 것이다.
-// 이제 tsc를 쳐보면 안된다.(?) 앞에 npx를 붙여야 한다. 그러면 사용할 수 있는 명령어들이 나온다.
-// 3. npx tsc --init : tsconfig.json이라는 파일이 생긴다.
-// tsconfig.json📗
-// 🟢Typescript 프로젝트 시작할때 package.json, tsconfig.json 이 두 파일을 만들고 시작해야 하고, tsconfig.json 읽을 줄도 알아야 한다.
-// 😨아직 ts가 서툴다면 tsconfig.json에서 "allowJs": true 옵션을 주석해제 하자, js와 ts 동시사용 가능, 그 상태에서 js-> ts 전환
-//  "target": "es2016" -> tsc가 나의 코드를 es2016으로 바꿔줌.
-//  "module": "commonjs" -> js에서 module system은 흔하다, import, export || require, module exports
-//  "module": "ES2015"나 "ES2022"는 같다, 최신 모듈 시스템 쓰고 싶으면 "ES2015"✅, node 모듈 시스템 쓰고 싶으면 "commonJs"✅
-// 🟢strict: true 고정 ! 나중에 필요할 떄 tsconfig.json 수정할 수도 !
+/*
+에디터가 자동으로 타입검사를 해준다. ctrl+`: 터미널 열기
+tsc --noEmit하면 처음에는 터미널이 알아듣지 못한다. 이떄 node를 사용🟢 tsc컴파일러를 설치해야 된다.
+1. npm init -y : package.json이 생김, Typescript-Study폴더가 node 프로젝트가 됨
+node 프로젝트의 설정을 모아둔 곳이 package.json, 이제 npm 명령어들을 프로젝트에서 사용가능🟢
+
+2. npm i typescript : typescrpt 설치, npm은 node의 프로그램들 정확히 말하면 node의 package라고 부르는데,
+node의 프로그램들을 모아두는 저장소를 npm이라는 node package mananger가 있다.
+그러면 현재 npm안에 저장되어 있는 typescrpt를 설치한 것이다.
+
+이제 tsc를 쳐보면 안된다.(?) 앞에 npx를 붙여야 한다. 그러면 사용할 수 있는 명령어들이 나온다.
+
+3. npx tsc --init : tsconfig.json이라는 파일이 생긴다.
+
+📗tsconfig.json📗
+🟢Typescript 프로젝트 시작할때 package.json, tsconfig.json 이 두 파일을 만들고 시작해야 하고, tsconfig.json 읽을 줄도 알아야 한다.
+😨아직 ts가 서툴다면 tsconfig.json에서 "allowJs": true 옵션을 주석해제 하자, js와 ts 동시사용 가능, 그 상태에서 js-> ts 전환
+ "target": "es2016" -> tsc가 나의 코드를 es2016으로 바꿔줌.
+ "module": "commonjs" -> js에서 module system은 흔하다, import, export || require, module exports
+ "module": "ES2015"나 "ES2022"는 같다, 최신 모듈 시스템 쓰고 싶으면 "ES2015"✅, node 모듈 시스템 쓰고 싶으면 "commonJs"✅
+🟢strict: true 고정 ! 나중에 필요할 떄 tsconfig.json 수정할 수도 !
+🟢"forceConsistentCasingInFileNames": true => ts에서는 모듈 시스템이 있어서 다른 파일을 import 가능, 윈도우는 대소문자 구분 크게 신경❌
+   but mac이나 리눅스는 대소문자를 구분하기에 대소문자로 에러가 날 수 있음, 대소문자 지켜서 import하도록하는 옵션
+🟢"skipLibCheck": true -> 라이브러리 check를 건너띄운다, 다른 package들을 다운받아서 사용할 떄 그 package들에 전부 .d.ts라는 파일이 있다.
+   .d.ts 는 그 package에 type을 정리해둔 파일, 실제 사용하는 타입만 검사하도록, 안쓰는 타입 검사❌
+
+4. npx tsc --noEmit : 타입 검사한 내역이 터미널에 뜬다.
+5. npx tsc : ts파일을 -> js파일로 변환하여 생성
+🟢 타입 검사 기능과 코드 변환 기능은 별개로 돌아간다.
+ */

jquery.js

@@ -0,0 +1,101 @@
+"use strict";
+// import $ from 'jquery';
+// export { }
+// 위처럼 import 문, export문의 유무에 따라서 이 파일이 어떻게 인식되는지가 달라진다.
+// 있다면 module 시스템으로 인식하고 없다면 전역 스크립트로 인식한다.
+// 전역 스크립트로 인식되는 경우 이 파일에서 작성한 타입들이 다른 파일에 있을 것이라고 생각하고
+// 에러가 안뜨게 된다. 그래서 괜히 모듈 시스템으로 만들어서 타입이 꼬이는 경우가 있다.
+var _a;
+$("p").removeClass("myClass noClass").addClass("yourClass"); // 1️⃣
+$("p").removeClass(["myClass", "noClass"]).addClass("yourClass"); // 2️⃣
+$("p")
+    .removeClass((index, className) => {
+    return "myClass";
+})
+    .addClass("yourClass"); // 3️⃣
+/*
+removeClass(
+    className_function?:
+        | JQuery.TypeOrArray<string> 🔥
+        | ((this✅: TElement, index: number, className: string) => string),
+): this;
+TS에서 첫 번째 매개변수가 this인 경우, 없다고 생각하면 된다.
+$("p").removeClass((index, className) => {
+    return 'myClass';✅
+}).addClass("yourClass");
+
+type TypeOrArray<T> = 🔥 T | T[]; 🔥
+
+$("p").removeClass("myClass noClass").addClass("yourClass");
+$("p").removeClass(["myClass", "noClass"]).addClass("yourClass");
+*/
+const $p = $("p");
+$p.removeClass("myClass noClass").addClass("yourClass");
+(_a = document.querySelector("h1")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", function () {
+    console.log(this); // this='h1'
+});
+/*
+removeClass -> addClass 메서드 체이닝
+removeClass의 return값은 this
+$p.removeClass:this -> $p가 되고 아래처럼 된다.
+$p.addClass('yourClass');
+addClass(
+    className_function:
+        | JQuery.TypeOrArray<string>
+        | ((this: TElement, index: number, currentClassName: string) => string),
+): this;
+addClass또한 return값이 this🔥
+*/
+// jquery에서, $ -> 변수(혹은 _)
+$(["p", "t"]).text("hello");
+/*
+interface PlainObject<T = any> {
+    [key: string]: T;
+} 아무거나 가능
+
+text(
+    text_function:
+        | string
+        | number
+        | boolean
+        | ((this: TElement, index: number, text: string) => string | number | boolean),
+): this;
+$(["p", "t"]).text(()=> {
+    console.log(this); // this: string[]
+    return 'hello';
+});
+함수 안에 존재하는 함수의 this는 상위에 있는 것을 그대로 받아오기 때문에 화살표 함수로 만들어 주는 것이 좋다.
+*/
+const tag = $("ul li")
+    .addClass("hello")
+    .addClass(function (index) {
+    return "item-" + index;
+});
+$(tag).html(function (i) {
+    console.log(this);
+    return $(this).data("name") + "입니다";
+});
+const div = document.createElement("div");
+div.innerHTML = "hello";
+const div1 = document.createDocumentFragment();
+$(tag).html(div); // const div: HTMLDivElement < Element
+$(tag).html(div1); // const div1: DocumentFragment
+// interface에서 this는 자기 자신을 가르키며, 첫 번쨰 param이 this인 경우 타이핑이 이미 존재
+const $tag = $([
+    "p",
+    "t",
+]);
+$tag.text("123");
+$tag.text(123);
+$tag.text(function (index) {
+    console.log(this, index);
+    return true;
+});
+$tag.text().html(document);
+const tagType = $("ul li")
+    .addClass("hello")
+    .addClass(function (index) {
+    return "item-" + index;
+});
+$(tagType).html(document);
+// 유사배열, querySelectorAll같은것들

tsconfig.json

@@ -13,7 +13,8 @@
     /* Language and Environment */
     "target": "es2017" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     "lib": [
-      "es2020", "dom"
+      "es2020",
+      "dom"
     ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
@@ -27,9 +28,9 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "ES2022" /* Specify what module code is generated. */,
+    "module": "CommonJS" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
@@ -79,8 +80,8 @@
 
     /* Type Checking */
     "strict": true /* Enable all strict type-checking options. */,
-    "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-    "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
     // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
     // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */