typescript

Kimu·2021년 9월 9일
0
post-thumbnail

요즘 핫한 타입스크립트를 알아보자.
타입스크립트는 무엇일까?

TypeScript: 자바스크립트의 타입을 강제하는 언어

왜 이런 것이 필요할까? 너무나도 유연한 언어인 자바스크립트는 다른 언어에서 안되는 게 다 되는 일이 비일비재하다.

이런 자유분방함은 오류 대환장 파티의 초석이 될 수가 있다. 예를 들어, 광고 도배를 막기위해 게시글을 한 사람당 5개까지만 올릴 수 있도록 코드를 짜서 count값을 주었는데, 어느날 보니, 어떤 사람이 50개의 광고를 올리고 있었다. 어떻게? 코드를 봤더니, 숫자가 모두 스트링값으로 들어가서 "0111111" 이런 식으로 더해지고 있었던 것이었다. 숫자가 들어가야할 변수에 의도하지 않게 문자가 들어가게 되면서 숫자가 문자열로 더해지는, 이런 대 참 사... 이런 것들을 막기위해 타입을 강제하는 타입스크립트는 개발 및 유지 보수에서 오류를 대단히 줄일 수 있다.

1. 다운텍스트받기
먼저 타입스크립트를 다운받자. 타입스크립트는 개발시에 필요하고, 배포시에는 다시 자바스크립트로 (웹은 타입스크립트를 모른다) 변환하여야 하므로 devdependencies에 추가될 수 있도록 하자. (방법은 --dev로 끝나는 인스톨 명령어를 사용)

2. 설정하기
다운받았으면 빈 파일을 하나 만들고,
tsconfig.json
이라고 이름을 지어주자.
이 상태에서 터미널에서 yarn dev를 하면, tsconfig 파일이 채워진다.

  1. 사용법
  //문자타입 - 타입 추론
    let aaa: string = "안녕하세요"
    aaa = "straw"
  //문자타입
    let bbb: string;
    bbb = "반갑습니다"
    bbb = "rose"
  //숫자타입
    let ccc: number = 5
    ccc = 6
  //배열타입
    let ddd: number[] = [1, 2, 3, 4, 5] //배열안의 요소가 숫자만 가능
    let eee: (number | string)[] = ["one", 2, 3, 4, 5]// 배열안의 요소가 숫자이거나 문자가 가능
  	let fff: (number[] | string[]) = [1, 2, 3, 4, 5, 6] //배열의 전체요소가 숫자이거나 전체요소가 문자가 가능
  //객체타입
    interface IProfile {
      school: string,
      age: number
       }
    let profile: IProfile = {
      school: "다람쥐 초등학교",
      age: 13
    }

4. 타입스크립트 파일의 이름
tsx?
나는 프로젝트에 리액트 라이브러리를 사용중이므로 jsx를 사용중이다. 그러나 리액트는 나온 지 오래 되서인지 확장자를 jsx로 하지 않고 js로 해도 아무 문제가 없다. 그렇지만 타입스크립트는 아직 그렇지가 못하다. 만약 코드 내용에 jsx를 사용한 코드가 있다면 타입스크립트 파일로 만들기 위해서 tsx라는 확장자를 써야한다.
ts?
html요소가 없다면 (즉 화면에 그리는 코드가 아니라면) 그냥 ts라는 확장자로 변환하면 무방하다.

이렇게 바꿨는가? 빨간색 에러가 잔뜩 나올 것이다. 가서 고치자.

파일에서의 실사용례
아래는 css를 이모션 스타일드 태그로 작성한 파일인데, props로 데이터를 전달받아 조건부 렌더링을 작성한 파일이다.
그냥 타입만 써줘야 하는 것이 아니었다.
어떤 태그에 사용되는지 따로따로 타입(interface)를 정의해주지 않으면 사용된 태그마다 에러가 나더라. ㅠ_ㅠ
편하자고 시작한 코딩의 세계는 사실 손가락 노동의 시작이었음을...

import styled from '@emotion/styled'
interface IButtonProps {
  qqq: boolean
}
interface ITitleProps {
  zzz: boolean
}
export const MyButton = styled.button`
  background-color: ${(props: IButtonProps)=>(props.qqq === true? "yellow": "gray")}
`
export const Title = styled.h1`
  color: ${(props: ITitleProps)=>(props.zzz === true? "red": "yellow")}
`
profile
지속가능한 개발자

0개의 댓글