Add Intl.PluralRules to DOM types

[dsifford]

TypeScript Version: 2.8.3

Search Terms:

• Intl.PluralRules
• Intl
• pluralrules

(searched all issues, the wiki, the code, google, and stackoverflow)

Code

const plurals = new Intl.PluralRules(); // error: Property 'PluralRules' does not exist on type 'typeof Intl'.

Gist:

Intl.PluralRules is at Stage 4 and is supported by most browsers. In addition, there is a TC39 polyfill that exists for older browsers. I'd expect this now to exist in the DOM type definitions.

Expected behavior: Intl.PluralRules to be defined.

Actual behavior: Intl.PluralRules isn't defined anywhere. (I actually even took it one further and ripgrepped the entire repository for PluralRules and there were 0 matches.)

Playground Link: N/A

Related Issues: None that I could locate.

[mhegazy]

PRs welcomed. I think we can add that to lib.es2018.intl.d.ts. see https://github.com/Microsoft/TypeScript/blob/master/src/lib/es2017.intl.d.ts for example.

[dsifford]

For those who need this right now:

declare namespace Intl {
    interface PluralRulesOptions {
        localeMatcher?: 'lookup' | 'best fit';
        type?: 'cardinal' | 'ordinal';
    }

    interface ResolvedPluralRulesOptions {
        locale: string;
        pluralCategories: string[];
        type: 'cardinal' | 'ordinal';
        minimumIntegerDigits: number;
        minimumFractionDigits: number;
        maximumFractionDigits: number;
        minimumSignificantDigits: number;
        maximumSignificantDigits: number;
    }

    interface PluralRules {
        resolvedOptions(): ResolvedPluralRulesOptions;
        select(n: number): string;
    }

    const PluralRules: {
        new (locales?: string | string[], options?: PluralRulesOptions): PluralRules;
        (locales?: string | string[], options?: PluralRulesOptions): PluralRules;
        supportedLocalesOf(
            locales: string | string[],
            options?: PluralRulesOptions,
        ): string[];
    };
}

@mhegazy Thanks for the info! I'll take a look either later tonight or tomorrow and give it a shot 👍

[dsifford]

@mhegazy Looking at the example you linked to... I'm not sure how that file is even being included in the main lib.d.ts? I tried adding a slew of different configurations to my tsconfig (different targets, adding all of the es2017 libs, etc) and I still could not get formatToParts to ever show up.

Is this confirmed to be working correctly? What am I doing wrong here? Any tips are greatly appreciated.

[mhegazy]

The final file is built using a Jake/Gulp tasks. here is a link https://github.com/Microsoft/TypeScript/blob/master/Jakefile.js#L120

[dsifford]

Thanks for the info. That still only half-solves my question. Again, I've configured my tsconfig in every way imaginable and I still cannot get functionality from es2017.intl.d.ts to work right now in TypeScript (namely, the formatToParts method).

So my worry is that if that's someway malformatted or configured incorrectly, basing my PR on that implementation will lead to a malformatted or misconfigured implementation of PluralRules.

[mhegazy]

tsc --lib es2017,es2017.intl

[dsifford]

@mhegazy Did you try that?

Here's the output for me (latest TypeScript version):

dsifford ~/repos/test-intl
$ tsc --lib es2017,es2017.intl
foo.ts(3,3): error TS2339: Property 'formatToParts' does not exist on type 'DateTimeFormat'.

From the schema currently listed at http://json.schemastore.org/tsconfig:

"lib": {
    "description": "Specify library file to be included in the compilation. Requires TypeScript version 2.0 or later.",
    "type": "array",
    "items": {
        "type": "string",
        "enum": [
            "es5",
            "es6",
            "es2015",
            "es7",
            "es2016",
            "es2017",
            "es2018",
            "esnext",
            "dom",
            "dom.iterable",
            "webworker",
            "scripthost",
            "es2015.core",
            "es2015.collection",
            "es2015.generator",
            "es2015.iterable",
            "es2015.promise",
            "es2015.proxy",
            "es2015.reflect",
            "es2015.symbol",
            "es2015.symbol.wellknown",
            "es2016.array.include",
            "es2017.object",
            "es2017.sharedmemory",
            "es2017.string",
            "es2017.typedarrays",
            "es2018.promise",
            "es2018.regexp",
            "esnext.array",
            "esnext.asynciterable"
        ]
    }
},

There is no mention of es2017.intl.

[mhegazy]

c:\test\sandbox>type a.ts
declare var x: DateTimeFormatPartTypes;
declare var d: DateTimeFormat;
d.formatToParts();

c:\test\sandbox>tsc --v
Version 2.8.3

c:\test\sandbox>tsc --lib es2017,es2017.intl a.ts

c:\test\sandbox>tsc --lib es2017,es2017.intl a.ts --listFiles
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2017.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2017.intl.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2017.string.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2017.object.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2016.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2016.array.include.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2015.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es5.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2015.reflect.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2015.proxy.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2015.iterable.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2015.symbol.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2015.promise.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2015.generator.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2015.collection.d.ts
C:/Users/mhegazy/AppData/Roaming/npm/node_modules/typescript/lib/lib.es2015.core.d.ts
a.ts

[dsifford]

hmmmm... The plot thickens.

Thanks for the info. That's extremely helpful. Let's put a pin in this for now. I'll try and sort out what's going on on my machine and get back to this tomorrow at some point.

Thanks again for all your help. 🙏

[dsifford]

Alright @mhegazy so I investigated it further...

I still think the formatToParts method is not typed properly because your example works only when you declare d as type DateTimeFormat. It does not work, however, when it is type Intl.DateTimeFormat.

// works
declare var d: DateTimeFormat;
d.formatToParts();

// does not work
declare var d: Intl.DateTimeFormat;
d.formatToParts(); // Property 'formatToParts' does not exist on type 'DateTimeFormat'.

I think if formatToParts was typed similarly to how my implementation above, this issue will resolve.

Can you confirm this?

I tried in the playground, locally on my machine at home, and on codesandbox.com and all three locations I'm able to repro the issue.

.... full stop ....

With that in mind, what about just creating a lib.es2018.intl.d.ts file and literally dropping in the code snippet that I pasted in above? Would that work?

Second. If my suspicion is correct, should I start a new thread for the formatToParts issue?

Thanks for your patience. I greatly appreciate your hospitality.

[mhegazy]

We need a new file, and we need it wired in the build like the lib.es217.intl.d.ts. And also in the commandline parser.