220324

solsolsol·2022년 3월 24일

TIL

목록 보기

11/32

👩🏻‍💻 Learned

타입스크립트

자바스크립트의 타입을 강제시키는 언어. 예상치 못한 오류가 방지하는 것을 막기 위해 사용한다.

let a = "안녕하세요"
aaa = 123

자바스크립트는 스트링으로 선언된 변수에도 넘버값이 들어갈 수 있지만 타입스크립트를 사용하면 지정해 둔 타입의 값만 넣을 수 있게 된다.

사용법

let aaa: string = "안녕하세요"
let bbb: number = 123
//boolean으로 설정도 가능

객체

Interface를 이용해서 타입을 정해줄 수 있다

         // 타입명 I + 하고싶은이름
interface IProfile {
  name: string;
  age: number;
}

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

준비하기

typescript 다운로드

yarn add typescript --dev
tsconfig.json 파일 생성
yarn add --dev @types/node
yarn dev

--dev?

dependencies : 실제 프로그램을 실행할 때 필요함
devdependecies : 브라우저에서는 필요없음. only for 개발!

ts 와 tsx

ts : JSX 가 없을 때
tsx : JSX 가 있을 때

자바스크립트는 JSX 유무와 상관 없이 .js로 통일해줘도 되지만 타입스크립트는 안된다.

JSX

X = XML = eXtensible Markup Language = 확장 가능한 마크업 랭귀지
jsx = JSXML

타입 추론

타입을 입력하지 않아도 자동으로 처음 들어간 값으로 타입을 추론

타입 종류


// 문자 타입
  let ccc: string
  ccc = "반가워요!!!"
  ccc = 3

  // 숫자 타입
  let ddd: number = 10
  ddd = 3
  ddd = "안녕하세요"

  // 불린 타입
  let eee: boolean = true
  eee = false
  eee = "false" // 문자열에 값이 있어서 true 로 작동하는 걸 타입스크립트에서 막아줄 수 있음

  // 배열 타입
  let fff: number[] = [1, 2, 3, 4, 5, "안녕"]
  let ggg: string[] = ["철수", "영희", "훈이", 13]
  let hhh: (number | string)[] = ["철수", "영희", "훈이", 13]
                // | 또는, & 그리고 - 자바스크립트와 달리 하나만!

  // 객체 타입
  interface IProfile {
    name: string
    age: string | number
    school: string
    hobby?: string // 있어도 좋고 없어도 좋을 때 ? 사용 . ? 없으면 반드시 필수로 사용해야함!
  }
  let profile: IProfile = {
    name: "철수",
    age: 8,
    school: "다람쥐 초등학교"
  }
  profile.age = "8살"

  // 함수 타입                                              //return 값 타입
  const add = (money1: number, money2: number, unit: string): string => {
    return money1 + money2 + unit
  }
  const result = add(1000, 2000, "원")

📝 Review

타입스크립트를 항상 말만 들었는데 어떻게 사용하는지, 왜 사용하는지 오늘 처음 알게 되었다. 기본적인 이론을 들을 때는 쉬웠는데 막상 js 파일을 ts 로 바꾸려니 멘붕이 왔다. 그동안 해왔던 것들과는 다르게 계속 본다고 해서 답이 나오는 게 아니었던...
어려운게 당연하다고 말씀해주시긴 했지만 그래도 뭔가... 좀 찝찝하다. 검색하면 정의에 대해서 설명한 건 많은데 변환하는 건 많이 없어서... 좀 더 자료를 찾아봐야겠다.