“gulp-postcss is not a function”类型错误，当它由 gulp-load-plugins 提

Question

当扩展的TypeScript接口从gulp-load-plugins的类型定义或错误定义的gulp-postcss类型IGulpPlugins时，我犯了某种错误。

根据@types/gulp-load-plugins index.d.ts的评论：

/**
 * 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;

Answer 1

有两件事你没有做对。

1. 你打错了字，或者可能不明白gulp-load-plugins是如何工作的。

如果您的插件名称是 gulp-post-css ，则它变为 gulpPlugins.postCss 。但是，该插件名称是 gulp-postcss ，因此它将是：

gulpPlugins.postcss(...) // NOT gulpPlugins.postCss !!!

2. 你不懂打字稿。

这与打字稿无关。

这里有一个经验法则：打字稿对javascript运行时行为的影响为零。每当你发现运行时错误时，它必须来自打字稿的javascript端。

虽然 1. 已经解决了你的问题，让我们假设你必须使用 gulpPlugins.postCss .为了使其正常工作，请尝试添加以下行：

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

现在它会起作用。