TypeScript Project Template Readme

Overview

This TypeScript project template is designed to kickstart your TypeScript development with proper configuration for the TypeScript Compiler (tsc) and Prettier. Below, you'll find a brief explanation of the key configuration files and their purpose.

Files

tsconfig.json

The tsconfig.json file contains the configuration settings for the TypeScript Compiler (tsc). Here's a breakdown of the key options:

  • target: Specifies the ECMAScript target version (ESNext in this case).
  • lib: Defines the libraries to include during compilation (ESNext and DOM).
  • outDir: Specifies the output directory for compiled files.
  • rootDir: Indicates the root directory of TypeScript source files.
  • strict: Enables strict type-checking options.
  • esModuleInterop: Allows default imports from CommonJS modules.
  • module: Specifies the module system (ESNext in this case).
  • removeComments: Removes comments from the generated output.
  • sourceMap: Generates source map files for better debugging.

.prettierrc

The .prettierrc file configures Prettier, a code formatter for maintaining consistent code style. Here's an overview of the configuration options:

  • arrowParens: Enforces parentheses around a sole arrow function parameter.
  • bracketSameLine: Ensures multiline object literals have the opening bracket on the same line.
  • bracketSpacing: Adds spaces between brackets in object literals.
  • endOfLine: Defines the line ending style (LF).
  • jsxSingleQuote: Uses single quotes for JSX attributes.
  • printWidth: Specifies the maximum line length before wrapping.
  • semi: Omits semicolons at the end of statements.
  • useTabs: Indents with tabs instead of spaces.
  • trailingComma: Controls trailing commas in object literals and arrays.
  • tabWidth: Sets the number of spaces per tab.
  • singleQuote: Uses single quotes instead of double quotes for strings.
  • htmlWhitespaceSensitivity: Defines sensitivity to HTML whitespace (strict).

Installation

  1. Clone the Repository:

    git clone https://github.com/your-username/your-project.git
  2. Navigate to Project Directory:

    cd your-project
  3. Install Dependencies:

    npm install
  4. Install Prettier:

    npm install --save-dev prettier

Usage

  1. Run TypeScript Compiler (tsc):

    • To compile TypeScript files, run:
      npx tsc
  2. Watch Mode:

    • To run TypeScript Compiler in watch mode, use:
      npx tsc --watch
  3. Format Code with Prettier:

    • To format your code using Prettier, run:
      npm run format

Additional Notes

Now your TypeScript project is ready for development with proper TypeScript and Prettier configurations. Happy coding!