Convert Figma logo to code with AI

stemmlerjs logosimple-typescript-starter

The most basic TypeScript starter I could think of

1,010
381
1,010
8

Top Related Projects

A reference example for TypeScript and Node with a detailed README describing how to use the two together.

Minimalistic project template to jump start a Node.js back-end application in TypeScript. ESLint, Jest and type definitions included.

Starter kit with zero-config for building a library in TypeScript, featuring RollupJS, Jest, Prettier, TSLint, Semantic Release, and more!

12,836

TypeScript execution and REPL for node.js

:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 🌹

DEPRECATED: Create React apps using typescript with no build configuration.

Quick Overview

The simple-typescript-starter is a minimalist boilerplate project for TypeScript development. It provides a basic setup for creating TypeScript applications with essential tools and configurations, allowing developers to quickly start new projects without the hassle of initial setup.

Pros

  • Quick and easy setup for TypeScript projects
  • Includes essential development tools like Jest for testing and ESLint for linting
  • Provides a clean, minimal structure that can be easily extended
  • Includes scripts for building, testing, and linting out of the box

Cons

  • Limited features compared to more comprehensive boilerplates
  • May require additional setup for more complex projects
  • Lacks advanced configurations for production environments
  • Not actively maintained (last commit was over 2 years ago at the time of writing)

Code Examples

  1. Basic TypeScript class:
class Greeter {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  greet(): string {
    return `Hello, ${this.name}!`;
  }
}

const greeter = new Greeter('World');
console.log(greeter.greet()); // Output: Hello, World!
  1. Async function with error handling:
async function fetchData(url: string): Promise<any> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
}
  1. Using interfaces for type checking:
interface User {
  id: number;
  name: string;
  email: string;
}

function printUserInfo(user: User): void {
  console.log(`User ${user.name} (ID: ${user.id}) - Email: ${user.email}`);
}

const user: User = { id: 1, name: 'John Doe', email: 'john@example.com' };
printUserInfo(user);

Getting Started

  1. Clone the repository:

    git clone https://github.com/stemmlerjs/simple-typescript-starter.git
    cd simple-typescript-starter
    
  2. Install dependencies:

    npm install
    
  3. Start development:

    npm run start:dev
    
  4. Build the project:

    npm run build
    
  5. Run tests:

    npm test
    

Competitor Comparisons

A reference example for TypeScript and Node with a detailed README describing how to use the two together.

Pros of TypeScript-Node-Starter

  • More comprehensive setup with Express.js, MongoDB, and authentication
  • Includes testing setup with Jest and supertest
  • Provides a full-fledged application structure with views and controllers

Cons of TypeScript-Node-Starter

  • More complex and potentially overwhelming for beginners
  • Heavier initial setup and larger project size
  • Opinionated structure may not suit all project needs

Code Comparison

TypeScript-Node-Starter:

import express from "express";
import compression from "compression";
import session from "express-session";
import bodyParser from "body-parser";
import lusca from "lusca";

simple-typescript-starter:

import { add } from "./math";

console.log(add(2, 3));

The TypeScript-Node-Starter code snippet shows a more complex setup with multiple imports for a full-featured web application, while the simple-typescript-starter demonstrates a basic TypeScript usage with a simple math function import.

TypeScript-Node-Starter is better suited for larger, production-ready applications with its comprehensive setup and features. simple-typescript-starter, on the other hand, is ideal for quick prototypes or learning TypeScript basics due to its minimalistic approach.

Choose TypeScript-Node-Starter for robust, feature-rich projects, and simple-typescript-starter for learning or small-scale TypeScript experimentation.

Minimalistic project template to jump start a Node.js back-end application in TypeScript. ESLint, Jest and type definitions included.

Pros of node-typescript-boilerplate

  • More comprehensive setup with additional tools like Jest, ESLint, and Prettier
  • Includes CI/CD configuration with GitHub Actions
  • Provides a more production-ready environment with build optimization

Cons of node-typescript-boilerplate

  • More complex setup may be overwhelming for beginners
  • Heavier initial project structure with more dependencies
  • Potentially slower startup time due to additional tooling

Code Comparison

simple-typescript-starter:

