Typescript: ResizeObserver API μ„ μ–Έ λˆ„λ½

에 λ§Œλ“  2018λ…„ 11μ›” 13일  Β·  21μ½”λ©˜νŠΈ  Β·  좜처: microsoft/TypeScript

검색어

ResizeObserver

μ•”μ‹œ

lib.dom.ts μ—λŠ” ResizeObserver API 선언이 ν¬ν•¨λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

μ‚¬μš© 사둀

ResizeObserverλŠ” 2018 년에 일뢀 지원 을 λ°›κ³ 

체크리슀트

λ‚΄ μ œμ•ˆμ€ λ‹€μŒ 지침을 μΆ©μ‘±ν•©λ‹ˆλ‹€.

  • [x] 이것은 κΈ°μ‘΄ TypeScript / JavaScript μ½”λ“œμ˜ μ£Όμš” λ³€κ²½ 사항이 μ•„λ‹™λ‹ˆλ‹€.
  • [x] κΈ°μ‘΄ JavaScript μ½”λ“œμ˜ λŸ°νƒ€μž„ λ™μž‘μ„ λ³€κ²½ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
  • [x] ν‘œν˜„μ‹μ˜ μœ ν˜•μ— 따라 λ‹€λ₯Έ JSλ₯Ό λ‚΄ 보내지 μ•Šκ³ λ„ κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • [x] 이것은 λŸ°νƒ€μž„ κΈ°λŠ₯이 μ•„λ‹™λ‹ˆλ‹€ (예 : 라이브러리 κΈ°λŠ₯, JavaScript 좜λ ₯μ΄μžˆλŠ” λΉ„ ECMAScript ꡬ문 λ“±).
  • [x]이 κΈ°λŠ₯은 TypeScript의 λ‚˜λ¨Έμ§€
lib.d.ts Question

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

μΆ”κ°€ ν•  μ‹œκ°„μ΄ μ§€λ‚œλ‹¬μ— Safari둜 λ°°μ†‘λ˜μ—ˆμŠ΅λ‹ˆλ‹€. 이것은 말 κ·ΈλŒ€λ‘œ λͺ¨λ“  λΈŒλΌμš°μ €κ°€μ΄λ₯Ό μ§€μ›ν•œλ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€.

λͺ¨λ“  21 λŒ“κΈ€

특히 λΈŒλΌμš°μ € 지원이 거의 μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” 경우 ν‘œμ€€ μœ ν˜• μ •μ˜κ°€ μ‹€ν—˜μ  API와 ν•¨κ»˜ μ œκ³΅λ˜μ§€ μ•ŠλŠ” 것이 μ˜λ„μ μ΄λΌκ³  μƒκ°ν•©λ‹ˆλ‹€.

이제 ν‘œμ€€ μ›Ή IDL νŒŒμΌμ—μ„œ https://github.com/Microsoft/TSJS-lib-generator μ—μ„œ libλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. 이 파일 μ—λŠ” libλ₯Ό μƒμ„±ν•˜λŠ” IDL λͺ©λ‘ common dom μΈν„°νŽ˜μ΄μŠ€ IDL에 λ„λ‹¬ν•˜λ©΄ λ™κΈ°ν™”ν•˜μ—¬ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. κ·Έλ ‡κ²Œ 될 λ•ŒκΉŒμ§€ μ•½κ°„μ˜ μ‹œκ°„ (그리고 μ•„λ§ˆλ„ 훨씬 더 λ‚˜μ€ λΈŒλΌμš°μ € 지원)이 될 κ²ƒμž…λ‹ˆλ‹€. κ·Έλ™μ•ˆ ν”„λ‘œμ νŠΈμ— 둜컬둜 μΆ”κ°€ 선언을 μΆ”κ°€ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. 아직 μ‹€ν—˜μ μΈ ν•­λͺ©μ— λŒ€ν•œ μž¬μ •μ˜μ— λŒ€ν•΄ PR을 μˆ˜ν–‰ν•˜μ§€ μ•Šμ„ 것이라고 μƒκ°ν•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

@weswigham μ•Œμ•„μ„œ λ°˜κ°€μ›Œμš” ! κ°μ‚¬ν•©λ‹ˆλ‹€.

κ·Έλ™μ•ˆ ν”„λ‘œμ νŠΈμ— 둜컬둜 μΆ”κ°€ 선언을 μΆ”κ°€ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

Typescript κ΄€μ μ—μ„œ μ΄λŸ¬ν•œ 선언을 넣을 μ˜¬λ°”λ₯Έ μœ„μΉ˜λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ? resize-observer-polyfill 의 μ½”λ“œ κ³ λ €

