What is tsconfig.json

TypeScript의 기본 구성파일. 마치 Node.js프로젝트의 package.json과 유사하다고 볼수있다.

TypeScript => JavaScript로 컴파일하는 작업을 제어할수있음.

{
	"include":["src"],
    "compilerOptions":{
    	"outDir":"",
        "target":"",
        "lib":[],
        "strict":boolean,
        "allowJs":boolean,
        "module":""
    }
}

• include : TypeScript 감지영역을 set
• compilerOptions : 말그대로 ts->js로 컴파일하는데 옵션
  - outDir : 컴파일 완료후 js파일이 생성될 위치를 지정
  - target : 컴파일된 코드가 어느환경에서 실행될 지 정의함
  ex) 애로우펑션 사용후 target을 es5로 한다면 일반함수로 변환해줄거임
  - strict : typescript의 모든 타입체킹옵션을 활성화함
  - allowJs : js파일들을 ts에서 import해서 쓸수있도록 해줌
  - module : 컴파일된 코드가 어느 모듈시스템을 사용할 지 정의함(CommonJS 등)
  - esModuleInterop : commonjs모듈 형태로 이루어진 애들을 es2015모듈 형태로 불러올 수 있게해줌 (require를 import로 해줄수 있다는 뜻인듯)
  - lib : typescript코드가 실행될 환경을 정의함 (ex : ES6, DOM 등..)

Ex)

const exam = document.
// 자동완성기능이 제공될것
// lib:["DOM"] 이 세팅되있기 때문에

Declare

declaration files -> d.ts파일
TypeScript를 지원하지 않는 패키지를 사용할때 타입을 직접 선언해주기 위해 사용한다.
-> 하지만 @types를 이용해서 패키지의 설치를 함께한다면 생략가능.

엠비언트 선언(ambient declaration)

defclare 키워드를 이용해 모듈을 선언하며. 이를 이용한 선언방식을 '엠비언트선언'이라고 한다.

TypeScript컴파일러에 JavaScript 구현환경에 대한 정보를 알려주는 것.

단순 환경을 알려주는것이기 때문에 구체적인 실행정보는 없어서 앰비언트(주변)이라 한다.
module 키워드를 써서 엠비언트 모듈 형태로 선언할수도 있음

declare let exam:string;
declare module "exam"{
	function dec1(param:type):type
    interface{}
    class{} ...
}
//엠비언트 모듈내에는 function interface class등의 요소를 선언할수도있음.

JSDoc

allowJs 컴파일옵션을 true로 하면 js파일을 TypeScript에서 import하는게 가능해진다. js파일도 JSDoc를 이용해서 Typescript의 보호기능을 이용할수 있다. 신기하게 코멘트로 이루어진 문법이다.

//@ts-check

/**
 *
 * @param {object} config
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns {boolean}
 */
 export function init(config) {
    return true;
}

보면 느낄수있다. 어떻게 써야하는지를

ts파일에서 import하면 call signature가 있는 모습이 보인다.

TefinitelyTyped of github repo

github 레포중 TefinitelyTyped란 레포가있는데 npm에 존재하는 거의 모든 패키지의 타입선언 파일들이 들어있다(d.ts)
내가 흔히 받는 @types/ 가 여기에 있는 타입정의파일들을 받는거였다 ..

ts-node

개발환경에서 쓰는 패키지. ts->js로 컴파일한후 컴파일된 js파일을 실행시킬텐데. 개발환경에서 build -> start하기가 구찮다. ts코드를 빌드없이 실행시킬수 있게 해줌.

=> 쓰려는 와중에 뜬 오류 Error: unknown file extension .ts

"scripts":{
	"dev" : "node --loader ts-node/esm ts파일경로"
    }

node --loader ts-node/esm ts파일경로 ///// 이런식으로 경로를 짜주면 해결됨

module error

This file is being treated as an ES module because it has a '.js' file extension and 'x/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension

번역기로 돌리면. 이 파일의 확장자는 .js이거 해당 파일의 package.json에 "type":"module"이 포함되어있기 때문에 ES모듈로 취급된다.
CommonJS 모듈형태로 처리하려면 .cjs파일 확장자를 써라.

이건데 나의 tsconfig.json쪽에서 "module":"commonJS" 로 되어있었기 때문에 이를 "ES6"로 바꾸니까 해결됬다.