[최종프로젝트] 기획중_단언 연산자 !_타입좁히기_옵셔널파라미터 ?

데이터베이스 작성 완료

테이블이 11개... 개발 시작할 생각 하니까 벌써 무서워...

그래도 그만큼 결과물이 궁금하기도 하고 재밌어 보이는 기능들도 많아서 기대도 많이 된다

아직 구체적인 기능이 제대로 자리 잡지 않아서 회의가 더 필요하지만 빨리 시작하기보다 꼼꼼하게 기획을 하는 게 더 중요하니까! 내일은 좀 더 구체적으로 기능을 잡고, 역할 분배할 것!

 

---

Optional Parameters (옵셔널 파라미터)

• 타입스크립트는 매개변수 뒤에 물음표 ? 를 붙여 값을 선택적으로 사용할 수 있다(옵셔널 파라미터)
• ? 는  String | undefined으로 값이 있을 경우 타입을 지정해 주거나 값을 전달하고, 값이 없을 경우 undefined 나온다 

export interface ProductType {
  productId?: string;
  image: string;
  category: string;
  title: string;
  info: string;
  delivery: string;
  seller: string;
  price: number;
  weight: string;
  createdAt: string;
  quantity: number;
}

// productId는 있을 수도 있고, 없을 수도 있다

<div className="flex justify-center w-4/5 m-auto gap-20 flex-wrap">
        {data?.map((item: any) => {
          return <MainProductItems key={item.productId} item={item} />;
        })}
</div>

// data = 비동기 함수로 받아오는 데이터

---

Type Narrowing (타입 좁히기)

• 변수를 더 구체적인 유형으로 제한하는 것
• 옵셔널 파라미터를 사용할 경우 if문 등의 제어문을 이용하여 undefined 값을 배제하고 string타입으로 좁혀주는 것

interface Person {
  // favoriteLanguage 속성은 string|undefined 타입
  favoriteLanguage?: string;
}

function isFavoriteLangScript(p: Person): boolean {
  // 매개변수 p가 undefined 타입일 경우
  if (p.favoriteLanguage === undefined) {
    return false;
  }
  
  // 매개변수 p가 string 타입일 경우
  const lowerCased = p.favoriteLanguage.toLowerCase();
  return lowerCased.includes('script');
}

---

Non-null 단언 연산자( ! ) 

• 변수가 null 또는 undefined가 아님을 명시적으로 알려주는 연산자, 이 변수는 무조건 값이 있음!으로 가정하는 것
• 만약! 연산자를 넣은 변수에 값이 없다면 런타임 에러가 발생할 수 있으니 신중하게 사용할 것

const x: number | undefined

// x가 null이 아님을 단언하여 호출
console.log(x!); // 런타임 에러 발생 가능성

// x에 다른 값 할당
x = 10;

// x가 null이 아님을 단언하여 호출
console.log(x!.toFixed(2)); // 출력: 10