typeScript 기초(7) 개발환경설정,declaration file,JSDoc

개발 환경 설정하기 

 

일단 typeChain이라는 폴더를 만들고 vs코드로 열어서 새 노드파일을 만들어줬음 

 

터미널에 <  npm i init -y   >  를입력하면 json 파일이 하나 생성되는데, 

"main" : "index.js" << 이부분과

"scripts" {} 안에 있는 "test" 부분을 지워줌

 

다시 터미널을 통해서 타입스크립트를 설치

npm i -D typescript    << 입력

==> -D를 입력함으로써 typescript가 devDependencies에 설치

 

 

 

자바스크립트 패기지 => 타입스크립트 프로젝트로 설치할 때 

 

src라는 새폴더를 만든 후 안에 index.ts 파일 생성

const hello = () => "hi" ; // 컴파일 하기위한 코드

이 ts 파일을 실행해서 js파일로 받기를 원함 (typescript는 컴파일러니깐 파일들을 일반적인 자바스크립트로 컴파일 시켜줌)

 

 

새파일 tsconfig.json 생성 (이름 바꾸면 안됨)

=> 이 파일이 있으면 vsc가 우리가 ts파일로 작업한다는 것을 알게되고 자동완성 기능을 제공해줌

 

 json 파일이니까 당연히 json으로 작성

{
    "include": ["src"], //include 배열에 js로 컴파일 하고싶은 모든 디렉토리를 넣어줄건데,src의 모든 파일을 확인한다는 의미 
    "compilerOptions": {
        "outDir" : "build" // js파일이 생성될 디렉터리를 지정 : build란 폴더에 만들어진 코드를 넣는다
    }      
}

 

json 파일로 돌아가서 내용물을 지웠던 scripts 파일에 아래와 같이 작성

"scripts": {
    "build":"tsc"
  },

터미널에 npm run build 를 작성하면, build라는 폴더가 생긴 것을 확인 할 수 있는데 

=> build라는 폴더 안에 index.js 파일이 생성 되어 있음 ===== > 

 

typeScript file

const hello = () => "hi" ;

javaScript file 

var hello = function () { return "hi"; };

 

아까 만들었던 ts 파일엔 화살표 함수 가지고 있지만 js에서 일반적인 함수로 바뀌는 걸 확인 할 수 있음

또한 js파일에선 const 가 아닌 var 을 사용하고있음

===> 즉 typeScript가 낮은 버전의 javaScript 파일로 컴파일 해준것.(어디서든 이해할 수 있는 호환성 좋은 코드로 바꾼것)

 

<index.ts> 아래와 같이 코드 작성

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

 

<index.js>

var Block = /** @class */ (function () {
    function Block(data) {
        this.data = data;
    }
    Block.hello = function () {
        return "hi";
    };
    return Block;
}());

=> class가 존재하지 않는 js 버전으로 컴파일 했음

 

 

 

하지만 바뀔 js코드의 version도 설정 할 수 도 있음!!

 

 

<tsconfig.json>

{
    "include": ["src"], 
    "compilerOptions": {
        "outDir" : "build",
        "target": "ES3" // target은 컴파일 하고싶은 js버전을 나타내줌
    }      
}

위에 ES3 ver은 const 를 지원하지 않고, 화살표함수 또한 지원하지 않아서 일반적인 함수로 바꿨음

==> 그래서 ES6 ver로 바꿔줌 (대부분의 node.js와 브라우저가 ES6를 지원하고 있어서 ES6를 쓰는게 가장 이상적)

 

브라우저를 위한 JS코드를 만들 땐 ES6가 이상적,

node.js 같은 백앤드를 위한 JS 코드를 만들때 더 오래된 환경에 배포하고 싶으면 ES6보다 더 낮은 버전의 target을 설정해 됨 하지만 대부분의 server provider에선 ES6도 문제 없음

 

 

터미널에 npm run build를 돌리면

 

바뀐 js파일

const hello = () => "hi";

=> 이렇게 바뀌어 있는 것을 확인 

 

원래 target은 잘 사용하지 않는데 ,

Create-React-App이나 nest,next.js 들을 사용하면 자동으로 맞는 target을 지정해줌  (아무것도 않적으면 ES3나 ES5 가 될 것임)

 

 

 

 

Lib configuration : 합쳐진 라이브러리의 정의 파일을 특정하는 역할 

=>내 코드가 어디서 실행될지 알려줌 

 

tsconfig.json 파일

{
    "include": ["src"], 
    "compilerOptions": {
        "outDir" : "build",
        "target": "ES6",
        "lib" : ["ES6", "DOM"] //"DOM"은 브라우저를 위해 작동한다는 의미(선택)
        // ==> ex6를 지원하는 서버와,DOM 즉 브라우저 환경에서 코드를 실행시킴


    }      
}

DOM 을 안 적으면 TS코드가 브라우저를 위한 코드인지 백앤드를 위한 코드인지 모름

=> DOM을 넣고나서 document를 작성하면 ts가 알고 있지만, DOM을 뺏을때는 document를 인식 못하는 것을 볼 수 있음

즉 "DOM"을 넣으면 Math, window, document등을 인식시킬 수 있음 

 

=> lib에 자신이 쓸 API와 어떤환경에서 코드를 실행시킬지 알려 줘서 자동완성 기능을 사용할 수 있게 됨

 

 

 

 

파일 전체를 위한 타입 정의(파일)생성 

declaration file (정의파일) : 몇몇의 javaScript코드와 API의 타입 정의해주기 위해서 사용하는 것

= 기본적으로 ts는 몇몇의 기본적인 타입들은 가지고 있음

 

 

