TypeScript VS JavaScript

웹사이트 구현을 어느정도 연습해보았다면 타입스크립트를 활용해서 웹사이트 구동시 발생할 수 있는 오류를 어느 정도 사전에 방지하면서 코드를 구성해나갈 수 있다.

✍🏼 타입스크립트 특징

• JavaScript 의 타입을 강제시키는 언어
• 정적 타입의 컴파일 언어( JS : 동적 타입 - 런타임 중 오류 확인 가능)
• 슈퍼셋 즉, 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어로 .js로 완성된 코드는 .ts로 확장자명을 변환해 사용 가능하다
• 장점 ?
  • 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거할 수 있다. ( 목적에 맞지 않는 타입의 코드는 실행시키지 않는다.)
  • 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 빠르다.
• 단점 ? 매번 코드를 작성하면서 타입과 오류를 확인하기 때문에 작성하는데 시간이 소요된다.

💡 TIP !
.ts는 타입스크립트만 사용할 수 있기 때문에 React를 사용하면서 JSX를 작성할 경우 확장자명을 .tsx로 지정해주면 HTML관련 코드 작성이 가능하다.

✍🏼 타입스크립트 작성 방법

타입스크립트는 타입 추론으로 변수에 데이터를 담으면 자동으로 해당 변수의 타입을 지정하기 때문에 다른 타입의 데이터를 넣으면 실행되지 않는다.
여러 타입을 넣고 싶다면 미리 타입을 지정해주는 방법도 있다.

• String / Number 타입

let aaa : string = "안녕하세요"
aaa = 3 //에러 발생

let bbb : number = 3
bbb 3 = "안녕하세요" //에러 발생

• 배열 타입

let eee: number[] = [1, 2, 3, 4, 5, 6]
let fff: string[] = ["철수","영희"]
//배열 안에 여러 타입을 넣고싶다면,
//TS에서 | : or, & : and 
let ggg: (string | number)[] = ["훈이",2,3,4,"철수"]

• 객체 타입 - 객체는 타입을 지정해줘야한다.

interface IProfile{ //타입 지정
  name : string
  age : number | string
  school  :string
}

const profile:IProfile = { //IProfile 타입 부여
  name  :"철수",
  age : 8,
  school : "다람쥐초등학교"
}
profile.age = "8살" //숫자 또는 문자로 지정했기때문에 문자열도 가능