타입스크립트

코드를 보다 안전하게 만드는데 도움주는 정적 타입 언어

코드가 실행되는(런타임) 시점이 아닌 코드가 컴파일되는 시점에 타입을 체크하는 자바스크립트 슈퍼셋
브라우저에서 타입스크립트를 이해하지 못하기 때문에 브라우저가 이해할 수 있는 자바스크립트로 트랜스파일 필요

타입 안전성

정적 타입 체킹

자바스크립트는 약타입 언어로 변수에 대해 고정된 데이터 타입을 강제하지 않음
타입스크립트는 변수 타입이 선언되면 변경되지 않는 강타입 언어
타입스크립트는 해당 코드를 자바스크립트로 컴파일 할 때 코드에 이슈가 있음을 감지함
- 이는 안정성과 예측성이라는 이점을 줌
- 잠재적인 타입 관련 에러를 런타임이 아닌 개발 중에 잡아낼 수 있게됨

구성 린팅

tsconfig.json

타입스크립트 구성을 커스텀하고, 컴파일러가 프로젝트 컴파일하는데 사용하는 옵션을 안내함
target: 대상 ESCMA 스크립트 버전
module: 모듈 시스템. CJS, ESM
jsx: JSX 파일 처리 메서드
outDir: 컴파일된 JS 파일을 저장할 디렉토리
rootDir: 입력 파일의 루트 디렉토리
strict: 모든 엄격 타입 옵션을 활성화하는 플래그
- noImplictAny: 타입을 갖지 않는 모든 변수, 추론할 수 없는 매개변수에 명시적으로 타입선언을 하지않으면 에러 처리
- strictNulLChecks: 엄격한 null, undefined 체크를 강제
- ...
esModuleInterop: 생성된 코드에서 ES6 스타일 임포트/익스포트 허용하는 설정
skipLibCheck: 선언 파일에 대한 타입 체킹을 건너뛰는 플래그
forceConsistentCasingInFileNames: 파일 이름의 대소문자 일관성을 보장하는 체크 옵션
include: 프로그램에 포함할 파일명 혹은 패턴 배열
exclude: include를 해결할 때 제외할 파일명 혹은 패턴 배열

React + TS

children 타이핑

children은 특별한 prop, 상위에서 하위로 JSX를 전다할 때 사용

기본적으로 children prop은 모든 타입이 될 수 있음
- 때로는 특정 타입의 요소만 받도록 하는 것이 유용
React.ReactNode는 children prop에 사용할 수 있는 매우 일반적인 타입
- 모든 유효한 리액트 하위 요소를 수용
- 문자, 및 숫자와 같은 기본값
- 리액트 컴포넌트
- 들을 포함하는 배열이나 프래그먼트 등
React.ReactElement는 보다 구체적인 타입으로 JSX를 통해 생성된 리액트 컴포넌트 객체를 나타냄
- 문자열, 숫자, 배열 이 아닌 단일 리액트 컴포넌트가 되도록 제한할 때 유용

Enum

관련된 값의 집합을 조직화

유사한 분류에 속하는 값들을 그루핑하여 코드를 보다 직관적으로 만듦
결과적으로 값이 하나의 중앙에서 관리되기 때문에 유지보수 쉬움
enum 키워드 대신 as const 어서션을 이용해서 비슷하게 사용 가능

const status = {
  IDLE: 'IDLE',
  LOADING: 'LOADING',
  SUCCESS: 'SUCCESS',
  ERROR: 'ERROR',
} as const;

type Status = typeof status[keyof typeof status];

선언 파일

타입스크립트로 작성되지 않은 모듈 혹은 라이브러리 타입을 선언한 파일

.d.ts확장자를 가지고 구현 코드가 없는 함수, 클래스, 변수에 관한 타입 정보만을 포함함
: 널리 알려진 다양한 자바스크립트 라이브러리에 대한 고품질 타입스크립트 선언 파일을 포함하고 있는 저장소
- 커뮤니티가 주도적으로 관리하고 있어 누구나 기여할 수 있음

커스텀 선언 파일`

.d.ts 파일을 만들어 타입 정의를 수동으로 작성
tsconfig.json에 include 옵션에 포함시켜야함

declare module 'library' {
  export function add(
    a: number,
    b: number
  ): number;
  
  export function subtract(
    a: number,
    b: number
    ): number;
}

API 결과 타입 자동 생성

수작업으로 유지보수하는 것은 API와 앱 사이의 불일치를 만들고, 결과적으로 런타임 에러를 발생시킴

타입을 자동 생성함으로써 앱 타입이 항상 API와 동기화되는것을 보장 가능
관리되지 않은 오래된 타입으로 인한 버그가 발생할 가능성을 줄인다.

GraphQL

GraphQL은 스키마, 즉 데이터 구조가 이미 잘 정의되어있음

GraphQL은 강타입 언어
스키마는 데이터의 형태, 관련된 타입, 이들 사이의 관계를 기술하는 계약을 제공하기 때문
- 실행하면 스키마를 기준으로 GraphQL 객체, 쿼리, 변형에 대한 타입을 생성
GraphQL API와 상호작용할 떄 타입 안정성 보장

// 스키마 예시
type User {
  id: ID!
  name: String!
}

type Query {
  getUser(id: ID!): User
}

type Mutation {
  createUser(name: String!): User!
}

export type Scalars = {
  ID: { input: string; output: string }
  String: { input: string, output: string }
}

export type User = {
  __typename?: 'User';
  id: Scalars['ID'];
  name: Scalars['String'];
}

export type Query = {
  __typename?: 'Query';
  getUser?: Maybe<User>;
}

export type Mutation = {
  __typename?: 'Mutation';
  createUser?: Maybe<User>;
}

export type QueryGetUserArgs = {
  id: Scalars['ID'];
}

export type MutationCreateUserArgs = {
  name: Scalars['String'];
}

REST

GraphQL 같이 강타입 스키마를 갖지 않기 때문에 다소 어려움

API가 같은 명세를 사용해서 기술되어있다면 이를 사용해 타입을 생성할 수 있다.
OpenAPI 명세로부터 타입을 생성할 수 있는 도구로

YAML을 사용해 작성한 OpenAPI 3.1.0 명세

openapi: 3.1.0
info:
  title: User API
  version: 1.0.0
paths: 
  /user:
    get:
      operationId: getUser
      parameters:
        - name: id
          in: query
          schema:
            type: string
          response:
            '200':
              description: Successful response
    post:
      operationId: createUser
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                name:
                  type: string
        response:
          '201':
            description: User created
components:
  schemas:
    User:
      type: object
      properties:
        id:
          type: string
        name:
          type: string

RESTful API를 사용해 자동 생성한 타입

export interface User {
  id: string;
  name: string
}

export interface GetUserParameters {
  id: string
}

export interface CreateUserBody {
  name: string
}

마이그레이션

Previous기술적 마이그레이션 Next라우팅

Last updated 1 month ago