ν”„λ‘œμ νŠΈμ˜ λͺ¨λ“  파일이 κ°€λŠ₯ν•©λ‹ˆλ‹€. λ§Žμ€ μ‚¬λžŒλ“€μ΄ 이와 같은 것에 λŒ€ν•΄ λ³„λ„μ˜ globals.d.ts μΆ”μ²œν•©λ‹ˆλ‹€.

@weswigham μš”μ¦˜ λ‹€μ‹œ λ°©λ¬Έν•΄μ•Ό ν•  것

λͺ¨λ“  μ£Όμš” λΈŒλΌμš°μ €λŠ” Firefox (68-69), Safari (ν™•μ‹€νžˆ MacOS Catalina와 ν•¨κ»˜ μΆœμ‹œ 될 λ‹€μŒ Safariμ—μ„œ μ‚¬μš© κ°€λŠ₯ν•œ 기술 미리보기), Chrome, Edge w / Chromium 등을 염두에두고이λ₯Ό μ§€μ›ν•©λ‹ˆλ‹€.

ν˜„μž¬μ΄ λ¬Έμ œμ— λŒ€ν•œ CaniUse 데이터도 μ—…λ°μ΄νŠΈλ˜μ—ˆμŠ΅λ‹ˆλ‹€. IIRC : https://caniuse.com/#search = ResizeObserver

이 λ¬Έμ œλŠ” '질문'으둜 ν‘œμ‹œλ˜μ—ˆμœΌλ©° 졜근 ν™œλ™μ΄ μ—†μŠ΅λ‹ˆλ‹€. μ²­μ†Œλ₯Ό μœ„ν•΄ μžλ™μœΌλ‘œ λ‹«ν˜”μŠ΅λ‹ˆλ‹€. μ—¬μ „νžˆ 응닡을 기닀리고 μžˆλ‹€λ©΄ μ§ˆλ¬Έμ€ 일반적으둜 stackoverflow에 더 μ ν•©ν•©λ‹ˆλ‹€.

λ‹€μ‹œ 열릴 κ²ƒμž…λ‹ˆλ‹€. 문을 닫은 μ΄μœ κ°€ μ˜μ‹¬ μŠ€λŸ½λ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.

ResizeObserver API에 λŒ€ν•œ μΈν„°νŽ˜μ΄μŠ€λ₯Ό μΆ”κ°€ν•˜μ§€ μ•ŠλŠ”λ‹€λŠ” μ „μ œλŠ” 더 이상 μ‚¬μš©λ˜μ§€ μ•ŠμœΌλ©° μ—…λ°μ΄νŠΈκ°€ ν•„μš”ν•©λ‹ˆλ‹€.

/ cc @weswigham

@weswigham 이것에 λŒ€ν•œ μ—…λ°μ΄νŠΈκ°€ μžˆμŠ΅λ‹ˆκΉŒ?

mdn μ—μ„œ μ—¬μ „νžˆ μ‹€ν—˜μš©μœΌλ‘œ ν‘œμ‹œλ˜μ—ˆμœΌλ―€λ‘œ μ•„λ‹ˆμš”. 사양 이 μ΄ˆμ•ˆ μƒνƒœμ—μ„œ λ²—μ–΄λ‚˜ 수락되면 κ΄€λ ¨ IDL이 TSμ—μ„œ κ°€μ Έ μ™€μ„œ μžλ™μœΌλ‘œ ν¬ν•¨λ˜μ–΄μ•Όν•˜μ§€λ§Œ 아직 λ°œμƒν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.

@weswigham MDN은 더 이상이 APIλ₯Ό μ‹€ν—˜μš©μœΌλ‘œ λ‚˜μ—΄ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. TypeScript 3.7.2μ—μ„œ APIλ₯Ό μ‚¬μš©ν•˜λ €κ³  ν•  λ•Œ ν˜„μž¬ " 'ResizeObserver'이름을 찾을 수 μ—†μŒ"이 ν‘œμ‹œλ©λ‹ˆλ‹€.

이 λ¬Έμ œλŠ” 더 이상 μ‹€ν—˜μ μ΄μ§€ μ•Šκ³  λͺ¨λ“  μ£Όμš” λΈŒλΌμš°μ €μ—μ„œ μ§€μ›ν•˜λ―€λ‘œ λ‹€μ‹œ μ—΄μ–΄μ•Όν•©λ‹ˆλ‹€.

