`gulp-postcss не является ошибкой типа функции`, когда она предоставляется gulp-load-plugins

Я делаю какую-то ошибку, когда расширяю интерфейс TypeScirpt IGulpPlugins из определений типов для gulp-load-плагины, или неправильно определяю типы gulp-postcss.

Согласно комментарию в index.d.ts из @types/gulp-load-plugins:

/**
 * Extend this interface to use Gulp plugins in your gulpfile.js
 */
interface IGulpPlugins {
}

Все приведенные ниже плагины, кроме gulp-postcss, работают.

import * as gulpDebug from 'gulp-debug';
import * as gulpPlumber from 'gulp-plumber';
import * as gulpIntercept from 'gulp-intercept';
import * as gulpIf from 'gulp-if';
import * as gulpPug from 'gulp-pug';
import * aas gulpHtmlPrettify from 'gulp-html-prettify';
import * as gulpSass from 'gulp-sass';
import * as gulpStylus from 'gulp-stylus';
import * as gulpSourcemaps from 'gulp-sourcemaps';
import * as gulpPostCss from 'gulp-postcss';

export interface IGulpPlugins {
  plumber: typeof gulpPlumber;
  debug: typeof gulpDebug;
  intercept: typeof gulpIntercept;
  if: typeof gulpIf;
  pug: typeof gulpPug;
  htmlPrettify: typeof gulpHtmlPrettify;
  sass: typeof gulpSass;
  stylus: typeof gulpStylus;
  postCss: typeof gulpPostCss;
  sourcemaps: typeof gulpSourcemaps;
}

В приведенном ниже коде нет ошибок компиляции TypseScript, однако, если выполнить скомпилированный TypeScript, возникнет ошибка TypeError: gulpPlugins.postCss is not a function.

import * as gulp from 'gulp';
import * as GulpPlugins from 'gulp-load-plugins';

// I did not create types for this libary yet, so temporary make TypeScript to ignore it
// @ts-ignore
import * as postcssNormalizeWhitespace from 'postcss-normalize-whitespace';

gulpPlugins: IGulpPlugins = GulpPlugins();

return gulp.src(SOURCE_FILES_GLOB_SELECTION)
    .pipe(gulpPlugins.postCss([postcssNormalizeWhitespace]))
    .pipe(gulp.dest('build'));

Если написать

import * as gulp from 'gulp';
import * as GulpPlugins from 'gulp-load-plugins';

/* When I wrote this question, types in DefinitelyTyped for this library was not exists yet,
 * but I created it. However did not create the pull request yet.
 */
import * as gulpPostCss from 'gulp-postcss';

// I did not create types for this libary yet, so temporary make typescript ingore it
// @ts-ignore
import * as postcssNormalizeWhitespace from 'postcss-normalize-whitespace';


return gulp.src(SOURCE_FILES_GLOB_SELECTION)
    .pipe(gulpPostCss([postcssNormalizeWhitespace]))
    .pipe(gulp.dest('build'));

вместо этого JavaScript будет работать без ошибок.

Я не могу понять, где я сделал ошибку. Повторюсь, все плагины в расширенном IGulpPlugins, кроме gulp-postcss, работают.

Типы для gulp-postcss, которые я написал:

/// <reference types = "node"/>
import Vinyl = require('vinyl');

declare function GulpPostCss(plugins?: Array<string>, options?: GulpPostCss.Options): NodeJS.ReadWriteStream;
declare function GulpPostCss(callback?: (file: Vinyl) => { plugins?: Array<string>, options?: GulpPostCss.Options }): NodeJS.ReadWriteStream;

declare namespace GulpPostCss {
    interface Options {
        parser?: string;
    }
}

export = GulpPostCss;

🤔 А знаете ли вы, что...
JavaScript позволяет создавать асинхронные запросы к серверу с помощью технологии AJAX.


1 371
1

Ответ:

Решено

Есть 2 вещи, которые вы не поняли.

  1. Вы сделали опечатку или, возможно, не понимаете, как работает gulp-load-plugins.

Если имя вашего плагина gulp-post-css, оно становится gulpPlugins.postCss. Однако имя этого плагина gulp-postcss, поэтому оно будет таким:

gulpPlugins.postcss(...) // NOT gulpPlugins.postCss !!!
  1. Вы не понимаете машинописный текст.

Это не имеет ничего общего с машинописью.

Вот эмпирическое правило: typescript имеет влияние нуль на поведение javascript во время выполнения. Всякий раз, когда вы обнаруживаете ошибку времени выполнения, она должна исходить от javascript-стороны машинописного текста.

Хотя 1. уже решил вашу проблему, давайте представим, что вы ДОЛЖНЫ использовать gulpPlugins.postCss. Чтобы это работало, попробуйте добавить следующие строки:

import * as gulpPostCss from 'gulp-postcss';
gulpPlugins.postCss = gulpPostCss;

Теперь это сработает.