Javascript vs Typescript

타입스크립트

타입스크립트란 자바스크립트의 타입을 부여하여 강제시키는 언어이다.
자바스크립트의 확장된 언어라고 볼 수 있다.
기존의 자바스크립트는 아래와 같이 변수에 문자열을 할당했다가 이후에 숫자열을 재할당해도 문제가 되지 않았다.

let apple = "사과"

hello = 7777

하지만 타입스크립트에서는 변수의 자료형을 지정해주기 때문에 위와같이 재할당을 하게 되면 빨간 밑줄과 함께 에러 메시지를 띄워주게 된다.

타입스크립트의 또다른 장점으로는 타입 추론이 가능해진다.
타입 추론이란 변수 또는 함수의 타입을 추론을 하고 추론한 타입과 다르면 에러메시지를 띄워주게 되는데 이로 인해 타입으로 인한 에러가 대폭 줄어들게 된다.

let apple: string = "사과"

hello = "12345" // 빨간줄이 나오며 에러가 발생

자바스크립트는 타입이 엄격하지 않다.
따라서, 변수나 상수를 만들면 처음에 문자를 넣었다가, 나중에 숫자를 넣는 등 자유자재로 변환이 가능하다. 이러한 점이 개발에는 굉장히 편리해 보이지만 큰 서비스를 여러명이 개발하는 경우에는 문제가 될 수 있다.

타입스크립트에 사용방법은 다음과 같다.

let aaa : string = "안녕하세요"
let bbb : number = 123 

위와 같이 변수명 옆에 타입을 지정해주면 된다.
객체 타입을 만들어줄때 네이밍에는 관례가 있는데 이름을 지을때 앞에 대문자 I 를 붙여주면 된다.

interface Iobj {
  aaa: number;
  bbb: string;
  ccc: boolean
}

let obj: Iobj = { aaa: 1, bbb: "2", ccc: true }

객체는 위와같이 타입을 설정해주면 된다.

타입스크립트 파일 확장자

타입스크립트를 사용하는 파일 중 화면을 그려주는 return 부분을 포함하고 있다면 확장자를 ts로 하면 에러가 발생한다.
이유는 화면을 그려주는 부분이 jsx요소이기 떄문에 .tsx로 확장자를 사용하여야 한다.
따라서 jsx요소가 없는 자바스크립트 기능부분은 .ts 로 변경하고, return이 있는 jsx 부분을 포함하고 있다면 .tsx 로 변경하면 된다.

추가적으로 타입스크립트에서 또는, 그리고를 사용할때에는 아래와 같이 사용한다.

interface Iobj {
  aaa: number | string;
  bbb: string & number;
  ccc?: boolean
}

let obj: Iobj = { aaa: 1, bbb: "2", ccc: true }

타입을 지정할 때 또는은 |, 그리고는 &와 같이 하나만 적어주면 된다.
물음표를 뒤에 넣어주게 되면 키값에 없어도 되는 이라는 뜻이 된다.
필수값이 아니기 때문에 있어도 되고 없어도 되는 키와 밸류가 되는 것이다.