TypeScript 코드에서 JavaScript 모듈 import하기

수성컴전자방입니다. TypeScript 코딩을 하다 보면 JavaScript로 만든 모듈을 쓰고 싶을 때가 있을 것입니다. 오늘은 TypeScript 코드에서 JavaScript 모듈을 import하는 방법을 알아보겠습니다.

1. 예제

1.1. 예제 폴더 구조

저는 아래와 같은 폴더 구조로 진행하겠습니다.(굵은 글씨는 폴더)

public: HTML 파일과 컴파일 결과 생성된 JavaScript 파일이 들어가는 폴더
- index.html
src: 컴파일 전 TypeScript 소스 코드와 JavaScript 소스 코드가 들어가는 폴더
- func.js: JavaScript로 작성된 모듈
- index.ts: TypeScript 소스 코드
tsconfig.json

1.2. public/index.html

<!DOCTYPE html>
<html>

<head>
<title>TS와 JS 혼용</title>
<script defer type="module" src="index.js"></script>
</head>

<body>

<header>
	<h1>TS에 JS 모듈 import 테스트</h1>
</header>

<section>
    <input type="text" id="a"/>와 <input type="text" id="b"/><br>
    더하기: <span id="result_add"></span><br>
    <button id="add" type="button">더하기</button>
</section>

</body>
</html> 

[Line 6]
<script defer type=”module” src=”index.js”></script>
import 문법을 사용하기 위해서 script 태그에 type=”module” 속성을 추가합니다.

1.3. src/func.js

/**
 * @param {string} a
 * @param {string} b
 * @returns {number}
 */
export function add(a, b){
    let num1=Number(a);
    let num2=Number(b);
    
    if (isNaN(num1) || isNaN(num2)) {
        alert("숫자만 입력하세요!");
        return -1;
    }
    
    return num1+num2;
}
 
/**
 * @param {string} a
 * @param {string} b
 * @returns {number}
 */
export function subtract(a, b){
    let num1=Number(a);
    let num2=Number(b);
    
    if (isNaN(num1) || isNaN(num2)) {
        alert("숫자만 입력하세요!");
        return -1;
    }
    
    return num1-num2;
}

타입 체크를 위해서 JSDoc을 사용합니다.
관련 글: [JSDoc]JavaScript 주석을 효율적으로 다는 방법
예제에서는 함수 정의할 때 named export를 했습니다. 다른 방법으로 export해도 상관없습니다.

1.4. src/index.ts

import {add, subtract} from './func.js';

function runadd(): void{
    let element_a=document.getElementById("a");
    let element_b=document.getElementById("b");
    let element_result=document.getElementById("result_add");

    let a: string="0";
    let b: string="0";

    if(element_a instanceof HTMLInputElement)   a=element_a.value;
    if(element_b instanceof HTMLInputElement)   b=element_b.value;
    if(element_result instanceof HTMLElement)   element_result.innerHTML=String(add(a, b));
}

function runsub(): void{
    let element_a=document.getElementById("a");
    let element_b=document.getElementById("b");
    let element_result=document.getElementById("result_add");

    let a: string="0";
    let b: string="0";

    if(element_a instanceof HTMLInputElement)   a=element_a.value;
    if(element_b instanceof HTMLInputElement)   b=element_b.value;
    if(element_result instanceof HTMLElement)   element_result.innerHTML=String(subtract(a, b));
}

document.getElementById("add")?.addEventListener("click", runadd);
document.getElementById("sub")?.addEventListener("click", runsub);

[Line 1 import]
import {add, subtract} from ’./func.js’;
불러올 변수나 함수, 클래스 등을 배열 형태로 작성합니다. 이때 이름은 원래 이름(예제의 경우 func.js에서 선언한 이름)을 씁니다.
from 뒤에 불러올 변수나 함수, 클래스 등이 있는 파일 이름과 확장명을 작성합니다.

2. tsconfig.json

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "ES2022",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "moduleDetection": "force",                        /* Control what method is used to detect module-format JS files. */
    //...

    /* Modules */
    "module": "ES2022",                                /* Specify what module code is generated. */
    //...

    /* JavaScript Support */
    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
    "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
    //...

    /* Emit */
    //...
    "outDir": "public",                                   /* Specify an output folder for all emitted files. */
    //...

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    //...
  },

  "include": ["src"]
}

[Line 4 target]
“target”: “ES2022”
import, export 문법을 지원하는 ES2015 이상으로 설정합니다.

[Line 5 moduleDetection]
“moduleDetection”: “force”
파일들을 개별 모듈로 보기 위해서 force로 설정합니다.

[Line 9 module]
“module”: “ES2022”
import, export 문법을 지원하는 ES2015 이상으로 설정합니다.

[Line 12 allowJs]
“allowJs”: true
JavaScript 파일도 컴파일하는 것을 허용합니다. 이때 TypeScript 코드(예제에서 index.ts)에서 JavaScript 모듈을 불러올 때 JSDoc 타입에 맞게 parameter를 입력했는지 체크합니다.

[Line 13 checkJs]
“checkJs”: true
JavaScript 코드(예제에서 func.js)에서 JSDoc을 토대로 타입 체크를 합니다.

[Line 18 outDir]
“outDir”: “public”

[Line 26 include]
“include”: [“src”]
이 코드는 compilerOptions가 아니므로 위의 다른 코드들과 달리 compilerOptions 중괄호 바깥에 작성해야 합니다.

3. 컴파일

tsc 명령을 실행하시면 정상적으로 컴파일됩니다. 타입 오류가 있으면 터미널 창에서 알려줄 것입니다.

4. 오늘은 여기까지!

제 글을 읽어 주셔서 감사합니다. 다음에 만나요!

필자(수성컴)의 노트북은 갤럭시 북 Flex2입니다.(Windows 11)

목차