Typescript project setting

• 기존엔 playground를 사용하여 typescript 코드 테스트를 진행했음

프로젝트 구성 단계

outDir, target 속성

npm i -D typescript
// -D는 ts가 devDependencies에 설치된다

1. src폴더를 만든 후 index.ts 파일을 만든다
2. tsconfig.json 파일을 만든다 : vscode는 이 파일이 있으면 ts로 작업한다는 것을 알게 된다

touch tsconfig.json

3. tsconfig.json 파일안에 작성하기 : ts는 컴파일러니까 파일들을(index.ts) 일반적인 js로 컴파일 시켜준다

// tsconfig.json
{
	"include": ["src"],
    "compilerOptions": {
        "outDir": "", // 자바스크립트 파일이 생성될 디렉터리를 지정한다
      	"target": "ES6" // js로 build할때 버전을 의미한다
    }
}
// package.json
"scripts": {
		"build": "tsc"
}

4. npm run build를 해주면 tsc가 작동한다 : js 파일로 build를 시켜주게 된다
5. index.ts의 파일을 내용을 변경해주고 다시 build한 후 js의 결과를 보자

class Block {
	constructor(private data: string) {}
	static hello() {
		return "hi";
	}
}

//build한 결과
class Block {
    constructor(data) {
        this.data = data;
    }
    static hello() {
        return "hi";
    }
}

lib 속성

lib이란?

• 합쳐진 라이브러리의 정의 파일을 특정해주는 역할 / 정의 파일의 목표로 하는 런타임환경을 알려주는 것

// tsconfig.json
{
	"include": ["src"],
    "compilerOptions": {
        "outDir": "", // 자바스크립트 파일이 생성될 디렉터리를 지정한다
      	"target": "ES6", // js로 build할때 버전을 의미한다
      	"lib": ["ES6", "DOM"] // es6을 지원하는 환경에서 실행될것이다, 브라우저 위에서 실행한다
    }
}

DOM을 넣는 이유는? ts파일에서 document.이렇게 작성하면 이게 뭔지 알 수 있다.
즉, DOM을 사용하면 ts는 document, window 등이 가지고 있는 모든 이벤트와 메소드를 보여준다
예) document.querySelector() 사용가능

type definitions 타입 정의

• document 오브젝트의 모양과 argument, return type같은 모든 것들을 설명해주고, Math오브젝트의 경우에도 같은 작업을 해둔 것 이것이 바로 타입 정의다.
• 타입스크립트가 몇몇 자바스크립트 코드와 API의 타입을 설명할 수 있도록 해준다
• 즉, 타입스크립트한테 불러올 자바스크립트 (예)함수의 모양)을 설명하려면 타입 정의가 필요하다

declaration files 정의파일이란? (d.ts)

• 자바스크립트 코드의 모양을 타입스크립트에서 설명해주는 파일
• 정의파일에서 ts가 내가 사용하는 타입을 찾아낸다

//myPackage.js
export function init(confing) {
	return true;
}
export function exit(code) {
	return code + 1;
}

//index.ts
// 정의파일을 따로 설정해지 않은 처음 상태에서는 오류가 난다
import { init } from "myPackage";
init({
	url: "true"
})

//myPackage.d.ts
// ts에게 myPackage를 설명해주는 정의파일
// 이렇게 작성하고 나면 index.ts에서는 오류가 더이상 나지 않는다
interface Config {
	url: string;
}
declare module "myPackage" {
	function init(config: Config): boolean;
}

allowJS 속성

• 타입스크립트 안에 자바스크립트를 허용한다는 의미
• js, ts파일을 섞어서 진행해도 된다
• allowJS: true하고 js파일에 JSDoc를 달아주면 된다

JSDoc

• js파일도 사용하지만 ts가 제공하는 보호장치를 사용하고 싶을때 사용 (js파일을 다시 적어줄 필요없다)
• JSDoc은 코멘트로 이루어진 문법이다 함수 바로 위에 코멘트를 적어주면 된다
• js파일에 JSDoc만 넣으면 ts보호를 받는다

// @ts-check
/**
 * Initializes the project
 * @param {Object} config   //입력값의 데이터타입은 객체, 입력값의 이름은 config
 * @param {boolean} config.debug  // boolean타입은 config.debug안에 들어있을것이다
 * @param {string} config.url // config.url 타입
 * @returns boolean
 */
export function init(config) {
	return true;
}
/**
 * Exits the program
 * @param {number} code
 * @returns number
 */
export function exit(code) {
	return code + 1;
}