Create a TypeScript Project – Dev Community

Creating a TypeScript project is easy!

Let’s get up and running with building and testing the script!

You’ll need a few things first:

create your project folder

Create a folder with the name of your project [[Project Name]],

Comment: Node.js convention is to use kebab-case, All letters are lowercase, and dashes are used for spaces.

Run the following command:

mkdir [[Project Name]]
enter fullscreen mode

exit fullscreen mode

Open your folder in your editor. For Visual Studio Code, you can run the following shortcut:

code [[Project Name]]
enter fullscreen mode

exit fullscreen mode

install dependencies

Create your own package.jsonwhich store npm layout.

Comment: When prompted, it is highly recommended to start with the version 0.0.0 either 0.0.1,

This means that the project is in development. start with 1.0.0 This means that the project is steady,

Run the following command:

npm init
enter fullscreen mode

exit fullscreen mode

establish typescript And Is as "devDependencies" In package.json, it will also make a package-lock.json file, which stores specific package version information.

Run the following command:

npm i -D typescript jest ts-jest @types/jest
enter fullscreen mode

exit fullscreen mode

configure typescript

makes yours tsconfig.json File, which stores the TypeScript configuration.

Run the following command:

npx tsc --init
enter fullscreen mode

exit fullscreen mode

makes yours src/index.ts file.

Run the following command:

mkdir src
touch ./src/index.ts
enter fullscreen mode

exit fullscreen mode

In tsconfig.jsonupdate the following "compilerOptions", This configures TypeScript to use your source files, and generates all the necessary declaration and map files.

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

exit fullscreen mode

In package.json, create the following properties. This configures your package to use TypeScript generated files.

  "main": "dist/index.js",
  "types": "dist/index.d.ts",
enter fullscreen mode

exit fullscreen mode

configure script

In package.jsoncreate the following "scripts", These are general scripts for building and testing.

  "scripts": {
    "test": "jest",
    "start": "tsc --watch",
    "build": "tsc",
    "clean": "tsc --build --clean"
    "prepublishOnly": "tsc --build --clean && tsc",
  }
enter fullscreen mode

exit fullscreen mode

In package.json, add the following section. This tells Jest how to find and run your TypeScript tests.

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

exit fullscreen mode

git configure

Build your Git configuration. It’s important to check only in the source files.

Run the following command:

git init
touch .gitignore
enter fullscreen mode

exit fullscreen mode

add to the following .gitignore, This will prevent checking in TypeScript generated files.

node_modules/
dist/
enter fullscreen mode

exit fullscreen mode

configure npm publish

Create your npm publish configuration. It is important to publish both the source files and the TypeScript generated files.

Run the following command:

touch .npmignore
enter fullscreen mode

exit fullscreen mode

add to the following .npmignore, This will prevent checking in unnecessary files.

Comment: do not include dist/ either src/ in your .npmignore file.

tsconfig.json
enter fullscreen mode

exit fullscreen mode

Leave a Comment