TypeScript란? JavaScript와의 차이점

 

Copyright@GEEKFLARE

JavaScript, TypeScript란?

자바스크립트(JavaScript)는 웹 페이지를 동적으로 만들기 위해 개발된 프로그래밍 언어입니다. 웹 개발에서 필수적인 언어로, 클라이언트 사이드 스크립트로 주로 사용됩니다. 반면, 타입스크립트(TypeScript)는 자바스크립트의 상위 집합으로, 자바스크립트에 타입 시스템과 최신 ECMAScript 기능을 추가한 언어입니다. 타입스크립트(TypeScript) 는 Microsoft에서 개발한 프로그래밍 언어로, JavaScript의 확장된 버전입니다. TypeScript는 정적 타입을 지원하는 언어로, 개발자에게 타입 안정성과 코드의 가독성을 높여주는 기능을 제공합니다.

장단점

JavaScript

• 장점
  • 범용성: 모든 브라우저에서 실행 가능
  • 유연성: 동적 타이핑으로 빠른 개발 가능
  • 풍부한 라이브러리: 방대한 커뮤니티와 라이브러리 지원
• 단점
  • 에러 발견 어려움: 동적 타이핑으로 타입 오류를 컴파일 시간에 발견하기 어려움
  • 유지보수 어려움: 큰 프로젝트에서 코드 관리와 타입 오류 문제 발생

TypeScript

• 장점
  • 정적 타입 검사: 컴파일 시 타입 오류를 발견하여 코드 안정성 증가
  • 도구 지원: 뛰어난 IntelliSense와 리팩토링 지원
  • 명확한 문서화: 타입 정의로 함수나 컴포넌트의 기대 입력 설명 가능
  • 유지보수 용이: 큰 프로젝트에서 코드 안정성을 높여 유지보수에 유리
• 단점
  • 학습 곡선: JavaScript 개발자에게 새로운 타입 시스템 학습 필요
  • 설정과 컴파일: 별도의 컴파일 과정과 복잡한 설정 필요
  • 런타임 타입 검사 불가: 런타임에서 타입 검사를 위해 추가 코드 필요

TypeScript 예시 코드

•  자바스크립트

// JavaScript: 동적 타이핑
function rem(name) {
    return "Hello, " + name + "!";
}

console.log(rem("remazitensi"));  // Hello, remazitensi!
console.log(rem(10));       // Hello, 10!

• 타입스크립트

// TypeScript: 정적 타이핑과 객체 지향 프로그래밍
class Person {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    rem(): string {  // rem 메서드 정의
        return `Hello, ${this.name}!`;
    }
}

let remazitensi = new Person("remazitensi");
console.log(remazitensi.rem());  // Hello, remazitensi!
// TypeScript 컴파일러가 오류를 잡아줌
let numberrem: Person = new Person(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

 

TypeScript와 호환성 좋은 프레임워크

React

• 융합: TypeScript와 잘 융합됨
• 타입 정의: @types/react와 같은 라이브러리 제공
• 장점: 생산성과 코드 안정성 향상

Angular

• 지원: TypeScript를 공식 언어로 지원
• 장점: 강력한 타입 체크와 의존성 주입으로 큰 프로젝트에서도 데이터 타입을 쉽게 관리
• 효과: 타입 관련 휴먼 에러 방지, 안정적 애플리케이션 구축

Vue.js

• 지원: TypeScript 공식 지원
• 라이브러리: vue-class-component를 활용해 클래스 기반 컴포넌트 작성 가능
• 장점: 사용이 쉬워 프로젝트 구성 용이

NestJS

• 용도: Node.js 백엔드 애플리케이션 프레임워크
• 지원: TypeScript 기본 지원
• 기능: 강력한 의존성 주입, 모듈 시스템
• 장점: 코드 모듈화, 유연성 증가, 테스트 용이

Next.js

• 용도: 리액트 기반 프레임워크
• 지원: TypeScript 공식 지원
• 기능: 서버 사이드 렌더링 등 다양한 기능 제공

결론

• JavaScript: 작은 프로젝트나 빠른 프로토타이핑에 적합
• TypeScript: 중대형 프로젝트에서 코드 안정성과 유지보수를 위해 유용

JavaScript는 모든 브라우저에서 실행되며 유연하게 사용할 수 있지만, 동적 타이핑으로 인해 타입 오류를 컴파일 시간에 발견하기 어렵고 유지보수가 어려울 수 있습니다. TypeScript는 정적 타입 검사를 통해 오류를 쉽게 발견하고 코드 안정성을 높일 수 있지만, 학습 곡선이 있고 설정과 컴파일 과정이 필요합니다. 프로젝트의 크기와 요구사항에 따라 적합한 언어를 선택하는 것이 중요합니다!