AI를 사용하여 JavaScript을 TypeScript으로 변환

아카데믹

• 유효하지 않거나 불완전한 소스 코드 번역
• 인라인 지침을 통한 사용자 정의 변환, 주석에 태그 사용
• 형식이 지정되지 않은 소스 코드 스니펫 변환
• 복잡한 구문 표현 번역
• 번역 시 대상 프로그래밍 언어의 구문, 의미론 및 화용론이 고려됨

번역 도전 과제

타입 주석

JavaScript에서는 변수를 타입 주석 없이 선언할 수 있으며, 잘못된 타입이 사용될 경우 런타임 오류가 발생할 수 있습니다. 반면 TypeScript는 타입 안전성을 보장하기 위해 명시적인 타입 주석을 요구합니다.

JavaScript 예시:

let x = 5; // x는 number로 추론됨

TypeScript 예시:

let x: number = 5; // x는 number로 명시적으로 선언됨

TypeScript 핸드북 - 기본 타입

함수 오버로딩

JavaScript는 함수 오버로딩을 기본적으로 지원하지 않지만, TypeScript는 함수에 대해 여러 시그니처를 정의할 수 있습니다.

JavaScript 예시:

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

TypeScript 예시:

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
    return a + b;
}

TypeScript 핸드북 - 함수 오버로드

인터페이스 구현

JavaScript는 프로토타입 기반 상속을 사용하지만, TypeScript는 클래스가 구현할 수 있는 인터페이스를 정의할 수 있습니다.

JavaScript 예시:

class Dog {
    bark() {
        console.log("Woof");
    }
}

TypeScript 예시:

interface Animal {
    bark(): void;
}

class Dog implements Animal {
    bark() {
        console.log("Woof");
    }
}

TypeScript 핸드북 - 인터페이스

유니온 타입

JavaScript는 변수가 어떤 타입의 값도 가질 수 있도록 허용하지만, TypeScript는 변수가 여러 타입을 가질 수 있도록 유니온 타입을 제공합니다.

JavaScript 예시:

let value = Math.random() > 0.5 ? "Hello" : 42;

TypeScript 예시:

let value: string | number = Math.random() > 0.5 ? "Hello" : 42;

TypeScript 핸드북 - 유니온 타입

열거형

JavaScript는 내장된 열거형 타입이 없지만, TypeScript는 코드 가독성을 높이기 위해 열거형을 정의할 수 있는 방법을 제공합니다.

JavaScript 예시:

const Colors = { RED: 'red', GREEN: 'green' };

TypeScript 예시:

enum Colors {
    RED = 'red',
    GREEN = 'green'
}

TypeScript 핸드북 - 열거형

제네릭

JavaScript의 함수는 타입 안전성이 없지만, TypeScript는 어떤 데이터 타입과도 작동할 수 있는 제네릭 함수를 생성할 수 있습니다.

JavaScript 예시:

function identity(arg) {
    return arg;
}

TypeScript 예시:

function identity<T>(arg: T): T {
    return arg;
}

TypeScript 핸드북 - 제네릭

엄격한 널 검사

JavaScript는 엄격한 검사 없이 null 및 undefined 값을 허용하지만, TypeScript는 더 엄격한 널 검사를 시행할 수 있습니다.

JavaScript 예시:

let name = null;

TypeScript 예시:

let name: string | null = null;

TypeScript 핸드북 - 널 가능성

모듈 시스템

JavaScript는 CommonJS 또는 ES6 모듈을 사용하지만, TypeScript는 import/export 구문을 가진 더 구조화된 모듈 시스템을 가지고 있습니다.

JavaScript 예시:

const moduleA = require('moduleA');

TypeScript 예시:

import moduleA from 'moduleA';

TypeScript 핸드북 - 모듈