#5~#5.4

 npm init -y

 npm i -D typescript
 
 -D는 devDependencies를 의미하고, typescript는 말 그대로 typescript을 의미함!

• 위와 같이 파일을 작성했을 때 vsc는 typescript로 코드가 작성됨을 바로 알 수 있음 => auto complete을 제공할 수 있음!!

• VSC 자체적으로 위 옵션들을 보여줌 

• 타입스크립트가 src에 있는 모든 파일을 모니터링한다는 의미 

• 타입스크립트는 컴파일러이다 => 따라서, TS => JS를 어떤 폴더에 지정할 것인지 정해주는 것이다 => 해당 예시에서는 build라는 파일을 명시하고 해당 파일에 컴파일을 시행함

script에 build:tsc를 입력해주고 그 다음 npm run build를 해주면, 컴파일링이 실행된다

 

• 위처럼 TS 코드를 짜고, npm run build를 실행하면 오른쪽에 보이는 것처럼 JS으로 트렌스파일링 해준다. 

• 여기에서 target은 어떤 JS 버전으로 컴파일할지 선택할 수 있다!

• target의 runtime envrionment을 설정할 수 있다 

• 브라우저 환경에서 사용할거면, DOM을 추가하면 된다 => 이렇게 추가하면, 타입스크립트 코드에 document의 사용이 가능해진다(옵션까지 같이 나옴)

• node_modules를 통해 document.queryselector와 같은 구현된 파일에 접근까지 가능함! 
• 핵심: 즉 위와 같이 타입스크립트에게 DOM 즉, 브라우저 환경에서 작동할 것이란 것을 알려주면, 자동완성부터 API에 대한 정보를 다 가지고 있게 됨! 

• 일반적으로 타입스크립트로 코딩을 하더라도, 자바스크립트 기반의 라이브러리를 import해 사용할 수 있다(허용을 해줌)  => 그럴 경우 타입스크립트는 type definition이 필요하게 된다 => 전제: myPackage.ts는 node_module에서 원하는 라이브러리를 import하는 경우를 산정하고 진행한다.   

import { inti } from "./myPackage.js";

inti(); //타입스크립트가 보호해주지 않음 => 이유: strict mode가 아니기 때문에!

• tsconfig.json에 타입스크립트 strict mode를 해주면 

• 위와 같이 선언 파일을 찾을 수 없다고 나온다 => 선언 파일은 앞서 dom에서 보았듯이 

• dom(localstorage 등에 대한 모든 call signature 등을 담고 있음 따라서, ts 파일에서도 해석이 가능한 것 하지만, 위의 경우 우리가 임의로 만든(node.module에 있다는 전제하에) 파일이기 때문에 .d.ts 형식 규명된 형식이 없어서 선언 파일이 없다고 하는 것! 
• 문제 해결: dom과 같이 선언 파일을 만들면 됨! 

• 선언 파일(myPackage.d.ts)을 완성하자 에러가 사라짐을 확인할 수 있음 => 이렇게 declare하는 경우는 흔하지 않지만, 왜 typescript가 localstorage를 사용할 수 있는지에 대한 이해도를 높일 수 있다!

 

## JS 파일을 TS 파일에 import 해서 사용하고 싶은 경우:

• ts 파일에 JS파일을 import하면 당연히 에러가 발생하게 된다 

{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "build",
    "lib": ["es6", "DOM"],
    "strict": true,
    "allowJs": true
  }
}

• allowjs:true,를 해주면 => 에러가 사라짐

• allowjs:true를 해준 후 init을 확인해보면 ts에서 자체적으로 해당 function에 대해 추측하고 있음을 확인할 수 있다 하지만 코드를 변경하지 않고 JS 파일 체크하기 위한 방법도 존재한다! 

//@ts-check

export function init(config) {
  return true;
}

export function exit(code) {
  return code + 1;
}

• 타입스크립트에게 JS 파일을 체크하라고 명시해주는 것(@ts-check)

 

JSDoc:

코멘트 문법?이라 생각하면 됨 => function 위에 작성을 한다

//@ts-check
/**
 * initialize the program
 * @param {object} config
 * @param {boolean} config.debug config 매개변수 내에 있는 프로퍼티를 명시해주는 것!
 * @param {string} config.url
 * @returns {boolean}
 */
export function init(config) {
  return true;
}
/**
 * exit the program
 * @param {number} code 
 * @returns {number}
 */
export function exit(code) {
  return code + 1;
}

• JSDoc만을 작성해줬는데 ts파일에서 myPackage에 대한 모든 내용을 JSDoc에서 명시한대로 담고 있음을 확인할 수 있다 => JS <=> TS 상호작용할 수 있는 강력한 방법!!!