1. 타입 서술어란?타입 서술어는 TypeScript에서 특정 스코프 내의 변수 타입을 좁히는(narrowing) 데 사용되는 특별한 반환 타입입니다.함수가 true를 반환할 때, TypeScript는 인자의 타입을 특정 타입으로 취급합니다.2. 기본 구조function 함수이름(매개변수: 타입): 매개변수 is 특정타입 { return 불리언_표현식;}3. 간단한 예시: 문자열 체크function isString(value: unknown): value is string { return typeof value === 'string';}// 사용 예:function processValue(value: unknown) { if (isString(value)) { // 여기서 ..
import { useState, useEffect } from 'react';const checkImage = (url: string): Promise => { return new Promise(resolve => { const image = new Image(); image.onload = () => resolve(true); image.onerror = () => resolve(false); image.src = `${url}&r=${Math.random()}`; // 캐시 방지 });};export const useImagePolling = ( url: string, isGenerationComplete: boolean, interval: number = 5000,)..
async function getJSON() { const url = 'JSON FILE PATH/myJSON.json' const jsonData = await (await fetch(url)).json(); return jsonData } const myJSONdata = getJSON();
enum ColorType { RED = 1, GREEN = 2, BLUE = 3, } const values = Object.values(ColorType) // -> ['RED', 'GREEN', 'BLUE', 1, 2, 3] const colorList = Object.values(ColorType).filter(value => typeof value === 'string') // -> ['RED', 'GREEN', 'BLUE']
리액트를 사용하다보면 조건부 렌더링을 자주 사용하게 된다. const isShow = props.isShow return { isShow ? () : () } 위의 예시처럼 컴포넌트에 전달할 props는 동일한데, 조건에 따라 컴포넌트만 다른 경우 아래와 같은 방법도 있다. const isShow = props.isShow const statusIcon = { show: ShowIcon, hide: HideIcon } const StatusIconComponent = statusIcon[isShow ? 'show' : 'hide'] return
타입스크립트에서 객체의 key 값으로 enum을 사용하고자 하는 경우 enum MyColor { RED = 0, GREEN = 1, BLUE = 2 } const colorText: { [key in MyColor]: string } = { [MyColor.RED]: '레드', [MyColor.GREEN]: '그린', [MyColor.BLUE]: '블루', } // enum의 일부만 key값으로 사용하는 경우 const colorText: { [key in MyColor]?: string } = { [MyColor.RED]: '레드', [MyColor.BLUE]: '블루', } ... colorText[myColor] // myColor = 0 -> '레드' // myColor = 1 -> '그린' //..
