Create a TypeScript project – DEV Community 👩‍💻👨‍💻

Making a TypeScript challenge is straightforward!

Let’s stand up and working with construct and testing scripts!

You will want just a few issues first:

Create your challenge folder

Create a folder along with your challenge’s identify in [[Project Name]].

NOTE: Node.js conference is to make use of kebab-case. All letters are decrease case, and dashes are used for areas.

Run the next command:

mkdir [[Project Name]]

Open your folder in your editor. For Visible Studio Code, you possibly can run the next shortcut:

code [[Project Name]]

Set up Dependencies

Create your bundle.json, which shops NPM configuration.

Run the next command:

npm init

Set up TypeScript and Jest as "devDependencies" in bundle.json. This may also create a package-lock.json file, which shops particular bundle model info.

Run the next command:

npm i -D typescript jest ts-jest @varieties/jest

Configure TypeScript

Creates your tsconfig.json file, which shops TypeScript configuration.

Run the next command:

npx tsc --init

Creates your src/index.ts file.

Run the next instructions:

mkdir src
contact ./src/index.ts

In tsconfig.json, replace the next "compilerOptions". This configures TypeScript to make use of your supply recordsdata, and generate all the mandatory declaration and map recordsdata.

  "rootDir": "./src",
  "declaration": true,
  "declarationMap": true,
  "sourceMap": true,
  "outDir": "./dist",

In bundle.json, create the next properties. This configures your bundle to make use of the TypeScript generated recordsdata.

  "important": "dist/index.js",
  "varieties": "dist/index.d.ts",

Configure Scripts

In bundle.json, create the next "scripts". These are frequent scripts for constructing and testing.

  "scripts": {
    "check": "jest",
    "begin": "tsc --watch",
    "construct": "tsc",
    "clear": "tsc --build --clean"
    "prepublishOnly": "tsc --build --clean && tsc",
  }

In bundle.json, add the next part. This tells Jest the right way to discover and run your TypeScript exams.

  "jest": {
    "preset": "ts-jest",
    "testPathIgnorePatterns": [
      "<rootDir>/dist/"
    ]
  }

Configure Git

Create your Git configuration. You will need to verify in solely supply recordsdata.

Run the next instructions:

git init
contact .gitignore

Add the next to .gitignore. This may stop checking in TypeScript generated recordsdata.

node_modules/
dist/

Configure NPM publish

Create your NPM publish configuration. You will need to publish BOTH supply recordsdata, and TypeScript generated recordsdata.

Run the next command:

contact .npmignore

Add the next to .npmignore. This may stop checking in pointless recordsdata.

NOTE: Don’t embrace dist/ or src/ in your .npmignore file.

tsconfig.json