visual - Agregar archivo de mecanografía personalizada en un proyecto VSCode de JavaScript

visual studio code javascript intellisense

Question

Problema

Estoy trabajando en un proyecto de JavaScript usando VSCode. Estoy utilizando el patrón de diseño UMD y vscode intellisense no puede reconocer las exportaciones de un módulo desde otro archivo. globals.d.ts todas las declaraciones en un archivo llamado globals.d.ts . Desafortunadamente, no pude encontrar una manera de cargar las declaraciones globals.d.ts de mis archivos JavaScript.

Ejemplo de declaración de módulo

export namespace ModuleName {
    export interface Item {
        toString(): string;
        property: string;
        name: string;
    }
}

Ejemplo de archivo JavaScript

(function (global, factory) {
    "use strict";
    if (typeof ModuleName === "undefined" && typeof require === "function") global.ModuleName = require("./mymodule.js");
    if (typeof exports !== "undefined" && typeof module !== "undefined") factory(exports);
    else factory(global.OtherModule = global.OtherModule || {});
})(this, (function (exports) {
    "use strict";

    function myMethod() {

    }

    exports.myMethod = myMethod;
    return exports;
}));

Lo que intenté

Intenté usar typings install "globals.d.ts" que creó la carpeta typings , typings.json , etc. Esto solo funcionó después de abrir el archivo typings en VSCode y luego cerrar y volver a abrir la aplicación. Eso solo funcionó mientras mantenía abierto el archivo de typings . Esta no es una forma muy conveniente de agregar mis declaraciones de interfaz.

Sobre VSCode (hace 8 meses)

Version: 1.17.0
Shell: 1.7.7
Node: 7.9.0
Architecture: x64

Acerca de VSCode (Ahora)

Version: 1.24.1
Shell: 1.7.12
Node: 7.9.0
Architecture: x64

No hay cambio en el comportamiento.

Answer 1

Reconocimiento

Esta respuesta fue en su mayoría copiada / inspirada por la respuesta de Vitalii , pero como se tuvo que modificar un poco, para trabajar con mi proyecto, también estoy agregando esta respuesta.

Solución

En la parte superior de cada archivo donde uso un código externo, agregué:

if (undefined) var { -List of Namespaces used- } = require("./globals");

Sin definir es la forma más corta y simple (en la que pensé) de tener un valor falso constante sin desencadenar eslint o jshint . Esto asegura que el código nunca se ejecutará.

Utilicé var lugar de let o const ya que no se mantendrá el ámbito if, sino el ámbito global de archivos.

Esto declarará realmente las variables dentro de {} (como undefined ), pero typeof undeclared y typeof undefined son "undefined" , por lo que no hay diferencia en el código.

Al tener todas las declaraciones en un archivo, puedo obtener todos los espacios de nombres desestructurando una declaración de requerimiento en una línea.

Problemas con la solución

No puedo ver las interfaces en globals.d.ts desde archivos JavaScript.

export namespace Namespace {
    export interface Interface {
        property: string;
    }
}

He solucionado temporalmente este problema cambiando el nombre del espacio de nombres con las interfaces a las Interfaces (también globals.d.ts arreglado todas las referencias en globals.d.ts ) y globals.d.ts creado otro espacio de nombres con constantes que implementan las interfaces, como por ejemplo:

export namespace Interfaces {
    export interface Interface {
        property: string;
    }
}

export namespace Namespace {
    export const Interface: Interfaces.Interface;
}

También tuve problemas para usar los espacios de nombres de globals.d.ts en los comentarios de JavaScript. Para resolver este problema, agregué typeof delante del tipo, así: /** @param {typeof Namespace.Interface} */

Answer 2

Solución Node.JS Plain

Crear los siguientes archivos (los nombres deben ser los mismos):

lib.js 
lib.d.ts

Dentro de lib.js escribe un código, digamos éste:

function whenDo(params) {
    return params;
}

module.exports = whenDo;

Dentro de lib.d.ts escribe esto:

declare function wd(params: wd.Params): wd.Params;

declare namespace wd {
    interface Params {
        name: string;
    }
}

export = wd;

Luego, cree un archivo en algún lugar para consumir la función recién creada y coloque este código:

const wd = require(''./lib/lib'');

const opt = wd({name:''drag13''});
console.log(opt.name);

Y la magia está aquí, todo funcionó bien.

El código fue robado desde aquí https://github.com/Drag13/WhenDo/blob/master/src/index.d.ts

Answer 3

Solución de sintaxis de importación ES6 para aquellos que usan babel

Crear los siguientes archivos (los nombres deben ser los mismos):

lib.js 
lib.d.ts

Dentro de lib.js escribe un código, digamos éste:

export const testMethod = (name, params) => params && params.age ? `hello ${name} with age: ${params.age}` : `hello ${name}`;
export const myConst = {
     name: ''test'',
     age: 5
 };

Dentro de lib.d.ts escribe esto:

declare namespace MyModule {
    interface IParams { age: number; }

    function testMethod(name: string, params: IParams): string;

    const myConst: {
        name: string,
        age: number
    }
}
export = MyModule;

Luego, cree un archivo en algún lugar para consumir la función recién creada y coloque este código:

import { testMethod } from "./lib/lib";

const name = ''drag13'';
const r = testMethod(name, { age: 5 });
console.log(r);

Ahora, intellisense debería funcionar bien para params y resultado.

Pero Este enfoque requiere que uses babel to friend node.js e imports. Si intentará cambiar el código del estilo de importación para requerir el estilo, aún verá tipos y argumentos, pero la inteligencia fallará.

Verificación simple babel:

npm i babel-preset-env babel-cli
./node_modules/.bin/babel-node index.js --presets env

Mi versión de VsCode es 1.24.1