feat(@blazor/javascript-interop): type definition for Blazor i… (#42392)

- type definition based on @microsoft/dotnet-js-interop
- tests

See: dotnet/aspnetcore#18902
/cc @ryanelian @mkArtakMSFT

Thanks!

types/blazor__javascript-interop/blazor__javascript-interop-tests.ts

@@ -0,0 +1,47 @@
+/// <reference lib="DOM" />
+//
+// see {@link https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.1}
+//
+const exampleJsFunctions = {
+    showPrompt(text: string | undefined) {
+        return prompt(text, 'Type your name here');
+    },
+    displayWelcome(welcomeMessage: string) {
+        document.getElementById('welcome')!.innerText = welcomeMessage;
+    },
+    returnArrayAsyncJs() {
+        DotNet.invokeMethodAsync<number[]>('BlazorSample', 'ReturnArrayAsync').then(data => {
+            data.push(4);
+            console.log(data);
+        });
+    },
+    sayHello(dotnetHelper: DotNet.DotNetObject) {
+        return dotnetHelper.invokeMethodAsync<string>('SayHello').then(r => console.log(r));
+    },
+};
+
+interface ColorFlags {
+    red: boolean;
+    green: boolean;
+    blue: boolean;
+}
+
+const testInteropApi = async (dotNetRef: DotNet.DotNetObject) => {
+    // validate api patterns
+    const tokens = [1, 2, 3];
+    DotNet.invokeMethod<string>('MyCoolApp.Core', 'Foo', 'First', 'Second'); // $ExpectType string
+    DotNet.invokeMethod<number>('MyCoolApp.Core', 'Foo', 1, 2); // $ExpectType number
+    const fooResults = await DotNet.invokeMethodAsync<string>('MyCoolApp.Core', 'Foo', 'First', 'Second'); // $ExpectType string
+    DotNet.invokeMethodAsync<string>('MyCoolApp.Core', 'Foo', 'First', 'Second'); // $ExpectType Promise<string>
+    DotNet.invokeMethodAsync<string>('MyCoolApp.Core', 'Foo', 'First', 'Second'); // $ExpectType Promise<string>
+    DotNet.invokeMethodAsync<void>('MyCoolApp.Core', 'Foo', ...tokens); // $ExpectType Promise<void>
+    DotNet.invokeMethodAsync<void>('MyCoolApp.Core', 'Foo', 5, ...tokens, 20, ...[25]); // $ExpectType Promise<void>
+    DotNet.invokeMethodAsync<ColorFlags>('MyCoolApp.Core', 'Foo', 1, 2, 3); // $ExpectType Promise<ColorFlags>
+    dotNetRef.invokeMethod<string>('MyCoolApp.Core', 'Foo', 'First', 'Second'); // $ExpectType string
+    dotNetRef.invokeMethod<number>('MyCoolApp.Core', 'Foo', 1, 2); // $ExpectType number
+    const fooResults2 = await dotNetRef.invokeMethodAsync<string>('MyCoolApp.Core', 'Foo', 'First', 'Second'); // $ExpectType string
+    dotNetRef.invokeMethodAsync<string>('MyCoolApp.Core', 'Foo', 'First', 'Second'); // $ExpectType Promise<string>
+    dotNetRef.invokeMethodAsync<void>('MyCoolApp.Core', 'Foo', ...tokens); // $ExpectType Promise<void>
+    dotNetRef.invokeMethodAsync<void>('MyCoolApp.Core', 'Foo', 5, ...tokens, 20, ...[25]); // $ExpectType Promise<void>
+    dotNetRef.invokeMethodAsync<ColorFlags>('MyCoolApp.Core', 'Foo', 1, 2, 3); // $ExpectType Promise<ColorFlags>
+};

types/blazor__javascript-interop/index.d.ts

@@ -0,0 +1,56 @@
+// Type definitions for non-npm package blazor__javascript-interop 3.1
+// Project: https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.1
+// Definitions by: Piotr Błażejewicz (Peter Blazejewicz) <https://github.com/peterblazejewicz>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// Minimum TypeScript Version: 3.0
+
+// Here be dragons!
+// This is community-maintained definition file intended to ease the process of developing
+// high quality JavaScript interop code to be used in Blazor application from your C# .Net code.
+// Could be removed without a notice in case official definition types ships with Blazor itself.
+
+// tslint:disable:no-unnecessary-generics
+
+declare namespace DotNet {
+    /**
+     * Invokes the specified .NET public method synchronously. Not all hosting scenarios support
+     * synchronous invocation, so if possible use invokeMethodAsync instead.
+     *
+     * @param assemblyName The short name (without key/version or .dll extension) of the .NET assembly containing the method.
+     * @param methodIdentifier The identifier of the method to invoke. The method must have a [JSInvokable] attribute specifying this identifier.
+     * @param args Arguments to pass to the method, each of which must be JSON-serializable.
+     * @returns The result of the operation.
+     */
+    function invokeMethod<T>(assemblyName: string, methodIdentifier: string, ...args: any[]): T;
+    /**
+     * Invokes the specified .NET public method asynchronously.
+     *
+     * @param assemblyName The short name (without key/version or .dll extension) of the .NET assembly containing the method.
+     * @param methodIdentifier The identifier of the method to invoke. The method must have a [JSInvokable] attribute specifying this identifier.
+     * @param args Arguments to pass to the method, each of which must be JSON-serializable.
+     * @returns A promise representing the result of the operation.
+     */
+    function invokeMethodAsync<T>(assemblyName: string, methodIdentifier: string, ...args: any[]): Promise<T>;
+    /**
+     * Represents the .NET instance passed by reference to JavaScript.
+     */
+    interface DotNetObject {
+        /**
+         * Invokes the specified .NET instance public method synchronously. Not all hosting scenarios support
+         * synchronous invocation, so if possible use invokeMethodAsync instead.
+         *
+         * @param methodIdentifier The identifier of the method to invoke. The method must have a [JSInvokable] attribute specifying this identifier.
+         * @param args Arguments to pass to the method, each of which must be JSON-serializable.
+         * @returns The result of the operation.
+         */
+        invokeMethod<T>(methodIdentifier: string, ...args: any[]): T;
+        /**
+         * Invokes the specified .NET instance public method asynchronously.
+         *
+         * @param methodIdentifier The identifier of the method to invoke. The method must have a [JSInvokable] attribute specifying this identifier.
+         * @param args Arguments to pass to the method, each of which must be JSON-serializable.
+         * @returns A promise representing the result of the operation.
+         */
+        invokeMethodAsync<T>(methodIdentifier: string, ...args: any[]): Promise<T>;
+    }
+}

types/blazor__javascript-interop/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths":{
+            "@blazor/javascript-interop": ["blazor__javascript-interop"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "blazor__javascript-interop-tests.ts"
+    ]
+}

types/blazor__javascript-interop/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }