230314 | add jQuery type analysis

wally-wally · Mar 14, 2023 · cf62e5e · cf62e5e
1 parent a202eb7
commit cf62e5e
Show file tree

Hide file tree

Showing 5 changed files with 224 additions and 0 deletions.
diff --git a/09_ts/05_ts-all-in-one/jquery.ts b/09_ts/05_ts-all-in-one/jquery.ts
@@ -0,0 +1,41 @@
+// jquery 타입 분석
+const $p = $( "p" );
+
+// removeClass(className_function?: JQuery.TypeOrArray<string> | ((this: TElement, index: number, className: string) => string)): this;
+
+document.querySelector('h1')?.addEventListener('click', function() {
+    console.log(this);
+})
+
+// 메서드 체이닝이 가능한 이유은 removeClass, addClass의 리턴 타입이 this이기 때문이다.
+$p.removeClass( "myClass noClass" ).addClass( "yourClass" );
+$p.removeClass(['myClass', 'noClass']);
+// 타입스크립트에서 첫 번째 인자가 this인 경우 무시하고 그 다음부터 진짜 해당 함수의 매개변수 타입이 시작되는 것에 주의하자!
+$p.removeClass((index, className) => {
+    return 'myClass';
+});
+
+$(["p", "t"]).text("hello");
+const tag = $( "ul li" ).addClass(function( index ) {
+  return "item-" + index;
+});
+$(tag).html(function (i: number) {
+  console.log(this);
+  return $(this).data('name') + '입니다';
+});
+
+// jquery 타입 직접 만들어보기
+// (지금 쓰지 않는 타입 부분은 굳이 안 만들어도 된다.)
+interface zQuery<T> {
+    text(param?: string | number | boolean | ((this: T, index: number) => string | number | boolean)): this;
+    html(param: string | Document | DocumentFragment): void;
+}
+
+const $tag: zQuery<HTMLElement> = $(['p', 't']) as unknown as zQuery<HTMLElement>;
+$tag.text('123');
+$tag.text(123);
+$tag.text(function(index) {
+    console.log(this, index);
+    return true;
+});
+$tag.text().html(document);
diff --git a/09_ts/05_ts-all-in-one/moduleSystem.ts b/09_ts/05_ts-all-in-one/moduleSystem.ts
@@ -0,0 +1,16 @@
+// import $ from 'jquery';
+// const $ = require('jquery'); -> 타입스크립트에서는 import $ = require('jquery'); 형태로 사용
+// import $ = require('jquery'); 와 아래 구문이 가은 방식이다.
+import * as $ from 'jquery';
+
+// typescript 에서 commonjs 라이브러리를 표현하는 방법
+export = jQuery;
+// 위와 같은 표현
+// module.export = jQuery;
+
+// 보통 import React as 'react';로 쓰고 있지만 사실 import * as React from 'react'; 로 써야한다.
+// 이게 가능한 이유는 tsconfig.json에서 esModuleInterop: true로 설정되어 있기 때문이다.
+// esModuleInterop -> commonjs 모듈 시스템으로 되어 있는 걸 es module 처럼 인식될 수 있게 해주는 옵션
+// 만약 export default가 있다면 es 최신 모듈 시스템이다.
+export = jQuery; // commonjs
+export default jQuery; // es module
diff --git a/09_ts/05_ts-all-in-one/namespace.ts b/09_ts/05_ts-all-in-one/namespace.ts
@@ -0,0 +1,9 @@
+// 네임스페이스
+// 타입 간 충돌을 방지하기 위해 타입들을 가상의 그룹으로 묶어주는 것
+declare namespace Wally {
+    const aa: string;
+    const bb: string;
+    const cc: string;
+}
+
+Wally.aa;
diff --git a/09_ts/05_ts-all-in-one/package-lock.json b/09_ts/05_ts-all-in-one/package-lock.json
diff --git a/09_ts/05_ts-all-in-one/package.json b/09_ts/05_ts-all-in-one/package.json
@@ -10,6 +10,12 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "jquery": "^3.6.4",
+    "react": "^18.2.0",
     "typescript": "^4.9.4"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.5.16",
+    "@types/react": "^18.0.28"
   }
 }