타입스크립트 베이스캠프

타입스크립트 환경 설정

1. 타입스크립트 환경 설정

지금까지는 타입스크립트를 위니브 스크립트라는 서비스에서 사용했습니다. 이제는 로컬 환경에서 타입스크립트를 사용해보겠습니다.

1.1 설치 없이 사용

타입스크립트는 브라우저에서도 사용할 수 있습니다. 타입스크립트 코드를 작성하고 실행하려면 다음과 같이 태그를 사용하면 됩니다. 아래와 같은 CDN을 사용하지 않으면 타입스크립트 코드를 실행할 수 없습니다. 다만 이렇게 사용했을 경우 큰 프로젝트에서는 활용이 어려울 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript in Browser</title>
    <!-- TypeScript CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/5.3.3/typescript.min.js"></script>
</head>
<body>
    <!-- 실제 TypeScript 코드를 작성할 script 태그 -->
    <script type="text/typescript">
        // TypeScript 코드 예시
        interface Person {
            name: string;
            age: number;
        }
 
        const greeting = (person: Person): string => {
            return `안녕하세요, ${person.name}님! 당신은 ${person.age}살 입니다.`;
        }
 
        const user: Person = {
            name: "licat",
            age: 10
        };
 
        console.log(greeting(user));
    </script>
 
    <!-- TypeScript 컴파일러 설정 및 실행 -->
    <script>
        // DOM이 로드된 후 TypeScript 컴파일 실행
        window.addEventListener('DOMContentLoaded', () => {
            const tsCode = document.querySelector('script[type="text/typescript"]').textContent;
            const jsCode = ts.transpileModule(tsCode, {
                compilerOptions: {
                    target: ts.ScriptTarget.ES5,
                    module: ts.ModuleKind.None
                }
            }).outputText;
            
            // 컴파일된 JavaScript 실행
            const script = document.createElement('script');
            script.textContent = jsCode;
            document.body.appendChild(script);
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript in Browser</title>
    <!-- TypeScript CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/5.3.3/typescript.min.js"></script>
</head>
<body>
    <!-- 실제 TypeScript 코드를 작성할 script 태그 -->
    <script type="text/typescript">
        // TypeScript 코드 예시
        interface Person {
            name: string;
            age: number;
        }
 
        const greeting = (person: Person): string => {
            return `안녕하세요, ${person.name}님! 당신은 ${person.age}살 입니다.`;
        }
 
        const user: Person = {
            name: "licat",
            age: 10
        };
 
        console.log(greeting(user));
    </script>
 
    <!-- TypeScript 컴파일러 설정 및 실행 -->
    <script>
        // DOM이 로드된 후 TypeScript 컴파일 실행
        window.addEventListener('DOMContentLoaded', () => {
            const tsCode = document.querySelector('script[type="text/typescript"]').textContent;
            const jsCode = ts.transpileModule(tsCode, {
                compilerOptions: {
                    target: ts.ScriptTarget.ES5,
                    module: ts.ModuleKind.None
                }
            }).outputText;
            
            // 컴파일된 JavaScript 실행
            const script = document.createElement('script');
            script.textContent = jsCode;
            document.body.appendChild(script);
        });
    </script>
</body>
</html>

1.2 설치하여 사용

node환경에서 타입스크립트를 사용하려면 먼저 타입스크립트를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다. node가 설치되어 있지 않은 경우 공식홈페이지에서 node를 설치해주세요.

노드 설치 링크

노드를 설치하셨다면 터미널에서 아래와 같이 입력하여 전역에 타입스크립트를 설치할 수 있습니다.

npm install -g typescript

npm install -g typescript

설치가 완료되었다면 아래와 같이 타입스크립트 파일을 생성하고 실행할 수 있습니다.

# 버전 확인(현재 버전 5.6.3)
tsc -v
 
# 타입스크립트 파일 생성
touch index.ts

# 버전 확인(현재 버전 5.6.3)
tsc -v
 
# 타입스크립트 파일 생성
touch index.ts

파일을 열어 아래 코드를 작성합니다.

// index.ts
function greeting(name: string): string{
    return `안녕하세요, ${name}님!`;
}
 
console.log(greeting("licat"));

// index.ts
function greeting(name: string): string{
    return `안녕하세요, ${name}님!`;
}
 
console.log(greeting("licat"));

다시 터미널에서 아래 명령어를 입력하여 타입스크립트 파일을 실행합니다.

tsc index.ts
node index.js

tsc index.ts
node index.js

1.3 자동화 하기

타입스크립트 파일을 실행할 때마다 tsc 명령어를 입력하는 것은 번거로울 수 있습니다. 이를 자동화하기 위해 package.json 파일을 생성하고 아래와 같이 작성합니다.

{
    "name": "typescript-study",
    "version": "1.0.0",
    "scripts": {
        "start": "tsc index.ts && node index.js"
    },
    "devDependencies": {
        "typescript": "^5.6.3"
    }
}

{
    "name": "typescript-study",
    "version": "1.0.0",
    "scripts": {
        "start": "tsc index.ts && node index.js"
    },
    "devDependencies": {
        "typescript": "^5.6.3"
    }
}

그리고 아래 명령어를 입력하여 실행합니다.

npm start

npm start