클라이언트와 서버 간의 공유 유형

클라이언트와 서버 간의 공유 유형

저는 Node.js, Express.js & TypeScript 백엔드(REST API)와 React, Redux & TypeScript 프론트엔드로 프로젝트를 진행하고 있습니다.

백엔드에서 다음과 같은 몇 가지 유형을 만들었습니다.

모델/제품.ts

export type Product = {
    title: string
    description: string
    price: number
}

REST API는 다음과 같은 응답을 보냅니다.

{
  "data": [
     {"title": "Shoe", "Description": "This is a shoe.", "price": 20},
     {...}
   ] // inside here all the Products[]
}

고객에게 캐스팅하고 싶습니다.data활자에 맞는Product어레이. 하지만 프런트엔드와 백엔드는 코드 기반이 다르고 분리되어 있기 때문에 프론트엔드에서 유형을 사용하는 이점을 활용하고 싶습니다.하지만 저는 코드를 복제하지 않고 이것을 달성하고 싶습니다.그래서 모델을 수정하거나 추가할 때 2곳을 업데이트하고 싶지 않습니다.

클라이언트와 서버 간에 유형을 공유하는 가장 좋은 방법이 무엇인지 아는 사람이 있습니까?

백엔드에 엔드포인트를 생성하여 클라이언트가 타격할 수 있도록 한 다음 모든 모델을 단일 파일에 기록하는 것을 생각하고 있습니다.models.ts의뢰인의그래서 백엔드의 /models/에 있는 모든 파일을 루프하여 클라이언트에 models.ts로 작성된 새 파일로 구문 분석해야 할 것 같습니다.하지만 이것이 정말 좋은 방법일까요?이 구조를 달성하는 더 나은 방법을 아는 사람이 있습니까?

TypeScript 로 매핑을 사용할 수 있습니다.

제가 작성한 프로젝트의 예:
SampleTypes.ts 내부에 정의된 백엔드 유형은 코드가 중복되지 않도록 클라이언트 프로젝트에서 재사용됩니다.

client/tsconfig.json:

{
  "compilerOptions": {
    "paths": { "@backend/*": ["../server/src/api/*"], },
  }
}

../server/src/api/-> https://github.com/winwiz1/crisp-react/tree/master/server/src/api

client/....ts:

import { SampleRequest } from "@backend/types/SampleTypes";

기본적으로 여러 패키지 간에 코드(사례 유형 정의)를 공유하려고 합니다.Yarn은 이러한 목적을 위해 작업 공간을 개발했으며 다른 답변처럼 tsconfig/Typescript에 의존하지 않습니다.

이것은 토끼굴로 들어가는 것입니다. 당신의 얀 구성과 아마도 Lerna와 같은 도구를 사용하는 약간의 작업을 포함합니다.그러나 유형을 공유하지만 유효성 검사 논리를 공유하는 패키지가 긴밀하게 결합된 경우에는 의미가 있습니다.

이렇게 하는 좋은 방법은 이 공유 유형을 사용하여 ppm 개인 패키지를 만드는 것입니다.이를 활용하여 도우미 기능, 중복되지 않는 논리 등을 공유할 수 있습니다.

https://docs.npmjs.com/creating-and-publishing-private-packages https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

언급URL : https://stackoverflow.com/questions/65045106/share-types-between-client-and-server