javascipt 함수의 인터페이스

재미난 일을 찾다가 jotai라는 react 상태관리 오픈소스를 뜯어 보고 있는데, javascript에서 interface를 선언하는 방식을 새로 알게되어 공유 한다.

 

javascript 에서는 아래와 같이  객체에 대한 인터페이스만 설정 할 수 있는 줄 알았다.

interface function1 {
	foo: string
}

그런데,, jotai를 뜯어보니 이처럼 신기하게 작성이 되어 있었다.

export function atom<Value, Update, Result extends void | Promise<void> = void>(
  read: Read<Value>,
  write: Write<Update, Result>
): WritableAtom<Value, Update, Result>

// read-only derived atom
export function atom<Value>(read: Read<Value>): Atom<Value>

// invalid function in the first argument
export function atom(invalidFunction: (...args: any) => any, write?: any): never

// write-only derived atom
export function atom<Value, Update, Result extends void | Promise<void> = void>(
  initialValue: Value,
  write: Write<Update, Result>
): WritableAtom<Value, Update, Result> & WithInitialValue<Value>

// primitive atom
export function atom<Value>(
  initialValue: Value
): PrimitiveAtom<Value> & WithInitialValue<Value>

export function atom<Value, Update, Result extends void | Promise<void>>(
  read: Value | Read<Value>,
  write?: Write<Update, Result>
) {
  const key = `atom${++keyCount}`
  const config = {
    toString: () => key,
  } as WritableAtom<Value, Update, Result> & { init?: Value }
  if (typeof read === 'function') {
    config.read = read as Read<Value>
  } else {
    config.init = read
    config.read = (get) => get(config)
    config.write = (get, set, update) =>
      set(config, typeof update === 'function' ? update(get(config)) : update)
  }
  if (write) {
    config.write = write
  }
  return config
}

 

찾아보니, js에서는 function a:(input):returnType 만 작성하면 함수의 인터페이스가 선언된다!.

처음 커리어를 시작할때 nest js 개발자 6개월, 그 이후 리액트로 프론트엔드 개발을 1년가량 하면서 javascript에 대해서 나름 잘 안다고 생각했는데, 아직 모르는게 너무 많다.