Javascript vs TypeScript

 

 잠깐이나마 배웠었던 C++과 비교해서 얘기하자면, C++은 변수를 선언할 때부터 int인지 string인지 정하고 선언한다.

 

int num = 3; 
string str = "3";

이런식으로 선언을 하고, 둘이 더하거나 빼려는 작업을 하면 자료형이 달라서 애초에 계산이 안된다.

let minus = 1-'1';// 0

let sum = 1+'1'; // '11'

그에 비해 자바스크립트는 굉장히 유연하다. 숫자와 문자열을 더하고 빼는 것이 가능하다. (결과는 좀 다른 양상인데, 이유는 모르겠음)

 

 

 타입스크립트는 자바스크립트의 기반의 언어다. 

자바스크립트는 클라이언트 측 스크립트 언어, 타입스크립트는 객체 지향 컴파일 언어다. 

 

위에 C++이 컴파일 언어인데, 컴파일 할 때 컴파일러가 오류를 잡아낼 수 있다.(모든 오류를 잡아내는 것은 아님)

타입스크립트도 마찬가지로 컴파일 타이밍에 오류를 포착한다. 

 

 타입스크립트의 이름에서 알 수 있듯이 타입을 지정해줘야 한다. 타입을 지정해주지 않으면 타입을 추론한다. 

 

export interface IUpdateBoardInput {
  title?: string;
  contents?: string;
  youtubeUrl?: string;
  boardAddress?: {
    zipcode?: string;
    address?: string;
    addressDetail?: string;
  };
  images?: string[];
}

 ts파일에 type들만 모아서 정리해놓고 export 시킨 후, 쓰는 곳에서 import해서 쓰는 방법도 있다. 

 

export interface IBoardWriteUIProps {
  isActive: boolean;
  writerError: string;
  passwordError: string;
  titleError: string;
  contentsError: string;
  onChangeWriter: (event: ChangeEvent<HTMLInputElement>) => void;
  onChangePassword: (event: ChangeEvent<HTMLInputElement>) => void;
  onChangeTitle: (event: ChangeEvent<HTMLInputElement>) => void;
  onChangeContents: (event: ChangeEvent<HTMLTextAreaElement>) => void;
  onChangeYoutubeUrl: (event: ChangeEvent<HTMLInputElement>) => void;
  onChangeAddressDetail: (event: ChangeEvent<HTMLInputElement>) => void;
  onClickAddressSearch: () => void;
  onCompleteAddressSearch: (data: any) => void;
  onChangeFileUrls: (fileUrls: string, index: number) => void;
  onClickSubmit: () => void;
  onClickUpdate: () => void;
  isEdit: boolean;
  data?: any;
  isOpen: boolean;
  zipcode: string;
  address: string;
  addressDetail: string;
  fileUrls: string[];
}

 함수 또한 타입 지정이 가능하다. 

 

 있을 수도 있고 없을 수도 있는 건 타입 지정을 banana?: String 이런식으로 ?를 넣어서 해준다. 

 

 타입스크립트를 깔면 빨간줄이 좌라라락 뜨기 때문에 거슬린다... 그리고 바닐라 자바스크립트보단 쓰기 조금 번거로울 순 있지만, 다른 타입의 데이터를 넣는 등의 실수를 방지할 수 있다.

 

 

프리캠프 할 때 봤던 영상

https://youtu.be/8YIwaO6Cojw