Typescript 공부( 1 ) - Javascript VS Typescript

용스·2022년 9월 23일
0

Typescript

목록 보기
2/5

왜 Typescript를 공부해야 하는가?

이전 프로젝트부터 타입의 불일치에 대해 불편함을 많이 느꼈고 그로 인해 Typescript를 공부하게 되었다.

그럼 Javascript와 Typescript의 차이가 무엇인지, Typescript의 장점이 무엇인지 확인해보자.

1. Javascript는 동적 언어, Typescript는 정적 언어다.

동적 언어, 정적 언어라는 표현이 뭔가 와닿지 않는다.
용어 정리부터 해보자

  • 타입 ( Type )
    한글로 말하면 자료형을 뜻한다. ( 실수형, 정수형 등등 )

  • 동적 언어
    MDN 사이트의 검색 결과를 확인해보면 특정 타입과 연결되지 않는 언어를 동적 언어라고 표현한다.

  • 정적 언어
    자료형을 컴파일 시에 결정하는 것을 뜻한다.
    컴파일, 뭔가 어려운 단어가 나왔다.
    다음 항목에서 확인해보자.

2. Javascript는 Runtime시, Typescript는 CompileTime시 타입이 결정된다.

  • Compile Time
    컴퓨터가 인식할 수 있는 기계어 코드로 변환되어 실행 가능한 프로그램이 되는 과정
  • Runtime
    Compile 과정을 마친 응용 프로그램이 사용자에 의해서 실행되어 지는 때를 의미

단어 정리는 거의 끝난 것 같다.
표를 통해 Javascript와 Typescript를 구분해보자.

JavascriptTypescript
동적 언어정적 언어
배우기 쉬움배우기 까다로움
코드가 비교적 짧음작성해야할 코드가 길어짐
Runtime에 자료형이 정해짐Compile Time에 자료형이 정해짐

표에서 Bold체로 표기한 부분들이 바로 Typescript를 사용하는 목적이다.

그럼 Typescript가 어떻게 장점이 있는지 다음 blog 자료를 통해 확인해보자.

3. Typescript 장점 1 - 오류를 미리 방지할 수 있다.

  • 정적 타입 언어를 사용하면 IDE에서 바로 에러를 발생시켜주기 때문에 개발자가 바로바로 수정할 수 있다.
  • 다음 코드를 통해 확인해보자
// 두 수를 더해서 console로 출력하는 함수
function sum( a, b ){
  const total = a + b;
  console.log( `console : ${total}` );
}
  • JavaScript (동적 타입 언어)로 작성된 경우
    동적 타입 언어에서는 IDE가 컴파일 타임에 a, b의 타입을 모르기 때문에 위와 같이 string 간의 concat 뿐 아니라 number형과 string의 concat 또한 발생한다,
    잘못된 코드가 사용자에게 전달이 됐을 것이고 사용자가 실행을 하다가 에러가 발생했을 것이다.
function sum( a, b ){
  const total = a + b;
  console.log( `console : ${total}` );
}

sum( 'x', 'y' );  // console : xy
sum( 1, 2 );	  // console : 3
sum( 1, 'x' );	  // console : 1x
  • TypeScript (정적 타입 언어)로 작성된 경우
    정적 타입 언어에서는 IDE가 타입을 알고 있기 때문에 잘못된 속성명을 입력하면 빨간색 밑줄이 그어지며 에러가 발생한다.
function sum( a : number, b : number ){
  const total = a + b;
  console.log( `console : ${total}` );
}

sum( 'x', 'y' );  // error
sum( 1, 2 );	  // console : 3
sum( 1, 'x' );	  // error

3. Typescript 장점 2 - 자동으로 객체의 속성을 확인할 수 있다.

다음과 같은 Object가 선언되어있다.

const pserson = {
  name : "jigom",
  age : 35
}

동적 언어와 정적 언어 둘다 person.nickname이라는 속성을 출력해보자

// 동적 언어 : Javascript => 실행해야 에러 발생
console.log( person.nickname );
  • 동적 타입 언어
    어떤 객체 뒤에 .을 입력해도 해당 객체의 타입을 모르기 때문에 별다른 정보가 보이지 않는다.
    개발자가 해당 객체의 모든 속성 이름을 알고있어야 한다. 속성 이름이 생각나지 않을 때는 소스 코드에서 찾아봐야 한다.
// 정적 언어 : typescript => IDE 에서 오류를 발견
console.log( person.nickname );
  • 정적 타입 언어
    어떤 객체 뒤에 .을 입력하면 IDE가 해당 객체의 타입을 알고 있기 때문에 해당 객체의 속성들의 이름을 나열해준다. ⇒ 개발 시 생산성 향상
    자동으로 어떤 속성들이 있는지 보여주기 때문에 편리하다.

앞으로 Typescript를 공부하면서 정리할 예정이다.

참고 자료

profile
일단 해보자

0개의 댓글