TypeScript와 JavaScript

JavaScript는 변수를 할당한 후 이후에 다시 할당할 때, 타입을 상관하지 않는다

 

 

그러나 이렇게 작동하면 에러가 발생하지 않지만 실제 배포 후 페이지를 이용하게 될 때, 의도하지 않는 동작을 할 수 있다. 

TypeScript는 이러한 동작을 방지하기 위해 변수를 할당할 때 타입을 미리 지정하여, 배포전 에러를 미리 확인할 수 있게 도와준다.

 

타입스트립트 (TypeScript) : 자바스크립트의 타입을 강제 시키는 언어

 

 

//자바스크립트

let aaa = "안녕하세요"
aaa = 2

 

 

타입스크립트로 타입을 지정하는 방법에 대해 알아보자

 

  // 타입추론 : 처음에 들어온 값으로 타입을 추론, 지정합니다.
  
  let aaa = "안녕하세요";
  aaa = 3; //에러 발생

 

  // 타입명시 : 타입을 직접 명시합니다.
  
  let bbb: string = "반갑습니다.";
  let bbb = 10; //에러발생

 

  // 불린타입
  
  let eee: boolean = true;
  eee = false;
  eee = "false"; // ★문자열에 내용이 있으니 true로 동작합니다.★

 

  // 배열타입

  let fff: number[] = [1, 2, 3, 4, 5, "안녕하세요"]; // Error: "안녕하세요" 
  let ggg: string[] = ["철수", "영희", "훈이", 10]; // Error: 10
  let hhh: (string | number)[] = ["철수", "영희", "훈이", 10]; // 에러 없음

 

  // 객체타입
  
  interface IProfile {
    name: string;
    age: number | string;
    school: string;
    hobby?: string; //? 는 있어도 되고 없어도 가능하다는것을 의미합니다.
  }

  const profile: IProfile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교",
  };
  profile.name = "훈이"; // 타입추론으로 이것만 가능
  profile.age = "8살"; // 타입추론으로 불가능
  profile.hobby = "수영"; // 타입추론으로 불가능

 

// ★★함수타입★★

  function add(num1: number, num2: number, unit: string): string {
    return num1 + num2 + unit;
  }
  const result = add(1000, 2000, "원"); //결과의 리턴 타입도 예측 가능

  // 화살표 함수
  const add2 = (num1: number, num2: number, unit: string): string => {
    return num1 + num2 + unit;
  };
  const result2 = add(1000, 2000, "원"); //결과의 리턴 타입도 예측 가능

  // any타입
  let qqq: any = "철수"; //자바스크립트와 동일!
  qqq = 123;
  qqq = true;

  return <></>;
  //타입스크립트는 js 영역(컨테이너)이 typescript로 변경됩니다.
}