Question

javascript, typescript 차이점

Answer 1

JavaScript와 TypeScript는 많은 공통점을 가지고 있지만, TypeScript는 JavaScript의 상위 집합(superset)으로, JavaScript의 모든 기능을 포함하면서 추가적인 기능을 제공합니다. 주요 차이점은 정적 타입 시스템과 개발 도구 지원에 있습니다.

1. 정적 타입 지정 (Static Typing)

• JavaScript: 동적 타입 언어로, 변수가 어떤 타입인지 명시하지 않으며, 실행 시 타입이 결정됩니다. 예를 들어, 동일한 변수에 다른 타입의 값을 자유롭게 할당할 수 있습니다.

  let value = 42; // number
  value = 'hello'; // string (타입 변경 가능)
  

• TypeScript: 정적 타입 언어로, 컴파일 시점에 타입을 명시할 수 있습니다. 타입을 명시하면, 코드 작성 중에 타입 오류를 미리 잡을 수 있습니다.

  let value: number = 42;
  value = 'hello'; // 오류 발생: 'string' 타입은 'number' 타입에 할당할 수 없습니다.
  

2. 컴파일 단계

• JavaScript: 원래는 인터프리터 언어로 브라우저나 Node.js에서 바로 실행됩니다. 별도의 컴파일 과정이 없습니다.
• TypeScript: TypeScript는 컴파일러(tsc)를 통해 JavaScript로 변환된 후 실행됩니다. 즉, TypeScript로 작성된 코드는 직접 실행되지 않고, 컴파일을 거쳐 JavaScript 코드로 변환됩니다.

3. 개발 도구 지원 및 오류 검출

• JavaScript: 문법적 오류나 타입 오류는 코드가 실행되기 전까지 확인할 수 없습니다. IDE는 코드 완성이나 정적 분석에 대해 제한된 지원만 제공합니다.
• TypeScript: TypeScript는 강력한 정적 분석을 지원하며, 코드 작성 시 IDE에서 타입 오류, 문법 오류 등을 미리 알려줍니다. 이로 인해 코드 작성 시점에서 많은 오류를 미리 방지할 수 있습니다.
  • 예: VSCode 같은 IDE에서는 TypeScript 코드의 오류를 실시간으로 잡아주고, 자동 완성 기능을 향상시킵니다.

4. 추가적인 언어 기능

• TypeScript는 JavaScript에 없는 몇 가지 추가적인 기능을 제공합니다:

  • 인터페이스 (Interface): TypeScript에서는 인터페이스를 사용해 객체의 구조를 정의할 수 있습니다.

    interface User {
      name: string;
      age: number;
    }
    
    const user: User = { name: 'Alice', age: 25 };
    

  • 제네릭 (Generics): 함수나 클래스에서 사용할 타입을 나중에 정의할 수 있는 기능을 제공합니다.

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

  • 타입 추론 (Type Inference): 명시적으로 타입을 지정하지 않아도, TypeScript는 대부분의 경우 타입을 자동으로 추론해줍니다.

5. 타입 시스템

• JavaScript: 타입 시스템이 없기 때문에 개발자가 변수를 선언할 때 타입을 지정하지 않습니다.
• TypeScript: 엄격한 타입 시스템을 가지고 있으며, 변수, 함수 매개변수, 반환 값 등에 대해 타입을 지정할 수 있습니다. 이러한 타입 시스템은 코드의 안정성과 유지보수를 크게 개선할 수 있습니다.

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

6. 클래스와 상속

• JavaScript: ES6부터 클래스 기반의 객체지향 프로그래밍을 지원하며, 이를 통해 상속 및 생성자 등을 사용할 수 있습니다.

  class Person {
    constructor(name) {
      this.name = name;
    }
  }
  

• TypeScript: TypeScript는 JavaScript의 클래스 개념을 확장하고, 인터페이스, 추상 클래스 등 더 강력한 객체지향 프로그래밍 기능을 제공합니다.

  abstract class Animal {
    abstract sound(): void;
  }
  
  class Dog extends Animal {
    sound() {
      console.log('Bark');
    }
  }
  

7. 런타임 에러와 컴파일 에러

• JavaScript: 동적 타입 언어이기 때문에 대부분의 오류는 런타임에서만 발견됩니다. 예를 들어, 함수에 잘못된 타입의 값을 전달하면 프로그램이 실행될 때 오류가 발생합니다.
• TypeScript: 정적 타입 체크를 통해 컴파일 단계에서 오류를 발견할 수 있습니다. 컴파일러가 타입 오류를 사전에 감지하여 런타임 오류를 줄일 수 있습니다.

8. ESM 및 CommonJS 지원

• JavaScript: 기본적으로 ESM(ES Modules)와 CommonJS 모듈 시스템을 지원합니다.
• TypeScript: ESM 및 CommonJS 모듈 시스템을 모두 지원하며, tsconfig.json에서 모듈 시스템을 설정할 수 있습니다.

  {
    "compilerOptions": {
      "module": "ESNext", // 또는 "CommonJS"
      "target": "ES6"
    }
  }
  

9. 커뮤니티 및 생태계

• JavaScript: JavaScript는 방대한 생태계를 자랑하며, 웹 개발을 위한 기본 언어입니다. 수많은 라이브러리와 프레임워크가 JavaScript로 작성되었습니다.
• TypeScript: TypeScript도 JavaScript의 생태계를 적극 활용할 수 있습니다. React, Vue.js, Angular 등 대부분의 프레임워크가 TypeScript를 공식적으로 지원하며, 타입 정의 파일(예: @types/react)을 통해 JavaScript 라이브러리와도 쉽게 통합할 수 있습니다.

차이점 요약

특징	JavaScript	TypeScript
타입 시스템	동적 타입 (타입 없음)	정적 타입 (타입 명시 가능)
컴파일 필요 여부	없음 (바로 실행 가능)	TypeScript → JavaScript 컴파일 필요
에러 검출 시점	런타임에서 에러 발생	컴파일 시점에서 에러 발생 가능
개발 도구 지원	제한적인 코드 완성 및 분석 도구	풍부한 IDE 지원, 코드 완성 및 타입 체크
객체지향 지원	기본적인 클래스 지원 (ES6 이후)	클래스, 인터페이스, 추상 클래스 등 OOP 기능
모듈 시스템	ESM 및 CommonJS 지원	ESM 및 CommonJS 지원
주로 사용되는 환경	웹 브라우저, Node.js	대규모 애플리케이션, 팀 프로젝트

결론:

• JavaScript는 유연하고 빠르게 개발할 수 있는 동적 언어로, 소규모 프로젝트나 빠른 프로토타이핑에 적합합니다.
• TypeScript는 정적 타입 시스템과 강력한 도구 지원 덕분에 대규모 프로젝트, 유지보수성, 팀 협업에 더 유리합니다. 코드의 안정성을 높이고, 개발 중에 많은 오류를 사전에 발견할 수 있는 장점이 있습니다.

TypeScript를 사용하면 JavaScript의 모든 기능을 활용하면서, 추가적인 안전성과 도구 지원을 얻을 수 있습니다.