TypeScript(apply)

1. package.json 초기화

//terminal
mkdir typechain
code typechain

//vsc열린다

//typechain/통합terminal
npm init-y

- package.json

package.json파일이 생성되면, 

"main": "index.js" 없애고, scripts 안에 test부분 없애고 수정 ㄱㄱ

{
    "name": "typechain",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "build": "tsc",
        "dev": "nodemon --exec ts-node src/index.ts", //src폴더 안의 index.ts파일의 코맨드들을 자동 실행시켜줌
        "start": "node build/index.js" //start를 실행하면 build 폴더 안의 index.js 파일을 실행
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "ts-node": "^10.9.1",
        "typescript": "^4.9.5"
    },
    "dependencies": {
        "nodemon": "^2.0.20"
    }
}

---

2. typescript 설치

//통합terminal로 돌아와서
npm i -D typescript //ts가 devDependencies에 설치됨 (상기 package.json 참고)

touch tsconfig.json //vs code에게 우리가 ts로 작업한다는것을 알려줌 "파일명은 무조건 tsconfig.json"

npm run build && npm start → 계속 이 작업을 반복하면 비효율적이고 귀찮겠찌!?!?

npm i -D ts-node
npm i nodemon

⭐️ ts-node
빌드/컴파일 할 필요 없이 TS 코드를 실행 가능하게 해줍니다.
ts-node는 Node.js용 TypeScript 실행 엔진 및 REPL입니다. JIT는 TypeScript를 JavaScript로 변환하므로 사전 컴파일 없이 Node.js에서 TypeScript를 직접 실행할 수 있습니다.

⭐️ nodemon
서버를 재시작할 필요 없이, command를 auto-refresh 시켜줍니다.

---

3. tsconfig.json 파일 설정

include

• ts파일들이 어느 폴더 안에 위치한지 지켜보기👀 👀

compilerOptions

{
    "include": ["src"], //ts파일들이 어디에 있어? 지켜봐
    "compilerOptions": {
        "outDir": "build", //ts->js로 컴파일된건 어디에다 저장할꺼야?
        "target": "ES6", //js로 컴파일될 때 어떤 버전을 사용할지 선택 가능 (ES6 젤 추천)
		"lib": ["ES6", "dom"], //ES6을 지원하는 서버 & DOM, 즉 브라우저 환경에서 코드를 실행시킬꺼야 ex)DOM: window, document, localStorage 등등..
		"strict" : true, //strict모드 실행
		"allowJs": true, //js코드 읽어올 수 있게됨
        "esModuleInterop": true,
        "module": "CommonJS"
    }
}

• outDir
  • ts→js로 컴파일된 파일 저장 위치 선택 ✓
• target
  • ts→js로 컴파일 될 때, 어떤 버전을 사용할껀지 선택 ✓

⭐️ TARGET
최신 브라우저는 모든 ES6 기능을 지원하므로 ES6는 좋은 선택입니다. 코드가 이전 환경에 배포된 경우 더 낮은 target을 설정하거나 최신 환경에서 코드 실행이 보장되는 경우 더 높은 target을 설정하도록 선택할 수 있습니다.

ex) 화살표 함수() => this는 ES5 이하이면 함수 표현식으로 바뀝니다.

특별한 ESNext 값은 TypeScript 버전이 지원하는 가장 높은 버전을 나타냅니다. 이 설정은 다른 TypeScript 버전 간에 동일한 의미가 아니며 업그레이드를 예측하기 어렵게 만들 수 있으므로 주의해서 사용해야 합니다.

- ES3 기준

- ES6 기준

• lib
  • js 코드가 어디에서 동작할지 알려줌 ✓
  • 타입스크립트에게 어떤 API를 사용하고 어떤 환경에서 코드를 실행하는 지를 지정할 수 있습니다. (target 런타임 환경이 무엇인지를 지정합니다.)
  • 자동완성 기능을 사용할 수 있게 해주지롱! 편리편리!
  • TS는 Math처럼 기본적으로 포함된 JS API에 대한 타입 정의를 가지고 있다.
• strict
  • 모든 엄격한 타입 검사 옵션을 활성화합니다. 👌
  • ex1) 자바스크립트로 만들어진 패키지를 설치했을 때, 타입스크립트에 그 패키지의 타입을 정의하는 방법
  • strict 플래그는 프로그램 정확성을 더 강력하게 보장하는 광범위한 타입 검사 동작을 가능하게 합니다.
  • strict:true를 통해 Declaration Files가 없는 경우에 대해서도 에러를 띄워줍니다. ⛔️

⭐️ Declaration
⇒ How we explain to TS the types of NodeJS
⇒ 보통 d.ts 파일들은 친절한 누군가가 다 타입을 지정/정의해줘서 우리가 읽어올 수 있는거임!

• allowJs 
  • TS파일이 JS파일의 코드를 읽어올 수 있게 허용해줍니다. 👌
  • ex2) 자바스크립트 파일을 TS보호장치로 보호받고 싶을 때 (JS파일을 안건드리며..)

1. TS에서 JS파일 import하기 위해 (읽어오기 위해) allowJs:true로 설정!
2. TS의 보호장치로 보호받고 싶은 JS파일에서 해당 부분에 주석! @ts-check
3. /** */ + ENTER ⇒ JSDoc comment 작성 (여기서 해당 d.ts파일들 처럼 type들 지정)

⇒ comment일 뿐이니까 JS코드에 아무 지장을 주지 않으면서, type을 지정해줘서 typeScript의 보호장치도 받아!! very nice~~🤩

❓ difference between import {} from “./file” VS import {} from “file”
⇒ import {} from "file" is for a module you install with npm.
"./file" is for a file you create.

• esModuleInterop
  • CommonJS 모듈을 ES6 모듈 코드베이스로 가져오려고 할 때 발생하는 문제를 해결합니다.
  • ES6 모듈 사양을 준수하여 CommonJS모듈을 정상적으로 가져올 수 있게 해줍니다.