2023. 3. 23

Junghan Lee·2023년 3월 23일

TIL Diary

목록 보기

23/52

Index

타입스크립트
타입스크립트를 사용하는 이유, 사용 방법
타입스크립트 파일 확장자&실습
-타입 추론
-타입스크립트 배열, 객체 실습
엄격한 타입스크립트 strict
-타입으로 뭘 받는지 잘 모를 때
API응답 데이터의 타입은 어떻게 할까?
graphql-codegen
graphql에 codegen 적용하기
mutation, query에 타입스크립트 적용해보기

타입스크립트

자바스크립트의 타입을 강제시키는 언어; 필수! 안정성을 위해 생김
지뢰밭을 만들고 있다?
자바스크립트와의 차이점

기존의 자바스크립트(재할당 가능)

타입스크립트: 변수의 자료형 지정(위처럼 재할당 불가)

타입스크립트 사용 이유 & 사용법

자바스크립트는 타입이 엄격하지 않아서 변수나 상수를 만들면 처음에 문자를 넣었다 나중에 숫자를 넣는 등 자유롭게 변환이 가능. 개발에 편리해 보이나 여러 명이 큰 서비스를 갭라하는 경우에는 문제가 될 수 있다.
if(count === 5){//더이상 등록 불가} else {상품 등록} 이런식의 코딩

타입스크립트는 숫자변수에는 숫자만, 문자엔 문자만 넣어 안정성 향상

타입스크립트 사용법

let aaa : string = "안녕하세요"
let bbb : number = 123
let ccc : boolean = true
// 변수명 뒤에 타입 지정

객체 타입을 만들어줄 때 -> 네이밍 관례
interface의 I와 변수명 합치는 것.
ex. 객체를 담은 변수 이름이 profile 이면 타입은 IProfile

타입스크립트 설치

yarn add typescript --dev
비어있는 tsconfig.json 파일 만들기 최상위 폴더에
yarn add @types/react @types/node --dev
yarn dev 해서 tsconfig.json에 자동으로 채우기
strict : true
하나의 언어 -> 다른 언어 : 컴파일, 동일한 언어-> 동일한 언어: 트랜스파일
타입스크립트가 자바스크립트로 변경되어야 브라우저에서 보여줌.

타입스크립트 파일 확장자 & 실습

타입스크립트 사용하는 파일중 return 을 포함하고 있다면 확장자 ts 로 두면 오류 발생하는데 이건 return 부분이 사실 html이 아니라 JSX(자바스크립트 XML) 이기 때문에 발생. 따라서 단순히 javascript만 있는 .js 파일은 typescript의 .ts로 변경하고, javascript에서 JSX(React의 HTML)를 return 하는 컴포넌트들은 typescript의 .tsx로 변경 / js, jsx는 발전해서 jsx도 js라고 해도 되지만 ts, tsx는 각각 똑바로 적용해줘야 함

JSX를 return 하는 컴포넌트 : tsx
javascript만 사용하는 컴포넌트 : ts

타입 추론
파일의 확장자를 ts나 tsx로 변경하면서 기존의 자바스크립트 작성 부분이 타입스크립트 영역으로 바뀌게 되고 변수에 타입을 먼저 입히지 않고 할당을 하게 되면 타입스크립트는 할당된 값의 자료형을 타입으로 추론하게 됨

타입스크립트 배열, 객체 실습