Akashic Records

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의 몇 가지 기능과 특징들이 개발자의 생산성과 코드의 안정성에 영향을 미칠 수 있습니다:

  1. 타입 검사와 에러 발견: TypeScript의 정적 타이핑은 개발 과정에서 타입 관련 오류를 조기에 발견할 수 있게 도와줍니다. 이로 인해 런타임 오류를 줄이고 코드의 안정성을 높일 수 있습니다.

  2. 도구 및 IDE 지원: TypeScript는 강력한 도구 및 IDE 지원을 제공하여 개발 과정의 효율성을 향상시킵니다. 자동 완성, 리팩토링, 에러 감지 등의 기능은 코드 작성과 유지 관리가 더 쉬워지게 만듭니다.

  3. 코드 가독성 및 유지 관리: TypeScript의 타입 주석, 인터페이스 및 클래스 등의 기능은 코드 가독성을 향상시키고 대규모 프로젝트의 유지 관리가 용이하게 합니다.

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

728x90
저작자표시

'Library' 카테고리의 다른 글

Gradle 구조와 사용법  (0) 2023.05.19
Web 더블클릭 방지하는 방법  (0) 2023.05.09
ECMAScript 5와 ECMAScript 2015 비교  (0) 2023.05.09
How to use ForkJoinPool in Java  (0) 2023.05.08
SSL인증서 PEM (Apache)과 JKS (Tomcat)로 상호 변환  (0) 2023.05.02
'Library' Related Articles more
Comments