Ant-design: [๊ธฐ๋Šฅ ์š”์ฒญ] ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ index.d.ts ํŒŒ์ผ์—์„œ Props ์ธํ„ฐํŽ˜์ด์Šค ์ •์˜ ๋‚ด๋ณด๋‚ด๊ธฐ

์— ๋งŒ๋“  2017๋…„ 06์›” 23์ผ  ยท  8์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: ant-design/ant-design

์ด ๊ธฐ๋Šฅ์œผ๋กœ ํ•ด๊ฒฐ๋˜๋Š” ๋ฌธ์ œ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

ํ‘œ์ค€ Props ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ณต์šฉ์œผ๋กœ ์ •์˜ํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ์˜ ์‚ฌ์šฉ์ž ์ •์˜ ๋ฒ„์ „์„ ์ž‘์„ฑํ•  ๋•Œ Props ์ •์˜๋ฅผ ์žฌ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ œ์•ˆ ๋œ API๋Š” ์–ด๋–ป๊ฒŒ ์ƒ๊ฒผ์Šต๋‹ˆ๊นŒ?

์˜ˆ๋ฅผ ๋“ค์–ด, ๋กœ๊ทธ์ธ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ค ๋•Œ ๋‹ค์Œ์„ ์ˆ˜ํ–‰ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

import { FormComponentProps } from 'antd/lib/form/Form'

class Login extends React.Component<{} & FormComponentProps, {}> {
  render() {
    // some render code
  }
}

๊ทธ๋Ÿฌ๋‚˜ ๋‹ค์Œ์€ ๋” ๋‚˜์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import { FormComponentProps } from 'antd'

class Login extends React.Component<{} & FormComponentProps, {}> {
  render() {
    // some render code
  }
}

์ ์–ด๋„:

import { FormComponentProps } from 'antd/lib/form'

class Login extends React.Component<{} & FormComponentProps, {}> {
  render() {
    // some render code
  }
}

์ด TS ๊ธฐ๋ฐ˜ UI ํŒจํ‚ค์ง€๊ฐ€ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ : ์ฒญ์‚ฌ์ง„

help wanted ๐Ÿ—ฃ Discussion

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ฒซ ๋ฒˆ์งธ๊ฐ€ ๋” ๋‚ซ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‘ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์„ ์„ ํƒํ•˜๋Š” ๊ฒƒ์€ ๋…ธ์ถœ ๋œ ์ฒซ ๋ฒˆ์งธ ๊ฒƒ๋„ ์ธํ„ฐํŽ˜์ด์Šค ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ผ ์ˆ˜ ์žˆ์ง€๋งŒ ์ด๋Ÿฌํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋Š” TypeScript๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. TS๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์‚ฌ๋žŒ๋“ค์€์ด๋ฅผ ๋ณผ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

TS๋กœ ์ž‘์„ฑ๋œ ๋งŽ์€ ํ”„๋ ˆ์ž„ ์›Œํฌ๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ฐ€์žฅ ๋ฐ”๊นฅ์ชฝ์— ๋…ธ์ถœํ•˜๊ณ  ๋ฌธ์ œ๋ฅผ ์ฐพ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฌผ๋ก  ๋‘ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์€ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ์˜ ๋ชฉ์ ์€ ์ธํ„ฐํŽ˜์ด์Šค์˜ ๋…ธ์ถœ ๋œ ์œ„์น˜๋ฅผ ํ†ตํ•ฉํ•˜๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค. ํ˜„์žฌ ์ƒํ™ฉ์€ lib/[component name]/ ํด๋”์—์„œ ์ธํ„ฐํŽ˜์ด์Šค์˜ ์œ„์น˜๋ฅผ โ€‹โ€‹์˜ˆ์ธกํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋‚˜๋Š” ์—ฌ์ „ํžˆ ์ฒซ ๋ฒˆ์งธ๊ฐ€ ์ฑ„ํƒ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  8 ๋Œ“๊ธ€

๋‹ค์Œ์œผ๋กœ ์ถฉ๋ถ„ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

import { FormComponentProps } from 'antd/lib/form'

class Login extends React.Component<{} & FormComponentProps, {}> {
  render() {
    // some render code
  }
}

์ฒซ ๋ฒˆ์งธ๊ฐ€ ๋” ๋‚ซ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‘ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์„ ์„ ํƒํ•˜๋Š” ๊ฒƒ์€ ๋…ธ์ถœ ๋œ ์ฒซ ๋ฒˆ์งธ ๊ฒƒ๋„ ์ธํ„ฐํŽ˜์ด์Šค ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ผ ์ˆ˜ ์žˆ์ง€๋งŒ ์ด๋Ÿฌํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋Š” TypeScript๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. TS๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์‚ฌ๋žŒ๋“ค์€์ด๋ฅผ ๋ณผ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

TS๋กœ ์ž‘์„ฑ๋œ ๋งŽ์€ ํ”„๋ ˆ์ž„ ์›Œํฌ๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ฐ€์žฅ ๋ฐ”๊นฅ์ชฝ์— ๋…ธ์ถœํ•˜๊ณ  ๋ฌธ์ œ๋ฅผ ์ฐพ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฌผ๋ก  ๋‘ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์€ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ์˜ ๋ชฉ์ ์€ ์ธํ„ฐํŽ˜์ด์Šค์˜ ๋…ธ์ถœ ๋œ ์œ„์น˜๋ฅผ ํ†ตํ•ฉํ•˜๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค. ํ˜„์žฌ ์ƒํ™ฉ์€ lib/[component name]/ ํด๋”์—์„œ ์ธํ„ฐํŽ˜์ด์Šค์˜ ์œ„์น˜๋ฅผ โ€‹โ€‹์˜ˆ์ธกํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋‚˜๋Š” ์—ฌ์ „ํžˆ ์ฒซ ๋ฒˆ์งธ๊ฐ€ ์ฑ„ํƒ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, ์™œ ๋‚˜๋ฅผ ์œ„ํ•ด ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”์ง€ ์•Œ์•„ ๋‚ด๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์ง€๋งŒ์ด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‚ด ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ 'antd / lib / form / Form'์—์„œ {FormComponentProps}๋ฅผ ๊ฐ€์ ธ ์˜ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ๋ญ˜ ์ž˜๋ชปํ•˜๊ณ  ์žˆ๋‹ˆ?

์•ˆ๋…•ํ•˜์„ธ์š”.

import { FormComponentProps } from 'antd/lib/form ) ์‹œ๋„ํ–ˆ์ง€๋งŒ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค๋Š” ์˜๋ฏธ์ž…๋‹ˆ๊นŒ?

๋ฌผ๋ก  ์˜ค๋ฅ˜์ž…๋‹ˆ๋‹ค. FormComponentProps ๊ฐ€ lib/form dir์— ์ง€๊ธˆ ๋…ธ์ถœ๋˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์—์ด ๋ฌธ์ œ๋ฅผ ์ œ์ถœํ•ฉ๋‹ˆ๋‹ค. :)

@newraina ahhhh ์ด์ œ

ํŠธ์œ— ๋‹ด์•„ ๊ฐ€๊ธฐ

์ด๊ฒƒ์„ ์œ„ํ•ด ์šฐ๋ฆฌ๋ฅผ ๋„์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