MDN에 λ”°λ₯΄λ©΄ μ—¬μ „νžˆ νŽΈμ§‘μž μ΄ˆμ•ˆμ˜ 일뢀일 뿐이며 λͺ¨λ“  μ£Όμš” λΈŒλΌμš°μ €κ°€μ΄λ₯Ό μ§€μ›ν•˜λŠ” 것은 μ•„λ‹™λ‹ˆλ‹€.

문제λ₯Ό ν•΄κ²°ν•˜κΈ° μ „κΉŒμ§€λŠ” μ§€μ›ν•˜μ§€ μ•ŠλŠ” Safariκ°€
2020 년은 2020 λ…„ λ‘œλ“œλ§΅μ— μžˆμŠ΅λ‹ˆλ‹€. 이에 λŒ€ν•œ Edge 지원이 보μž₯λ©λ‹ˆλ‹€.
~ 1 μ›” 15 일 Edge Chromium이 일반 λŒ€μ€‘μ„ μœ„ν•΄ μΆœμ‹œ 될 μ˜ˆμ •μž…λ‹ˆλ‹€.
ResizeObserver에 λŒ€ν•œ 지원.

2019 λ…„ 11 μ›” 13 일 μˆ˜μš”μΌ μ˜€μ „ 1:00 Martin Johns [email protected]
썼닀 :

MDN에 λ”°λ₯΄λ©΄ μ—¬μ „νžˆ νŽΈμ§‘μž μ΄ˆμ•ˆμ˜ 일뢀이며 μ „λΆ€λŠ” μ•„λ‹™λ‹ˆλ‹€.
μ£Όμš” λΈŒλΌμš°μ €μ—μ„œ μ§€μ›ν•©λ‹ˆλ‹€.

β€”
λŒ“κΈ€μ„ λ‹¬μ•˜ κΈ° λ•Œλ¬Έμ— μˆ˜μ‹  ν•œ κ²ƒμž…λ‹ˆλ‹€.
이 이메일에 직접 λ‹΅μž₯ν•˜κ³  GitHubμ—μ„œ ν™•μΈν•˜μ„Έμš”.
https://github.com/microsoft/TypeScript/issues/28502?email_source=notifications&email_token=AAJKUOAOKN35DZEYT26M6VLQTO6ZVA5CNFSM4GDOB24KYY3PNVWWK3TUL52HS4DFVREXG43VMVORBW63LNGOW5MEZLOBW63LNGOWMVXHJK#63LNGOW53304678
λ˜λŠ” ꡬ독 μ·¨μ†Œ
https://github.com/notifications/unsubscribe-auth/AAJKUODKUSZ7BORN3AUGNKLQTO6ZVANCNFSM4GDOB24A
.

>

μΌ€λΉˆ λ‘œμž” λ””μ–΄
[email protected] [email protected]

여기에 μ—…λ°μ΄νŠΈκ°€ μžˆμŠ΅λ‹ˆκΉŒ?

그것은 λ‚΄κ°€ λ§Œλ‚œ 더 κΈ°κ΄΄ν•œ 문제 쀑 ν•˜λ‚˜μž…λ‹ˆλ‹€. ν•„μžλŠ” μž‘λ…„μ—μ΄ API에 λŒ€ν•΄ 타이프 μŠ€ν¬λ¦½νŠΈμ— μ΅μˆ™ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— 많이 λ“€μ—ˆμŠ΅λ‹ˆλ‹€.

거의 80 % https://caniuse.com/#search = ResizeObserver

μΆ”κ°€ ν•  μ‹œκ°„μ΄ μ§€λ‚œλ‹¬μ— Safari둜 λ°°μ†‘λ˜μ—ˆμŠ΅λ‹ˆλ‹€. 이것은 말 κ·ΈλŒ€λ‘œ λͺ¨λ“  λΈŒλΌμš°μ €κ°€μ΄λ₯Ό μ§€μ›ν•œλ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€.

μͺ½μœΌλ‘œ

@weswigham , 문제 λ§Œλ“€κΈ° https://github.com/microsoft/TSJS-lib-generator/issues/908

타이핑이 아직 타이프 μŠ€ν¬λ¦½νŠΈμ— λ³‘ν•©λ˜μ§€λŠ” μ•Šμ•˜μ§€λ§Œ, ResizeObserver 타이핑과 ν•¨κ»˜ npm의 νŒ¨ν‚€μ§€λ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€ : https://www.npmjs.com/package/@types/resize -observer-browser

@denexapp 의 응닡에 μΆ”κ°€ν•˜λ €λ©΄ :

1) https://www.npmjs.com/package/@types/resize-observer-browser μ„€μΉ˜
2) 파일 상단에 /// <reference types="resize-observer-browser" /> 을 (λ₯Ό) μ‚¬μš©ν•΄μ•Όν•©λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