How to use CSSNext in Typescript and avoid pesky "error TS2349" the Typescript - way

Question

Sorry if this Question has bean ask and ask. But I keep hitting this pesky "error TS2349", every time I want to use an external Node Package in my Typescript Project, what dose not yet have a TypeScript Definition :(

Here is my Current Setup

node -v v5.0.0
tsc -v message TS6029: Version 1.6.2
OS: 4.1.12-1-ck GNU/Linux Arch 
tsconfig {
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES5",
        "noImplicitAny": false,
        "outDir": "../lib",
        "rootDir": ".",
        "sourceMap": false
    },
}
external node package : "cssnext": "^1.8.4"

My Main Code

/// <reference path="../definitions/tsd/node/node.d.ts" />
import * as fs from "fs";
import * as cssnext from "cssnext";
let source = "./index.css";
let output = cssnext(
  fs.readFileSync(source, "utf8"),
  {from: source}
);
fs.writeFileSync("dist/index.css", output);

What I am looking for ?

var cssnext = require("cssnext")
var fs = require("fs")

var source = "./index.css"
var output = cssnext(
  fs.readFileSync(source, "utf8"),
  {from: source}
)
fs.writeFileSync("dist/index.css", output)

What I get :(

tsc -p ./src;
src/main.ts(36,14): error TS2349: Cannot invoke an expression whose type lacks a call signature.

** _reference.d.ts has **

declare module "cssnext" {}
declare function cssnext(str: any,ops:Object): string | Object;

Real question is

What is "error TS2349" saying in English, with this context and how can I write a mad max TypeScript Definition to fix this one and related. :)

I love Type Script ways, but other times :(

** Answer **

With help from below the code to solve this Question is:

declare module "cssnext" {
    function cssnext(str: string,ops:Object): string | Object;
    export default cssnext;
} 
import * as cssnext from "cssnext";
let cssnext(str,op)

It might not be 100% cssnext complaint, but it's TSD starting point.

score 2 · Accepted Answer · answered Nov 12 '15 at 18:43

2

This definition

declare module "cssnext" {}
declare function cssnextLib(str: any,ops:Object): string | Object;

says that there is a module named "cssnext" which has no members. This is the type that gets imported when you write import * as cssnextLib from "cssnext";. The cssnextLib function you wrote in the above definition gets shadowed (hidden) by the import, so you can't see it.

What you should write instead is:

declare module "cssnext" {
    function cssnextLib(str: any,ops:Object): string | Object;
    export = cssnextLib;
}

answered Nov 12 '15 at 18:43

Ryan Cavanaugh

209,514
56
272
235

Hey Ryan, I think unlike what was described in the question, the function in the `cssnext` library is [`cssnext`](http://cssnext.io/setup/#as-a-javascript-library) and not `cssnextLib`. – David Sherret Nov 12 '15 at 18:50
The name `cssnextLib` is not visible outside the module declaration – Ryan Cavanaugh Nov 12 '15 at 18:59
Oh yeah, my bad. I got confused because of `import * as cssnextLib from "cssnext"`. I didn't notice `export =`. I think it should use a default import then—`import cssnextLib from "cssnext";`? – David Sherret Nov 12 '15 at 19:00
@ryan-cavanaugh it's my bad not David, I cssnextLib is not cssnext and therefore should not be in Definition file :) But your solution open up a new bug **error TS2497: Module '"cssnext"' resolves to a non-module entity and cannot be imported using this construct.** if applied to above now :( – SkyRise Nov 12 '15 at 19:09
You have to add a ```namespace cssnextLib {}``` inside the "cssnext" declaration. – OctoD Jul 04 '17 at 21:34

How to use CSSNext in Typescript and avoid pesky "error TS2349" the Typescript - way

1 Answers1