ts-node | NodeBird | 타입 없는 라이브러리 타이핑하기

 

 

※ 인프런 - Node.js에 TypeScript 적용하기(feat. NodeBire) by 조현영 강의를 기반으로 정리한 내용입니다.

 

 

본 강의에서는 프론트엔드는 다루지 않기 때문에 대체할만 것들을 직접 작성해본다고 한다.

 

타입스크립트를 작성할 때 크게 두 가지 방법이 있다. 첫 번째는 리덕스처럼 처음부터 타입스크립트로 코드를 작성하는 방법이고, 나머지 하나는 JS로 먼저 코드 작성 후 타입스크립트를 붙이는 방식이다.

 

우리는 두 번째 방식으로 타입스크립트를 작성할 것이고, @types/passport-local 라이브러리를 직접 코딩하면서 테스트해볼 것이다.

 

그래서 기존에 설치했던 이 모듈은 삭제. npm rm @types/passport-local

 

타이핑은 /back/types에서 할 것이다. tsconfig의 typeRoots를 "./types"로 설정했기 때문. 그래서 이 디렉토리에서 passport-local.d.ts 파일을 생성한다.

 

back/passport/local.ts의 코드를 보면서, 내가 사용하는 코드 부분에만 타이핑을 작성하면 된다. 

// back/types/passport.d.ts

declare module "passport-local" {       // delcare module은 실제 모듈의 이름과 같게 해야 에러나지 않음
    import { Request } from 'express';
    import { Strategy as PassportStrategy } from 'passport';

    // 인터페이스 이름은 실제 모듈과 이름을 같게 만듦
    export interface IVerifyOptions {       // export로 확장성 고려
        [key: string]: any;
    }
    export interface IStrategyOptions {
        usernameField: string;
        passwordField: string;
        session?: boolean;
        passReqToCallback?: false;
    }
    export interface IStrategyOptionsWithRequest {
        usernameField: string;
        passwordField: string;
        session?: boolean;
        passReqToCallback: true;
    }
    export interface Done {
        (error: Error | null, user?: any, options?: IVerifyOptions): void;
    }
    export interface VerifyFunction {
        (username: string, password: string, done: Done): void | Promise<any>;
    }
    export interface VerifyFunctionWithRequest {
        (req: Request, username: string, password: string, done: Done): void | Promise<any>;
    }

    export class Strategy extends PassportStrategy {
        constructor(options: IStrategyOptions, verify: VerifyFunction)
        constructor(options: IStrategyOptionsWithRequest, verify: VerifyFunctionWithRequest)
    }
}

 

자 이렇게 다 작성을 했는데...? local.ts의 done(err) 부분에서 에러가 난다. unkown은 'Error | Null' 에 할당될 수 없다는 문구가 뜬다. 그래서 catch 부분에서 err를 any로 타입을 정의해서 문제를 해결했지만, @types/passport-local을 참조해보니, done 부분의 매개변수들을 any로 설정한 것을 볼 수 있었다. 그래서 나도 any로 수정

declare module "passport-local" {       // delcare module은 실제 모듈의 이름과 같게 해야 에러나지 않음
    import { Request } from 'express';
    import { Strategy as PassportStrategy } from 'passport';

    // 인터페이스 이름은 실제 모듈과 이름을 같게 만듦
    export interface IVerifyOptions {       // export로 확장성 고려
        [key: string]: any;
    }
    export interface IStrategyOptions {
        usernameField: string;
        passwordField: string;
        session?: boolean;
        passReqToCallback?: false;
    }
    export interface IStrategyOptionsWithRequest {
        usernameField: string;
        passwordField: string;
        session?: boolean;
        passReqToCallback: true;
    }
    export interface Done {
        (error: any, user?: any, options?: IVerifyOptions): void;
    }
    export interface VerifyFunction {
        (username: string, password: string, done: Done): void | Promise<any>;
    }
    export interface VerifyFunctionWithRequest {
        (req: Request, username: string, password: string, done: Done): void | Promise<any>;
    }

    export class Strategy extends PassportStrategy {
        constructor(options: IStrategyOptions, verify: VerifyFunction)
        constructor(options: IStrategyOptionsWithRequest, verify: VerifyFunctionWithRequest)
    }
}