DEV Community

official_dulin
official_dulin

Posted on

Pick and large interface V.S. small interface. Which one is better?

#typescript #help

When I use the option 1 to make my business types(T0, T1, etc...), I found I repeated Pick<ChannelBaseInfo1, 'channelCode'> too many. So maybe option 2 is better? Please give me some suggestion. Thanks.

// Option 1. 
type ChannelBaseInfo1 = {
  channelCode: string;
  channelName: string;
}

// Use Pick utility type
type T0 = Pick<ChannelBaseInfo1, 'channelCode'> & {
  t0: string;
}

type T1 = ChannelBaseInfo1 & {
  t50: string;
}

type T2 = Partial<Pick<ChannelBaseInfo1, 'channelCode'>> & {
  t2: any;
}

// a lots of types using ChannelBaseInfo1 or Pick<ChannelBaseInfo1, 'channelCode'>
// ...
type T100 = Pick<ChannelBaseInfo1, 'channelName'> & {
  t100: string;
}

// Option 2.
type ChannelCode = {
  channelCode: string;
}
type ChannelName = {
  channelName: string;
}
type ChannelBaseInfo2 = ChannelCode & ChannelName;

type T101 = ChannelCode & {
  t101: string;
}

type T102 = ChannelBaseInfo2 & {
  t102: string;
}
type T103 = Partial<ChannelCode> & {
  t103: string;
}
// a lots of types using ChannelBaseInfo2, ChannelCode and ChannelName
// ...
type T200 = ChannelName & {
  t200: string;
}
Enter fullscreen mode Exit fullscreen mode

TypeScript Playground

Top comments (2)

Collapse
 
bias profile image
Tobias Nickel •

small interfaces.
and the ChallelBaseInfo should be named ChannelInfo and the properties should be named code and number, otherwise you create a lot of stutter. it might help if you try reading your code out loud 😉

Collapse
 
mrdulin profile image
official_dulin • • Edited

Yeah. I understand I don't need to add channel prefix to each property like channelXXX pattern because we already have the ChannelInfo context. That's not the point. This is just a demo.

Small interfaces like this:

type ChannelCode = {
   code: string;
}
type ChannelName = {
   name: string;
}
type ChannelInfo = ChannelCode & ChannelName;
Enter fullscreen mode Exit fullscreen mode

Actually, this will raise another question. How to name the types. If the code property is a union type rather than string. How should we name the ChannelCode object type?

type ChannelCode = '0' | '1' | '2';
type ChannelCodeDTO = {
   code: ChannelCode;
};
Enter fullscreen mode Exit fullscreen mode

In order to distinct the ChannelCode union type and object type names, I add a suffix like DTO. There are some choices:

ChannelCodeObject  
ChannelCodeStruct 
ChannelCodeDTO
Enter fullscreen mode Exit fullscreen mode

Or,

type ChannelCode = {
   code: '0' | '1' | '2';
};
// later
type Biz = {
  channelCode: ChannelCode['code'];
}
Enter fullscreen mode Exit fullscreen mode

How will you handle this situation?

Read next

taiyama1212 profile image

How to ban type assertions with lint

yamatai12 -

c0xxxtv profile image

【React.js】Making a Simple Toast Message Component with useContext and React Portal　-part1-

Kota Ito -

lilbeqiri profile image

Model Inputs: Reactive Two-Way Binding

Ilir Beqiri -

depaa profile image

Elevating Your AWS Lambda Game With Middy And TypeScript

Matteo Depascale -