create-component-lib icon indicating copy to clipboard operation
create-component-lib copied to clipboard

Typescript config?

Open dwjohnston opened this issue 5 years ago • 3 comments

Fantastic tool.

Do you have a config for making this a typescript library?

dwjohnston avatar May 28 '19 01:05 dwjohnston

Bump?

baughmann avatar Jun 22 '19 16:06 baughmann

Ok, for anyone interested, here's what I do:

1. npm i -D typescript

2. Rename whatever files you need to .tsx, and let create-react-app create its tsconfig.json file, just as your would with a normal CRA app.

3. Create a new tsconfig.build.json file, and it's contents should be:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedParameters": false,
    "noImplicitReturns": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "noUnusedLocals": false,
    "noImplicitAny": true,
    "target": "es2015",
    "module": "esnext",
    "strict": true,
    "jsx": "react",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": false, 
    "outDir": "./dist", 
    "declaration": true

  },
  "include": [
    "src/lib/**/*.tsx", 
    "src/lib/**/*.ts"

  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

This is basically the settings you need for build only (no dev server). I can't remember the things were, but this basically the best way I've found.

4. Change you package.json to :

"build": "rimraf dist && tsc -p tsconfig.build.json"

dwjohnston avatar Aug 14 '19 01:08 dwjohnston

Ok, here is a more complete walk through for doing this:

https://github.com/dwjohnston/blog/blob/master/src/Setting%20up%20a%20react%20component%20library%20with%20TypeScript.md

dwjohnston avatar Oct 17 '19 02:10 dwjohnston