JavaScript vs. TypeScript: What's the difference?

Library

JavaScript vs. TypeScript: What's the difference?

Andrew's Akashic Records 2023. 5. 9. 10:27

728x90

JavaScript와 TypeScript는 웹 개발에 주로 사용되는 관련 프로그래밍 언어로, TypeScript는 JavaScript의 상위 집합입니다. 두 언어는 몇 가지 주요한 차이점이 있습니다:

1. 문법 및 타입 검사:
JavaScript는 동적 타입 언어로, 변수 타입이 런타임에 결정됩니다. 이로 인해 예측하기 어려운 동작이 발생하고 런타임 오류 가능성이 높아질 수 있습니다.

반면 TypeScript는 정적 타입 언어로, 컴파일 시간에 변수 타입이 확인됩니다. 이는 개발 과정에서 타입 관련 오류를 조기에 발견하는 데 도움이 되어 코드를 더 신뢰할 수 있게 만들고 유지 관리가 쉬워집니다.

2. 타입 주석 및 인터페이스:
TypeScript는 타입 주석과 인터페이스를 도입하여 개발자가 코드 내 객체와 변수의 구조 및 타입을 정의할 수 있게 합니다. 이로 인해 코드 문서화가 개선되어 개발자가 코드 구조를 이해하기 쉬워지며 타입 검사를 강제하여 런타임 오류 가능성이 줄어듭니다.

3. 클래스와 객체 지향 기능:
JavaScript와 TypeScript 모두 객체 지향 프로그래밍을 지원하지만, TypeScript는 클래스와 인터페이스, 접근 제어자 등 객체 지향 기능을 보다 강력하게 구현합니다. ES6 (ECMAScript 2015)의 도입으로 JavaScript도 클래스를 지원하게 되었지만, TypeScript는 대규모 프로젝트와 다른 객체 지향 언어로부터 온 개발자에게 더 매력적인 추가 기능을 제공합니다.

4. 도구 및 IDE 지원:
TypeScript는 정적 타이핑과 타입 주석 덕분에 더 나은 도구 및 IDE 지원을 제공합니다. 이에는 자동 완성, 리팩토링, 오류 탐지와 같은 기능이 포함되어 개발자가 코드를 작성하고 유지 관리하기 쉬워집니다.

5. 컴파일:
TypeScript 코드는 웹 브라우저나 다른 JavaScript 런타임 환경에서 실행되기 전에 JavaScript로 컴파일(또는 트랜스파일)되어야 합니다. 이로 인해 개발 과정에 추가 단계가 도입되지만 개발자가 TypeScript의 최신 기능을 사용하고 호환성을 위해 특정 JavaScript 버전을 대상으로 할 수 있게 합니다.

요약하면, TypeScript는 정적 타이핑, 타입 주석 및 강화된 객체 지향 프로그래밍 기능과 같은 추가 기능을 제공하는 JavaScript의 상위 집합입니다. 이를 통해 오류를 조기에 발견하고 더 나은 도구 및 IDE 지원을 제공하며 대규모 프로젝트에 적합합니다. 그러나 TypeScript 코드를 JavaScript로 변환하는 추가 컴파일 단계가 필요합니다.

다음은 JavaScript와 TypeScript의 차이점을 보여주는 간단한 예제 코드입니다.

JavaScript 코드:

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

const result = add(1, 2);
console.log(result); // 출력: 3

const unexpectedResult = add("1", "2");
console.log(unexpectedResult); // 출력: "12" (문자열 결합이 발생했습니다.)

위의 JavaScript 코드에서는 `add` 함수가 두 개의 인자를 받아 합산한 값을 반환합니다. 이 경우, 예상치 못한 결과가 발생할 수 있습니다. 예를 들어, 두 개의 문자열을 전달하면 문자열 결합이 발생하게 됩니다.

TypeScript 코드:

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

const result = add(1, 2);
console.log(result); // 출력: 3

const unexpectedResult = add("1", "2"); // 오류: 인수 형식이 올바르지 않습니다.
console.log(unexpectedResult);

