특정 유형의 키만 추출하는 방법

11090 단어 TypeScripttech

개시하다


이것은 Object 유형에서 value만 추출하여string 키가 될 때의 방법입니다.
type Person = {
  id: number
  name: string
  height: number
  job: string
}

// stringだけを持つキーを抽出したい
type PersonLabelKey = 'name' | 'job'

결론


결론은 다음과 같은 실용 프로그램을 준비하여 실현할 수 있다.
type OnlyTypeKey<T extends Object, ExpectType> = {
  [K in keyof T]: T[K] extends ExpectType ? K : never
}[keyof T]

type PersonLabelKey = OnlyTypeKey<Person, string>
/*
// 最初にvalueにkey名のリテラルかneverに変換される
{
  id: never,
  name: 'name',
  height: never,
  job: 'job'
}

// ここからkeyof Tでvalueリストを見て、keyリストが出る
'name' | 'job'
*/

사용 예


왜 이런 일을 했는지 말하자면, 목록에'find 이 항목을 표시하고 적당한 탭을 표시한다'고 적혀 있기 때문에 공통화할 수 없다고 생각하기 때문이다.라벨이 labelKey인 키를 한정화함으로써 제시할 때의 키 수량을 줄일 수 있을 뿐만 아니라 금형의 안전도 보장할 수 있다.
function findItemLabel<T extends Object>(
  items: readonly T[],
  searchItem: Partial<T>,
  labelKey: OnlyTypeKey<T, string>
) {
  const searchItemKeys = Object.keys(searchItem) as Array<keyof T>
  const item = items.find((item) => searchItemKeys.every((key) => item[key] === searchItem[key]))
  if (item == null) {
    return ''
  }
  return item[labelKey]
}

const PERSONS: Array<Person> = [
  { id: 0, name: '山田太郎', height: 170, job: 'エンジニア' },
  { id: 1, name: '山田花子', height: 160, job: 'デザイナー' },
  { id: 2, name: '佐藤太郎', height: 175, job: 'エンジニア' },
]

// 第2引数で検索オブジェクトを渡し、その結果のラベルを第3引数で指定してしまう
const personName = findItemLabel(PERSONS, { id: 0 }, 'name')

끝맺다


이상은 특정 유형의 열쇠만 추출하는 방법입니다.기회가 많지 않지만string 이외에도 키가 섞일 수 있으면 type 오류가 발생할 수 있으니 그때도 참고해주세요.
이번에 시도한 샘플 코드는 여기서 볼 수 있으니 관심 있는 분들은 보세요.
https://www.typescriptlang.org/play?#code/C4TwDgpgBA8gdgGxAFXBA0hEAeZUIAewEcAJgM6wBGAVhAMbAA0UAogZI6pAHxQC8UAN4AoKFADa6KAEs4UANZYA9gDMoyALoAuDVM34iJCmw4Ng3aAH4o03XAgA3CACcRAXwlKQajZpEiqgCucIwyyvKqcqQAksQAtgAyAIZUEAi4hsRklDC05jwAFGKyCeS6LhDJpBFIeppMJeRVLvQAFnEQ8boACskuwDLJGcg8jeIIqemYILrwSJYzuCzkwC5yAOY8IgCUwiX0EatQzf3tnfEzlIJ5dIwAdN7khaetHQl7yZQAgi4uyThvL5RgcjsBSl0BBD4uR7lEyIVCjIPgI+K9zgkrvcnK4QIjvHt+HxkV0vFgDPxKScWhjSd5NDsdiUZOokQkBII4EEEAg9qJxOJKsAgi55AByMUldwlIUi+Qk+ISSZpBAzfzSkSgSBQHqucgRKH82SkexBeJpNziODJeIQXSrdZwDYlNoQGQbNrAU3m1wlGjKKj2tabDwBQ5wY49VgAJQAyjAAHKx3S-f44XUufVwPiCCQlITG3QABhY1ttujFgEcdQAMroAqTUAcwliliu92e3QARgA7CWoP7A1AxYAKhkAzwyADoZANMMgCKGMVQdzjYSFqDt0s2u0DmuARqDAAraTagLY9XqXADYe32K4BxhkAbQyAEoZAFMMgB+GGdz-OLgBMK-LA8ACvKAE9CG7v9zbJdOwAVhYM8BxHCdp1nRp-BEcNjkgTMIgTVcoXhWIEhSFVCijONE1jFgCxkE0oCLWCBzLCAxSZRDlAQCB7gQZQNkKZCszQ20mSAA

좋은 웹페이지 즐겨찾기