Effective Angularの第6章のまとめ | N-BLOGΣ（゜Д゜）カッ!

6章：Applying Code Conventions and Design Patterns in Angular
を読んだので調べたことをつらつらと書く

TypeScript
・オブジェクトを返却

const observables$ = combineLatest({ a: of(123), b: of(456) }).pipe(
    map(({ a, b }) => ({ obs: a * 2, obs2: b / 2 }))
);
observables$.subscribe((it) => console.log(it));
//obs: 246, obs2: 228

・Partial
オブジェクトの一部だけのもの
https://zenn.dev/tommykw/articles/d7ce0b4efdabc4

・assign
データをマージする
https://reffect.co.jp/html/javascript-object-assign

Angularのデザインパターン
・Decorator
https://minase-program.hatenablog.com/entry/2020/01/25/001800
関数

export function LogMethod(
  target: unknown,
  propertyKey: string,
  descriptor: PropertyDescriptor
) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: unknown[]) {
    console.log(
      <code>Method ${propertyKey} is called with args: ${JSON.stringify(args)}</code>
    );
    return originalMethod;
  };
  return descriptor;
}

呼び出し方
呼ぶとconsole.logが呼ばれる

@LogMethod
test() {
    return 3;
}

・ServiceをDI

constructor(exportFacadeService: ExportFacadeService) {
    exportFacadeService.getAll();
}


@Injectable({ providedIn: 'root' })
export class ExportFacadeService {
    getAll() {
        console.log('getAll');
    }
}

・インターセプター1

provideHttpClient(withInterceptors([AuthInterceptor])),

export const AuthInterceptor: HttpInterceptorFn = (
    req: HttpRequest<unknown>,
    next: HttpHandlerFn
) => next(req.clone({ setHeaders: { Authorization: 'auth_token' } }));

・インターセプター2

provideHttpClient(withInterceptors([MockInterceptor])),

export const MockInterceptor: HttpInterceptorFn = (
  req: HttpRequest&lt;unknown&gt;,
  next: HttpHandlerFn
) =&gt; {
  console.log('mockintercepter:' + <code>assets${req.url}.json</code>);
  if (!isDevMode()) return next(req);
  const clonedRequest = req.clone({
    url: <code>assets${req.url}.json</code>,
    method: 'GET',
  });
  return next(clonedRequest).pipe(
    map((event: HttpEvent&lt;unknown&gt;) =&gt; {
      if (event instanceof HttpResponse &amp;&amp; req.method !== 'GET') {
        return event.clone({ body: req.body });
      }
      return event;
    })
  );
};

・ジェネリック

export interface ModalAdapter<T, S> {
    fromDto(dto: T): S;
    toDto(model: S): T;
}

その他
・Fn
HttpInterceptorFn のように Fn が語尾につく型は、関数型 (Function Type) であることを示すための命名規則です。

・assetsのディレクトリ
nx使うならangular.jsonじゃなくてproject.jsonに書く

"assets": [
    {
        "glob": "**/*",
        "input": "apps/Invoicing/public"
    },
    "apps/Invoicing/src/assets"
],

Effective Angular

Pocket

関連記事: