CODEWITHSUNDEEP
typescripttypescript-typingsnpm-publish
D10S
D10S

Reputation: 1559

Declaration file for published npm package

I published my first npm package which was written with TypeScript. I have downloaded it to another project I have and found out I don't get completion and it is almost impossible to use it this way (not fully impossible thanks to the documentation).

If I get it right I should create a declaration file(.d.ts) and add it to the package. My problem is I can't get it done right.

I looked for and read about it online but still can't get it done properly.

My 'typings.d.ts' looks like this:

export declare function Slider(props: SliderProps): void;

The module props are placed in a 'types.ts' file, separated from the module itself.

Any help will be much appreciated.

package.json

{
    "main": "node_modules/expo/AppEntry.js",
    "name": "react-native-range-slider-expo",
    "description": "range slider",
    "license": "MIT",
    "homepage": "https://github.com/D10S60948/react-native-range-slider-expo#readme",
    "version": "1.0.6",
    "types": "./src/index.d.ts",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject",
        "build": "npx tsc -p tsconfig.json"
    },
    "dependencies": {
        "expo": "~38.0.8",
        "expo-status-bar": "^1.0.2",
        "react": "~16.11.0",
        "react-dom": "~16.11.0",
        "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
        "react-native-gesture-handler": "^1.6.1",
        "react-native-svg": "^12.1.0",
        "react-native-web": "~0.11.7"
    },
    "devDependencies": {
        "@babel/core": "^7.8.6",
        "@types/react": "~16.9.41",
        "@types/react-native": "~0.62.13",
        "typescript": "~3.9.5"
    },
    "keywords": [
        "range",
        "slider",
        "expo"
    ]
}

tsconfig.js

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "jsx": "react-native",
        "lib": [
            "dom",
            "esnext"
        ],
        "moduleResolution": "node",
        "noEmit": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "strict": true,
        "declaration": true
    }
}

Upvotes: 3

Views: 6013

Answers (1)

glinda93
glinda93

Reputation: 8479

You don't need to manually create your type declaration file.

You can do this with tsconfig.json and package.json

Add the following line to tsconfig.json:

{
  "compilerOptions": {
    "declaration": true
  },
}

And check if declaration path is correctly set in package.json:

"types": "dist/main.d.ts", // assuming main.ts is your entry point

And remove unnecessary typings.d.ts in your src directory.

Upvotes: 4

Related Questions