zrch TS #4 library _JQuery

🎠 지난주부터 zerocho님의 TS 리뉴얼 강의 업로드를 발견해서 열심히 따라가는 중
라이브러리 분석1 #4 JQuery
https://www.youtube.com/watch?v=fAnVMoR7cK0

TS 라이브러리 분석할 때

JQuery 라이브러리 준비

• npm i jquery
• npm i -D @types/jquery 타입들은 개발할 때만 필요하니까 -D로
• @types 라이브러리들은 devDependencies에 리스트업됨
  

---

• 분석할 파일 jquery.ts

1. line 1 removeClass() 와 addClass()
2. line 3 배열.text()
3. line 5
4. line 9
   

export = JQuery 뜻

1. 

2. 

• 이렇게 쓸 수있는 이유는 tsconfig.json,dptj
  esModuleInterop을 true로 해줘서 줄여쓰기 가능
  
  
• esModuleInterop을 true로 해줘서 => 이것도 가능함
  

import /export가 있는 파일과 없는 파일의 차이

• 있으면 모듈시스템으로 인식
  
• 없으면 전역스크립트로 인식
  

---

JQuery.d.ts file

38:00
F12 누르면 definition으로 이동

---

🎠TS 코드 분석하기

line 1 분석

• removeClass()

  

2.f12로 해당 type을 definition에서 가져와서 상단에 붙이기

3. type definition을 분석하며 실제코드에 해당하는 type값으로 바꿔주기, 한칸씩 보면서!

3-2 type에 맞는 다른 값이 들어간 경우의 코드도 한번 넣어본다 string에서 string[] 로 넣어봄

3-3 string | string | 함수도 가능함 => 함수의 경우 this 가 첫번째 param이면 실제 param은 2번째임

param이 this 인 경우

• TS에서 this가 1st param인 경우 => this를 타이핑한 것이고 실제 param은 2nd one!
  
• this로 끝나면 method chaining 가능

• addClass()

  1.return 값이 this => 앞에 나온 부분 $p.addClass() 를 가리킴 => `$p`
  ...읭? this 부분..

30/07/2022

• line 3 분석

1. $()
   
   

• plainobject는 any라서 아무거나 다 됨
  
  2.text()
• text() 안에 string | number | boolean | 함수
  
• so 함수 넣기도 가능
  

---

line 10 분석

1.html()

JQuery.htmlString 이거나 JQuery.Node => 거의 돔요소

• Element는 html 엘레먼트임 div,etc => 이것도 가능
  

• Text는 Text{}로 비어있어서 뭔지 알기 어려움