728x90
SMALL
※ 인프런 - 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)
}
}
728x90
LIST
'개발자 도전기 > [STUDY] JS || TS' 카테고리의 다른 글
nuxt.js | shopping web-app | 기본부터 차근차근 (1) | 2022.09.19 |
---|---|
ts-node | NodeBird | 다양한 케이스를 위한 오버로딩 (0) | 2022.05.06 |
ts-node | NodeBird | 라우터 만들기(3) (0) | 2022.05.03 |
ts-node | NodeBird | 라우터 만들기(2) (0) | 2022.05.02 |
ts-node | NodeBird | 라우터 만들기(1) (0) | 2022.04.22 |
댓글