{
  "scripts": {
    "start": "ts-node src/index.ts",
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

node-typescript-boilerplate:

{
  "scripts": {
    "start": "node build/src/main.js",
    "clean": "rimraf coverage build tmp",
    "build": "tsc -p tsconfig.json",
    "build:watch": "tsc -w -p tsconfig.json",
    "lint": "eslint . --ext .ts,.tsx",
    "test": "jest --coverage",
    "test:watch": "jest --watch"
  }
}

The node-typescript-boilerplate provides a more extensive set of scripts, including linting, testing, and watch modes, while simple-typescript-starter offers a minimal setup focused on basic TypeScript compilation and execution.

Starter kit with zero-config for building a library in TypeScript, featuring RollupJS, Jest, Prettier, TSLint, Semantic Release, and more!

Pros of typescript-library-starter

  • More comprehensive setup with additional tools like Prettier, Semantic Release, and Travis CI
  • Includes documentation generation with TypeDoc
  • Provides a more robust testing environment with Jest and coverage reporting

Cons of typescript-library-starter

  • More complex setup may be overwhelming for beginners
  • Includes many dependencies that might not be necessary for smaller projects
  • Potentially steeper learning curve due to the inclusion of advanced tools

Code Comparison

simple-typescript-starter (tsconfig.json):

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es6"],
    "outDir": "build",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}

typescript-library-starter (tsconfig.json):

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "module": "es2015",
    "lib": ["es2015", "es2016", "es2017", "dom"],
    "strict": true,
    "sourceMap": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declarationDir": "dist/types",
    "outDir": "dist/lib",
    "typeRoots": ["node_modules/@types"]
  }
}

The typescript-library-starter configuration is more detailed and includes additional options for advanced TypeScript features and module handling.

12,836

TypeScript execution and REPL for node.js

Pros of ts-node

  • Executes TypeScript directly without separate compilation step
  • Supports REPL for interactive TypeScript execution
  • Integrates seamlessly with Node.js ecosystem and tools

Cons of ts-node

  • May have slower startup time for large projects
  • Not designed for production use, primarily a development tool
  • Requires additional configuration for advanced TypeScript features

Code Comparison

ts-node:

// Execute TypeScript directly
ts-node src/index.ts

// Use in Node.js scripts
#!/usr/bin/env ts-node
console.log("Hello, TypeScript!");

simple-typescript-starter:

// Compile TypeScript
npm run build

// Run compiled JavaScript
node dist/index.js

Summary

ts-node offers direct TypeScript execution and REPL support, making it ideal for development and quick prototyping. simple-typescript-starter provides a more traditional setup with separate compilation, suitable for production environments. ts-node integrates better with Node.js tools but may have slower startup times for large projects. simple-typescript-starter offers a cleaner separation between source and compiled code, potentially easier to optimize for production use.

:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 🌹

Pros of typescript-book

  • Comprehensive learning resource with in-depth explanations of TypeScript concepts
  • Regularly updated with new TypeScript features and best practices
  • Includes practical examples and code snippets for better understanding

Cons of typescript-book

  • Not a ready-to-use project template like simple-typescript-starter
  • Requires more time investment to extract and apply knowledge to your own projects
  • May contain more information than needed for beginners or quick setup

Code Comparison

simple-typescript-starter:

// src/index.ts
console.log('Hello, TypeScript!');

typescript-book:

// From the "Why TypeScript" section
let foo = 123;
foo = '456'; // Error: Type 'string' is not assignable to type 'number'

The simple-typescript-starter provides a minimal entry point, while typescript-book offers code examples throughout the book to illustrate TypeScript concepts and features.

Summary

simple-typescript-starter is ideal for quickly setting up a TypeScript project with minimal configuration. typescript-book, on the other hand, is a comprehensive resource for learning TypeScript in-depth. Choose simple-typescript-starter for rapid project initialization, or typescript-book for a thorough understanding of TypeScript concepts and best practices.

DEPRECATED: Create React apps using typescript with no build configuration.

Pros of create-react-app-typescript

  • Provides a complete React development environment with TypeScript support out of the box
  • Includes hot reloading, testing setup, and production build optimization
  • Offers a well-maintained and widely-used solution backed by the React community

Cons of create-react-app-typescript

  • More opinionated and less flexible than simple-typescript-starter
  • Larger initial project size due to included dependencies
  • May include unnecessary features for smaller projects or those not focused on React

Code Comparison

simple-typescript-starter:

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

create-react-app-typescript:

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  }
}

The create-react-app-typescript configuration is more extensive, tailored specifically for React development with TypeScript.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

🧰 Simple TypeScript Starter | 2024

We talk about a lot of advanced Node.js and TypeScript concepts on the blog, particularly focused around Domain-Driven Design and large-scale enterprise application patterns. However, I received a few emails from readers that were interested in seeing what a basic TypeScript starter project looks like. So I've put together just that.

Features

  • Minimal
  • TypeScript v4
  • Testing with Jest
  • Linting with Eslint and Prettier
  • Pre-commit hooks with Husky
  • VS Code debugger scripts
  • Local development with Nodemon

Scripts

npm run start:dev

Starts the application in development using nodemon and ts-node to do hot reloading.

npm run start

Starts the app in production by first building the project with npm run build, and then executing the compiled JavaScript at build/index.js.

npm run build

Builds the app at build, cleaning the folder first.

npm run test

Runs the jest tests once.

npm run test:dev

Run the jest tests in watch mode, waiting for file changes.

npm run prettier-format

Format your code.

npm run prettier-watch

Format your code in watch mode, waiting for file changes.