Configure TypeScript (DL-17) #53
Conversation
| theme?: 'primary' | 'secondary'; | ||
| }; | ||
|
|
||
| export type Props = AttributeProps & CustomProps; |
There was a problem hiding this comment.
interface 대신 type 키워드로 컴포넌트 prop 스펙을 정의해도 상관없긴 한데,
확장성 같은 몇가지 기능 차이가 있어욤 ㅎㅎ
차후 다른 형태의 버튼 인터페이스가 필요하다면
기존 인터페이스를 extends 해서 확장 가능해요 type 은 안되구요ㅠㅠ
- https://luckyyowu.tistory.com/401
- https://medium.com/@alexsung/typescript-type%EA%B3%BC-interface-%EC%B0%A8%EC%9D%B4-86666e3e90c
그래서 아래와 같이 쓰는건 어떨까요 ? :))
export enum THEME_VALUE {
PRIMARY ='primary',
SECONDARY= 'secondary'
}
export interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
theme?: THEME_VALUE
}
There was a problem hiding this comment.
아래 문서 보고 정한것인데 컴포넌트 내에서 사용하는 Props나 State는 type으로 정의하고 API 관련된 타입들은 interface를 사용하고자 합니다. 타입스크립트에서도 권장하는 ruleset에서 interface-over-type-literal을 제거 했더라구요.
| @@ -0,0 +1,7 @@ | |||
| export interface UserSampleState { | |||
There was a problem hiding this comment.
인터페이스 정의할 때는 앞에 I 붙여 주는게 좋아욤 ㅎㅎ
export interface IUserSampleState { ...
tslint 로 자동으로 체크해 줄 수도 있구요
https://palantir.github.io/tslint/rules/interface-name/
There was a problem hiding this comment.
이 부분은 naming convention이라 정하기 나름일것 같은데 I prefix로 interface라는걸 명시해 주는 이유가 있을까요? I prefix가 모든 interface에 들어간다면 I 로 시작하는 interface 명이나 interface 명이 앞에있는 I로 인해 잘 안보일까 걱정이네요
| export interface UserSampleState { | ||
| id: number; | ||
| email: string; | ||
| first_name: string; |
There was a problem hiding this comment.
이부분 제가 잘 몰라서 그러는데 데이터가 first_name으로 들어와도 camelCase로 쓰는건가요?
| export interface UserSampleState { | ||
| id: number; | ||
| email: string; | ||
| first_name: string; |
| @@ -0,0 +1,16 @@ | |||
| export interface UserSampleState { | |||
client/src/store/action-helpers.ts
Outdated
| import { createAction } from '@reduxjs/toolkit'; | ||
|
|
||
| function actionWithPayload<T>() { | ||
| return (payload?: T) => ({ payload }); |
There was a problem hiding this comment.
payload 가 옵셔널이라, undefined 인 경우 처리도 필요할것 같아욤 !!
There was a problem hiding this comment.
function actionWithPayload<T>() {
return (payload?: T): { payload: T | undefined } => ({ payload });
}
이렇게 처리했는데 말씀하시는게 맞는지 모르겠네용 ㅎㅎ
| [ReduxSampleActions.getSampleUsers.fulfilled]: (state, { payload: userData }) => { | ||
| console.log(userData); |
| const reduxSampleReducer = createReducer(initialState, { | ||
| // TODO createAsyncAction helper 생성 후 fulfilled 상태 타입 확인 | ||
| [ReduxSampleActions.getSampleUsers.fulfilled]: (state, { payload: userData }) => { |
There was a problem hiding this comment.
[ReduxSampleActions.getSampleUsers.fulfilled.type]
There was a problem hiding this comment.
아하 type을 넣으면 됐었네요! ㅎㅎ
| state.sampleUsers = userData; | ||
| }, | ||
| [ReduxSampleActions.triggerBtnClick]: (state, action) => { | ||
| [TRIGGER_BTN_CLICK]: (state, action) => { |
There was a problem hiding this comment.
[ReduxSampleActions.triggerBtnClick.type]:
...
[ReduxSampleActions.reset.type]:
이렇게 써도 될 것 같아욤ㅎㅎ
client/src/configureStore.ts
Outdated
|
|
||
| export default function configureAppStore(preloadedState) { | ||
| export type AppDispatch = ReturnType<typeof configureAppStore>['dispatch']; |
There was a problem hiding this comment.
export type TAppDispatch = ... 처럼 type 은 T prefix~
개발 서버 돌려야된다는걸 잊고 그냥 올렸네요 ㅠㅠ 고칠거 고치고 이제 개발 서버도 ReduxSample도 잘 동작합니다~ ㅎㅎㅎ :) |
|
AppState 및 스토어 쪽에 circular dependency가 생긴것들 store쪽에 구조 조정을 조금 했는데 src/store/actions.ts 파일에서도 발생하는데 이건 아직 해결을 못했어요... ㅜㅜ 지금은 방법이 생각이 안나서 나중에 다시 볼게요 |
타입스크립트 적용을 했는데 redux
createAsyncThunkhelper 함수 만드는 작업이 남았어요.