Typescript 파일 상속
6482 단어 typescript
Typescript로 작성된 프론트엔드와 Typescript로 작성된 노드 백엔드가 있는 간단한 웹 앱을 작성한다고 상상해보십시오. 이것은 2개의 프로젝트 간에 일부 코드를 공유할 수 있는 좋은 기회입니다. 이 간단한 웹앱에 프론트엔드와 백엔드 간에 앞뒤로 전달되는
User
엔터티가 있고 백엔드가 User
를 데이터베이스에 저장한다고 가정해 보겠습니다. 데이터베이스 항목에는 프론트엔드와 공유하고 싶지 않은 password
와 같은 몇 가지 추가 속성이 있을 수 있습니다.먼저
RequestUser
의 공유 표현을 만들 것입니다. 이 인터페이스는 프론트엔드와 백엔드 모두에서 사용되며 shared
라는 최상위 폴더에 있습니다.shared/user.ts
interface RequestUser {
name: string;
email: string;
}
그런 다음
api
폴더에서 RequestUser
인터페이스를 사용하려고 하지만 여기에 추가하여 데이터베이스 항목에 더 많은 항목을 저장합니다.api/user.ts
import * as User from "../shared/user.ts";
interface DatabaseUser extends RequestUser {
password: string;
}
이 모든 것이 괜찮아 보이지만 이전에 설명한
RequestUser
패턴을 염두에 두고 API 핸들러에서 DatabaseUser
및 import * as ...
인터페이스를 모두 사용하려는 경우 어떻게 됩니까?api/handler.ts
import * as User from "../shared/user.ts";
import * as ApiUser from "./user.ts";
export function handler(body: any) {
const rqUser: User.RequestUser = body.user as User.RequestUser;
const dbUser: ApiUser.DatabaseUser = {
...rqUser,
"password": 'P@55word'
}
}
이제 사용자 유형 모델을 나타내는 2개의 이름 공간
ApiUser
및 User
이 있습니다. export * from
패턴을 사용하여 이를 1개의 네임스페이스로 압축할 수 있습니다. API별 모델 파일을 다시 보면 공유 모델에서 모든 것을 내보내도록 지시할 수 있으며 기본적으로 해당 파일에서 내보낸 모든 멤버를 상속합니다.api/user.ts
import * as User from "../shared/user.ts";
export * from "../shared/user.ts";
...
그런 다음 핸들러에서 다시 일부 참조를 지울 수 있습니다.
api/handler.ts
import * as User from "./user.ts";
export function handler(body: any) {
const rqUser: User.RequestUser = body.user as User.RequestUser;
const dbUser: User.DatabaseUser = {
...rqUser,
"password": 'P@55word'
}
}
가져오기가 하나 더 적고
RequestUser
와 DatabaseUser
가 동일한 네임스페이스에서 왔기 때문에 매우 밀접하게 관련되어 있음을 알 수 있습니다. 약간 더 깔끔한 코드이며 우리 코드를 처음 접하는 사람들이 쉽게 읽고 스캔할 수 있습니다.
Reference
이 문제에 관하여(Typescript 파일 상속), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jmc265/typescript-file-inheritance-5aob텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)