Typescript vs Javascript

Typescript란?
javascript의 타입을 강제로 지정하며 자바스크립트보다 확장된 언어이다.

<자바스크립트>

// 자바스크립트는 자료형에 연연하지 않고 할당이 가능
let hello = "hello"
hello = 12345

<타입스트립트>

let hello:string = "hello" 

// ❌ 불가능
hello = 12345
// ⭕️ 문자열만 할당 가능합니다.
hello = "12345"

형태는 자바스크립트와 비슷하지만 변수 옆에 타입을 적어준다.
또한 타입스크립트는 바로 불러오지 못한다. 따라서 자바스크립트에서 활용할 수 있게 변환 후 해당 자바스크립트를 실행할 수 있다.
이를 컴파일이라 하며 ⭐️하나의 언어가 다른 언어로 변경되어 작업⭐️하는걸 일컫는다. 이와 다르게 트랜스파일은 하나의 언어가 동일한 언어로 변경되는 작업이다.

---

  // 타입 추론
  let aaa = "안녕하세요";
  aaa = 3;

  // 타입 명시
  let bbb: string = "반갑습니다";
  bbb = 10;

  // 타입 명시가 필요한 상황
  let ccc: string | number = 1000;
  ccc = "1000원";

  // 숫자 타입
  let ddd: number = 10;
  ddd = "철수";

  // 불린타입
  let eee: boolean = true;
  eee = false;
  eee = "false"; // 얘는 js에선 트루 tsx에서는 true로 작동

  // 배열타입
  let fff: number[] = [1, 2, 3, 4, 5, "안녕하세요"];
  let ggg: string[] = ["철수", "영의", "흔이", 10];
  let hhh = ["철수", "영의", "흔이", 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 = "수영";

  // any타입(은 가급적 사용하지 않기!)
  let qqq: any = "철수"; //자바스크립트와 동일!
  qqq = 123;
  qqq = true;

  // 함수타입 => 어디서 누가 어떻게 호출할지 모르므로, 타입 추론 할 수 없음(반드시 타입명시 필요!!)
  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 = add2(1000, 2000, "원"); // 결과의 리턴 타입도 예측 가능