TypeScript 코드에서는 `add` 함수의 매개변수에 타입 주석이 추가되어 있어, 컴파일 시점에 타입 검사를 수행합니다. 만약 문자열을 전달하려고 하면, 컴파일러가 오류를 발생시켜 문제를 조기에 발견할 수 있게 됩니다. 이러한 타입 주석은 코드의 안정성과 가독성을 향상시키는 데 도움이 됩니다.

JavaScript와 TypeScript를 사용하는 방법에 대해 설명하겠습니다.

JavaScript 사용법:

1. 웹 브라우저에서 사용하기
HTML 파일에서 JavaScript 코드를 사용하려면, `<script>` 태그를 사용하여 JavaScript 코드를 작성하거나 외부 파일을 참조할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Example</title>
  </head>
  <body>
    <script>
      // 여기에 JavaScript 코드를 작성하세요.
      console.log("Hello, JavaScript!");
    </script>

    <!-- 또는 외부 파일을 참조하세요. -->
    <script src="external.js"></script>
  </body>
</html>

2. Node.js에서 사용하기
JavaScript를 서버 사이드에서 실행하려면 Node.js를 설치해야 합니다. Node.js를 설치한 후, `.js` 확장자를 가진 파일에 JavaScript 코드를 작성하고 명령줄에서 해당 파일을 실행할 수 있습니다.

// app.js
console.log("Hello, JavaScript from Node.js!");

명령줄에서 실행하기:

$ node app.js

TypeScript 사용법:

1. TypeScript 설치하기
Node.js가 설치되어 있는 경우, 다음 명령어를 사용하여 TypeScript를 전역적으로 설치할 수 있습니다.

$ npm install -g typescript

2. TypeScript 코드 작성하기
`.ts` 확장자를 가진 파일에 TypeScript 코드를 작성합니다.

// app.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("TypeScript"));

3. TypeScript 코드 컴파일하기
작성한 TypeScript 코드를 컴파일하여 JavaScript 코드로 변환하려면, 다음 명령어를 사용합니다.

$ tsc app.ts

이 명령어는 `app.js`라는 이름의 JavaScript 파일을 생성합니다.

4. 컴파일된 JavaScript 코드 실행하기
컴파일된 JavaScript 코드는 웹 브라우저에서 `<script>` 태그를 사용하여 실행할 수 있거나, Node.js에서 실행할 수 있습니다.

웹 브라우저에서 실행하기:

<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript Example</title>
  </head>
  <body>
    <script src="app.js"></script>
  </body>
</html>

Node.js에서 실행하기:

$ node app.js

이렇게 하면 JavaScript와 TypeScript를 사용할 수 있습니다. 이들 간 차이점과 각각의 장단점을 고려하여 프로젝트에 적합한 언어를 선택하세요.

JavaScript와 TypeScript의 성능 차이는 실질적으로 거의 없습니다. 이유는 TypeScript가 컴파일 시 JavaScript 코드로 변환되기 때문입니다. 따라서 실행되는 코드는 결국 JavaScript이며, 성능은 JavaScript 엔진 및 런타임 환경에 의해 결정됩니다.

그러나 TypeScript의 몇 가지 기능과 특징들이 개발자의 생산성과 코드의 안정성에 영향을 미칠 수 있습니다:

타입 검사와 에러 발견: TypeScript의 정적 타이핑은 개발 과정에서 타입 관련 오류를 조기에 발견할 수 있게 도와줍니다. 이로 인해 런타임 오류를 줄이고 코드의 안정성을 높일 수 있습니다.
도구 및 IDE 지원: TypeScript는 강력한 도구 및 IDE 지원을 제공하여 개발 과정의 효율성을 향상시킵니다. 자동 완성, 리팩토링, 에러 감지 등의 기능은 코드 작성과 유지 관리가 더 쉬워지게 만듭니다.
코드 가독성 및 유지 관리: TypeScript의 타입 주석, 인터페이스 및 클래스 등의 기능은 코드 가독성을 향상시키고 대규모 프로젝트의 유지 관리가 용이하게 합니다.

결론적으로, 실행 시간의 성능 차이는 없지만, TypeScript는 개발 과정에서의 생산성, 안정성 및 유지 관리 측면에서 이점을 제공할 수 있습니다. 프로젝트의 요구 사항과 개발자의 선호에 따라 적절한 선택을 하면 됩니다.

728x90

저작자표시