[Type Script] 디노(deno) 사용, 타입 정의 파일, shim 라이브러리 사용

디노(deno)

: npm과 하는 역할은 비슷하지만 허용되는 라이브러리가 달라 찾아보면서 개발해야한다.

 

디노 설치

파워셀에서 iwr https://deno.land/x/install/install.ps1 -useb | iex 실행

 

디노 사용해보기

deno 폴더 안에 index.ts 파일을 만들고 아래와 같이 작성한다.

import {bgGreen, black} from 'https://deno.land/std@0.125.0/fmt/colors.ts';
const message:string = 'Ran with deno!';
console.log(black(bgGreen(message)));

-> colors라는 외부 라이브러리를 가져오고 이 라이브러리의 API를 사용했다.

그 다음, deno run ./deno/index.ts 명령어 실행

 

출력화면

-> 디노는 index.ts를 변환하고 colors 라이브러리를 다운받고 컴파일한다.
따라서 Ran with deno!라는 메세지가 초록색 배경의 검정 글씨로 출력된다.

 

디노는 컴파일된 colors 라이브러리를 캐시로 저장하기 때문에 앱을 실행할 때마다 다운하거나 컴파일하지 않는다. 프로젝트 의존성도 필요 없기 때문에 앱을 실행하기 전에 설치하거나 구성할 필요가 없다.
매우 흥미롭구만

 

ncc

: Node.js 모듈과 모든 의존성을 단일 파일로 컴파일하는 커맨드 라인 인터페이스이다.
타입스크립트로 서버를 개발 할 때 사용할 수 있다.

 

타입 정의 파일

: 타입스크립트 컴파일러에게 자바스크립트 라이브러리 API의 타입을 알려준다.
또한, js 라이브러리 내 변수 이름과 함수 시그니처에 타입을 추가한다.
-> ts가 js 라이브러리 내 멤버 이름과 타입을 읽을 수 있게 된다.

 

node_modules/@types/jquery/JQueryStatic.d.ts 코드

: 전체코드를 JQueryStatic 인터페이스로 감쌈.

d.ts 파일에서 declare는 const Sizzle 및 findNode() 선언이 포함된 js 라이브러리를 사용하고자 하는 것이다.
-> 주변 선언 또는 구현없는 선언이라 부르며 구현없이 타입만 선언하는 것으로, 해당 변수가 런타임에 존재함을 의미한다.

jQuery 타입 정의가 없다면 declare var $: any를 추가해 $ 변수로 jQuery API에 접근할 수 있다.

ajax(url: string, settings?: JQuery.AjaxSettings): JQuery.jqXHR;
-> ajax() 타입 정의

이렇듯 타입 정의 파일로 js 라이브러리를 사용할 수 있고 동시에 타입 정의 언어의 장점을 가질 수 있다.

 

shim

: IE와 같은 구버전 브라우저의 API를 가로채 ES6 표준에 맞게 변경해주는 라이브러리
npm install @types/es6-shim -D 로 shim을 설치할 수 있다.

타입 정의 파일 만들기

hello.js

function greeting(name) {
    console.log('hello '+ name);
}

 

-> hello.js에 greeting()함수가 있고 이 함수를 ts 프로젝트에 사용하고 이 함수에 대한 자동 완성과 타입 검사 기능을 추가하고자 한다.

 

./src/typing.d.ts

declare function greeting(name:string):void;

-> 이렇게 작성

 

main.ts

/// <reference path="./src/typing.d.ts" />

-> greeting() 함수는 npmjs.org에 공개된 것도 아니고 @types에 등록된 타입 정의 라이브러리가 아니다.
이 경우엔 reference 지시자(///)를 사용한다. 이 지시자는 ts 파일 맨 위에 배치한다.

이제 main.ts에서 greeti 까지만 써도 자동 완성 목록에 greeting() 함수의 파라미터와 반환 타입을 확인할 수 있다.
또한 path 대신 types를 입력해 라이브러리 이름만 적어도 된다.

 

ts 프로젝트에서 jQuery UI 라이브러리를 사용하는 방법

package.json

"devDependencies": {
    "@types/es6-shim": "^0.31.42",
    "@types/jquery": "^3.5.13",
    "@types/jqueryui": "^1.12.7",
    "typescript":"^3.4.1"
  }

-> jquery, jquery ui 타입을 정의한다.

 

index.html

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

-> jquery ui 스타일 시트 추가, jquery 라이브러리 추가, jquery ui 라이브러리 추가

다른 npm 라이브러리를 사용하듯 package.json 내 dependencies에 추가하지 않는 이유는?
jquery ui는 라이브러리의 번들된 버전을 지원하지 않아 웹팩이나 다른 번들러를 추가시켜야 하므로 앱이 복잡해짐
간단하게 앱을 만들기 위해 해당 라이브러리는 CDN으로 불러온다.

 

담소

디노가 맘에 드네여