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 핸들러에서 DatabaseUserimport * 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개의 이름 공간ApiUserUser이 있습니다. 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'
    }
}

가져오기가 하나 더 적고 RequestUserDatabaseUser가 동일한 네임스페이스에서 왔기 때문에 매우 밀접하게 관련되어 있음을 알 수 있습니다. 약간 더 깔끔한 코드이며 우리 코드를 처음 접하는 사람들이 쉽게 읽고 스캔할 수 있습니다.

좋은 웹페이지 즐겨찾기