TIL 2018-09-20

오늘 배운 것

---

• memorybook
  • 테마 관련 타이핑(typescript 형식) 작업.
  • styled-component theme 사용법
• dep
• ref

memorybook

테마 관련 타이핑(typescript 형식) 작업.

type 형태를 바꾸는 건 되었지만, redux에 적용하기 위해 getTheme 함수를 작성해야 하는 데, 다음과 같은 문제가 있다:

1. getTheme의 반환형은 ITheme이다.
2. ITheme은 IThemeEffects, IThemeAttributes를 가진다.
3. 이 함수는 일부 ITheme 속성을 업데이트 한 후 ITheme으로서 리턴.
4. 임시 변수는 shared theme을 기준으로 초기화하고 싶다.

그런데, 임시 변수인 caculatedTheme의 타입을 ITheme으로 하면 선언과 동시에 shared가 아닌 모든 속성을 할당해 줘야 한다. 나중에 하려고 해도 타입 에러가 나버린다. Partial을 쓰자니 리턴 부분에서 에러가 난다. 임시 변수를 any로 하면 결국 속성을 빠뜨려도 에러가 안 난다. 임시 변수를 lightTheme이나 darkTheme으로 초기화를 시키자니.. 좀 별로다. 어차피 이 함수에서 다 계산해도 되는 데 두 군데 쓰는 격이라.

아 이런.. 할당을 나중에 할 수 있다는 걸 잊고 있었다!!

let calculatedTheme : ITheme;

styled-component theme 사용법

… 기껏 작성한 테마 유틸이 쓸모없어졌다.

export const theme = (
  name: themeAttributeKey,
  ...effects: themeEffectKey[]
) => {
  return (props: any) => {
    let ret = props.theme[name];
    if (effects) {
      for (const effect of effects) {
        ret = props.theme[effect](ret);
      }
    }
    return ret;
  };
};

이렇게 해서 문자열을 넣어서 테마를 참조하게 했었는데, 다음과 같은 방법이 있었다.(ref 1)

const StyledThing = styled.div`${({ theme }) => css`
  color: ${theme.textColor};
  font: ${theme.font};
  background-color: ${theme.buttonColor};
`}`;

dep

ref

• 1. https://spectrum.chat/thread/4b540dea-15c6-4478-ad3d-494dcc873e09

---