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

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

0 голосов
/ 05 апреля 2019

Я делаю какую-то ошибку, когда расширяю интерфейс TypeScirpt IGulpPlugins из определений типов для gulp-load-plugins или неправильно определенных типов 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;

1 Ответ

2 голосов
/ 09 апреля 2019

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

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

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

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

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

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

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

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

Теперь это будет работать.

...