add code and note til ts external lib modularization

Author: joshua1988

project/README.md

@@ -13,6 +13,11 @@
    - [x] `tsc` 명령어로 타입스크립트 컴파일 하기
 2. 명시적인 `any` 선언하기
    - `tsconfig.json` 파일에 `noImplicitAny` 값을 `true`로 추가
+   - 가능한한 구체적인 타입으로 타입 정의
+3. 프로젝트 환경 구성
+   - babel, eslint, prettier 등의 환경 설정
+4. 외부 라이브러리 모듈화
+   
 
 ## 참고 자료
 

project/package-lock.json

@@ -10,7 +10,10 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "dependencies": {},
+  "dependencies": {
+    "axios": "^0.21.0",
+    "chart.js": "^2.9.4"
+  },
   "devDependencies": {
     "@babel/core": "^7.12.7",
     "@babel/preset-env": "^7.12.7",

project/package.json

@@ -1,4 +1,9 @@
-const sum = (a, b) => a + b;
+// // 라이브러리 로딩
+// import 변수명 from '라이브러리 이름';
+// // 변수, 함수 임포트 문법
+// import {} from '파일 상대 경로';
+import axios from 'axios';
+import * as Chart from 'chart.js';
 
 // utils
 function $(selector: string) {
@@ -8,12 +13,10 @@ function getUnixTimestamp(date: Date) {
   return new Date(date).getTime();
 }
 
-const a = 10;
-
 // DOM
-let a: Element | HTMLElement | HTMLParagraphElement;
+// let a: Element | HTMLElement | HTMLParagraphElement;
 const confirmedTotal = $('.confirmed-total') as HTMLSpanElement;
-const deathsTotal: HTMLParagraphElement = $('.deaths');
+const deathsTotal = $('.deaths') as HTMLParagraphElement;
 const recoveredTotal = $('.recovered') as HTMLParagraphElement;
 const lastUpdatedTime = $('.last-updated-time') as HTMLParagraphElement;
 const rankList = $('.rank-list');

project/src/app.ts

@@ -5,7 +5,8 @@
     "outDir": "./built",
     "moduleResolution": "Node",
     "lib": ["ES2015", "DOM", "DOM.Iterable"],
-    "noImplicitAny": true
+    "noImplicitAny": true,
+    "typeRoots": ["./node_modules/@types", "./types"]
   },
   "include": ["./src/**/*"]
 }

project/tsconfig.json

@@ -0,0 +1,3 @@
+declare module 'chart.js' {
+  // ...
+}

project/types/chart.js/index.d.ts

@@ -74,7 +74,7 @@ node_modules
   "eslint.validate": [
       "javascript",
       "typescript"
-  ],
+  ]
 }
 ```