웹프로그래밍 무작정따라하기/JS

[TypeScript] 타입스크립트 설정 파일

RIMD 2021. 1. 24. 02:10

프로젝트의 최상단에 설정해야함

tsconfig.json

 

{
    "include": [
        // 전체 타입스크립트 포함
        "src/**/*.ts"
    ],
    "exclude": [
        // 노드모듈은 타입스크립트 컴파일 제외
        "node_modules"
    ],
    "compilerOptions": {
        // 타입스크립트 컴팡일러 옵션들
        "module": "CommonJS", // 모듈에 대한 옵션
        "rootDir": "src", // 모듈의 루트가 되는 폴더지정
        "outDir": "dist", // 최상위폴더
        "target": "es5", // 컴파일할 버전
        "sourceMap": true, // ts 파일도 console에서 확인 가능
        "noImplicitAny": true, // any형식 방지
    }
}
}

 

 

 

 

  터미널에서 tsc 하면  

  dist파일 생성되고 컴파일된 js파일이 생성됨  

 

 

 

 

 

index.html로

컴파일된 js파일 확인 하는 방법!!

 

tsconfig.json 설정파일

{
    "include": [
        // 전체 타입스크립트 포함
        "src/**/*.ts"
    ],
    "exclude": [
        // 노드모듈은 타입스크립트 컴파일 제외
        "node_modules"
    ],
    "compilerOptions": {
        // 타입스크립트 컴팡일러 옵션들
        "module": "es6", // 모듈에 대한 옵션
        "rootDir": "src", // 모듈의 루트가 되는 폴더지정
        "outDir": "dist", // 최상위폴더
        "target": "es6", // 컴파일할 버전
        "sourceMap": true, // ts 파일도 console에서 확인 가능
        //"noImplicitAny": true, // any형식 방지
    }
}

 

hello.ts

import add from './util.js'; //index.html로 내보낼 때에는 .js까지 붙여줘야함

const value = add(1,2);
console.log(value);

util.ts

export default function add(a, b){
    return a + b;
}

export function minus(a, b){
    return a - b;
}

패키지 구조

ts 파일은 터미널를 통해서 tsc 명령을 통해 빌드 후,

index.html에서

<script type="module" src="./dist/hello.js"></script> 설정해주고,

실행 시킨 후! console창 확인하면 hello.js가 적용!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="./dist/hello.js"></script>
</head>
<body>
    
</body>
</html>
저작자표시 비영리 변경금지