우리가 JS로 만들어진 라이브러리를 TS에 쓰려고한다면 쓰려고 하는 JS의 함수 모양을 설정하려면 타입 정의가 필요함

 

 

자바스크립트 파일과 모듈을 위한 타입 정의 작성하는 법

 

myPackage.js 파일을 먼저 만들어준 후 아래와 같이 기본 함수 두개를 만들어줌

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

=> 이 myPackage.js파일을 node 모듈인것처럼 사용할 것임 

 

 

 

Strict : 엄격한 타입의 검사옵션을 활성화 하는데  Declaration Files가 없는 경우에 대해서도 에러를 띄워줌.

 

 

tsconfig 파일에 strict 추가 

"strict": true

=> strict : true를 해놓으면, ts파일에 에러가 뜨는 것을 확인 할 수 있음 

 

 

index.ts file

import { init } from "myPackage";

init를 import해주는데, 이때 myPackage 에러가 뜨는데 Strict를 true로 활성화 시켜놓았기 때문.

 

==> 그래서 TS에게 myPackage에 대해 설명해줘야함

 

src에서 myPackage.d.ts라는 파일 새로 생성

declare module "myPackage" {
    
}

 

 

위와 같이 myPackage 모듈로 선언 해준다 그런데 myPackage 안에 init이 포함돼 있으니까, 

d.ts 정의 파일에서 호출시그니처(타입)만 써주면 됨 

d.ts 파일은 TS에게 타입만 설명해줌 

 

interface Config {
	url:string;
}

declare module "myPackage" {
    function init(config:Config) : boolean
}

=> init이라는 함수가 config를 받고, 인터페이스로 선언한 Config로 타입을 설정해주고 , boolean을 받는 것까지 작성

인터페이스는 url을 받는다.

 

=====> 이제 init에 대해 정의를 해줬기 때문에, error 가 뜨지 않음 

 

 

 

exit 또한 사용한다 했을 때 ,

index.ts file에 아래와 exit import해줌 

import { init,exit } from "myPackage";

=> exit가 number을 받아서 number을 반환한다는 것을 알려줘야함 

 

 

d.ts 파일

declare module "myPackage" {
    function init(config:Config) : boolean
    function exit(code : number) : number ;
}

위와같이 exit가 number을 받아서 number을 반환한다는 것을 알려줘야함 

 

 

index.ts 파일 

import { init,exit } from "myPackage";

init({
    url:"ture"
})

exit(1)

이렇게 사용 가능 

 

 

이런방식으로 이미 정의 되어있는 LocalStorage나 Math 등이 정의 돼 있는 것임 .

ctrl 키를 누르고, 타입을 클릭해보면 d.ts파일로 정의가 돼 있는 것을 확인 

 

이런식으로 자바 패키지를 ts로 바꿀 때 우리가 설명을 해줘야 사용할 수 있을 때도 있음. (물론 잘 사용 안할듯 하지만)

 

다시 lib 옵션으로 돌아가보면

lib은 이 통합된 라이브러리 정의파일을 지정할 수 있게 되는 것임 

 

 

 

 

 

자바스크립트 파일을 수정하지 않고, TS 보호기능을  사용하고 싶을 때(코드 수정이 힘들때,)

 

JSDoc : 코멘트로 이루어진  문장

 

tsconfig.json에 아래와 같이 allowJs 추가 

"allowJs" : true

 

 

myPackage.js

//@ts-check

위와 같이 추가 

=> 타입스크립트 파일한데 자바스크립트 파일을 확인하라고 알리는 것

 

 

const a = (b:number ,c:boolean)

typescript에서는 위와 같은 형식으로 데이터 타입을 저장할 수 있지만,  ts파일 일때만 이용가능함 

 

js에서도 똑같이 데이터 타입을 설정할 수 있는데

 

/***/   << 코멘트를 열어주고 작성할 것임(엔터치면 vs코드 자동완성 기능으로  아래와 같이 나옴)

/**
 * 
 * @param {*} config 
 * @returns 
 */

 

 

/**
 * Initializes the project      << 어떤 함수인지 설명해주는 부분
 * @param {object} config      << 객체로 된 입력값을 받고, 입력값의 이름은 config
 * @param {boolean} config.debug << config 객체안에 boolean이 있고, config.debug안에 들어있음 
 * @param {string} config.url    << string을 받는 config.url 타입
 * @returns {boolean}     <<boolean를 return한다 
 */

==> TS 코드 대신 코드 안에 코멘트를 적었을 뿐인데,  TS가 코멘트를 읽고 타입을  확인시켜줌 

 ===> 그냥 JS안에 JSDoc 코멘트를 더하기만 하면 TS가 확인시켜줌

 

 

< myPackage.js >

//@ts-check
/**
 * Initializes the project
 * @param {object} config
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns boolean
 */
export function init(config) {
    return true;
}
export function exit(code) {
    return code + 1 ;
}

전체 코드를 보면 exit function에 code에만 error가 나는것을 확인할 수 있음 

 

 

/**
 * Exit the program 
 * @param {number} code 
 * @returns number
 */ 
export function exit(code) {
    return code + 1 ;
}

위와 같이 code라는 입력값을 받고 number를 return함\

 

이렇게 타입스크립트가 자바스크립트 파일을 확인해주고 있는걸 확인 할 수 있음 

 

init()

==> init() 를 사용해보면 코멘트로 적었던 설명부터 타입까지 나오는 것을 확인할 수 있음 \

 

 

=>코드 수정이 힘들때, 위와같이 js파일 코드 수정없이도 코멘트로 달면 ts의 보호기능은 받고,

         본 JS 코드에도 영향이 가지않음 !