ResizeObserver API declarations missing

[ITsvetkoFF]

Search Terms

ResizeObserver

Suggestion

lib.dom.ts does not include ResizeObserver API declarations.

Use Cases

ResizeObserver is a thing that is getting some support in 2018 and I've found no mention about ResizeObserver here.

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

[MartinJohns]

I think it is intentional that the standard type definitions don't come with experimental APIs, especially if browser support is nearly not existing.

[weswigham]

We generate the lib over at https://github.com/Microsoft/TSJS-lib-generator from the standarized web IDL files now. This file contains the list of IDLs we generate the lib from. Once the feature hits, eg, the whatwg common dom interfaces IDL, we'll sync and have it. It's going to be some time (and probably much better browser support) until that happens. I'd recommend just adding the extra declarations locally to your project in the meantime, as I don't think we'd take a PR for an override for something that's still experimental.

[ITsvetkoFF]

@weswigham good to know! Thank you.

I'd recommend just adding the extra declarations locally to your project in the meantime

What is the correct place to put these declarations from Typescript perspective? Taking into account the code of resize-observer-polyfill

[weswigham]

Any file in your project will do. Many people would recommend a separate globals.d.ts or the like for things like this.

[lozandier]

@weswigham This seemingly should be revisited these days?

All major browsers support it with the evergreen model in mind: Firefox (68-69), Safari (Tech Preview for availability in next Safari to launch alongside MacOS Catalina without a doubt), Chrome, Edge w/ Chromium, & so on.

There's also updated CaniUse data on the matter now, IIRC: https://caniuse.com/#search=ResizeObserver

[typescript-bot]

This issue has been marked as 'Question' and has seen no recent activity. It has been automatically closed for house-keeping purposes. If you're still waiting on a response, questions are usually better suited to stackoverflow.

[lozandier]

This should re-open; I’m of the opinion the reason it’s closed is questionable.

The premise of not adding interface for ResizeObserver API is obsolete and needs an update.

/cc @weswigham

[heruan]

@weswigham Any update on this?

[weswigham]

Still marked as experimental on mdn, so no. When the spec is moved out of draft state and accepted, it's associated IDL should get pulled in by TS and automatically included, but that hasn't happened yet.

[SeanHub]

@weswigham MDN no longer lists this API as experimental. Currently getting "Cannot find name 'ResizeObserver'" when trying to use the API with TypeScript 3.7.2

[Adamman48]

This issue should be reopened as it is no longer experimental and all major browsers support it.

[MartinJohns]

According to MDN it's still only part of an Editor's Draft, and not all major browsers support it.

[lozandier]

I imagine what’s holding things up is Safari that won’t support it until 2020 being on their 2020 roadmap; Edge support for it is guaranteed ~January 15th when Edge Chromium is set to launch for the public w/ it’s support for ResizeObserver.

On Wed, Nov 13, 2019 at 1:00 AM Martin Johns ***@***.***> wrote: According to MDN it's still only part of an Editor's Draft, and not all major browsers support it. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#28502?email_source=notifications&email_token=AAJKUOAOKN35DZEYT26M6VLQTO6ZVA5CNFSM4GDOB24KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED5MEZQ#issuecomment-553304678>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJKUODKUSZ7BORN3AUGNKLQTO6ZVANCNFSM4GDOB24A> .

-- Kevin Lozandier lozandier@gmail.com <lozandier@gmail.com>

[puema]

Any updates here?

[yinonov]

that's one of the more bizarre issues I encountered. i've heard way much about this API the past year for it to be unfamiliar by typescript

[SephReed]

Almost to 80% https://caniuse.com/#search=ResizeObserver

[waterplea]

Time to add it, it has shipped to Safari last month. This means literally all browsers support it.

[gtteamamxx]

Up

[wKich]

@weswigham, create issue microsoft/TypeScript-DOM-lib-generator#908

[denexapp]

While the typings aren't merged into typescript yet, you can use a package from npm with ResizeObserver typings: https://www.npmjs.com/package/@types/resize-observer-browser

[subdavis]

To add to @denexapp's response:

1. install https://www.npmjs.com/package/@types/resize-observer-browser
2. /// <reference types="resize-observer-browser" /> at the top of the file where you need to use it.

[Fi1osof]

Still marked as experimental on mdn, so no. When the spec is moved out of draft state and accepted, it's associated IDL should get pulled in by TS and automatically included, but that hasn't happened yet.

Why does not just ResizeObserver | undefined type?

[vimcaw]

To me, the solution is:

1. install @types/resize-observer-browser.
2. add @types/resize-observer-browser to types field in tsconfig.json file.

Just like:

{
  "compilerOptions": {
    "types": ["@types/resize-observer-browser"],
    ...
  },
  ...
}

[wKich]

@vimcaw , they already merged types in microsoft/TypeScript-DOM-lib-generator#948

[vimcaw]

@wKich Thanks for letting me know this, but I have included DOM in the lib field of tsconfig.json, why it is still unavailable?

My tsconfig.json (TypeScript v4.1) is:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["vite/client"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": ["./src"]
}

[MartinJohns]

@vimcaw Because your TypeScript version is outdated.

[vimcaw]

@MartinJohns Yeah, after upgrading to 4.2.3, it works perfectly, thanks!