42일차 프론트엔드 공부 - 타입 스크립트

- 프론트엔드 공부 42일차 -

 

타입 스크립트 Typescript

- 자바 스크립트의 타입을 강제시키는 언어

 

ex)

파일명 : aaa.ts

let aaa: string = “안녕하세요”

aaa = 123

오류 발생

 

let aaa: string = “안녕하세요”

let bbb: number = 1234

let ccc: boolean = true

 

Interface IProfile{

name: string;

age: number;

}

let profile: IProfile = { name: “철수”, age: 13 }

 

import { stringify } from "querystring";

export default function TypeScriptPage() {
  // 타입 추론
  let aaa = "안녕하세요";
  aaa = 3; // 에러 발생

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

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

  // 숫자 타입
  let ddd: number = 10;
  ddd = "짱구"; // 에러 발생

  // 불린 타입
  let eee: boolean = true;
  eee = false;
  eee = "false"; // true로 작동 / 에러 발생

  // 배열 타입

  let fff: number[] = [1, 2, 3, 4, 5, "안녕하세요"]; // 에러 발생
  let ggg: string[] = ["짱구", "철수", "맹구", "훈이", 10]; // 에러 발생
  let hhh: (string | number)[] = ["짱구", "철수", "맹구", "훈이", 10];

  // 객체 타임
  interface Iprofile {
    name: string;
    age: number | string;
    school: string;
    hobby?: string;
  }

  const profile: Iprofile = {
    name: "짱구",
    age: 5,
    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 = add2(1000, 2000, "원");

  // any 타입
  let qqq: any = "철수";
  qqq = 123;
  qqq = true;

  return <></>;
}