FastComments TypeScript Types

Common errors

• TS2307: Cannot find module 'fastcomments-typescript' or its corresponding type declarations.

  cause The package is either not installed, not correctly listed in `node_modules`, or TypeScript's `moduleResolution` settings prevent it from being found.
  fix Run `npm install fastcomments-typescript` or `yarn add fastcomments-typescript`. Check your `tsconfig.json` for appropriate `moduleResolution` and `baseUrl` settings.

• TS2345: Argument of type '{ /* ... */ }' is not assignable to parameter of type 'Comment'. Property 'id' is missing in type '{ /* ... */ }' but required in type 'Comment'.

  cause An object literal or variable is missing required properties, or has properties with incorrect types, according to the `Comment` (or any other imported) interface/type.
  fix Consult the `fastcomments-typescript` type definitions to ensure all required properties are present and their types match the expected structure. The error message usually points to the specific missing or mismatched property.

Warnings

• breaking Major version updates (e.g., v2 to v3) often introduce breaking changes to type definitions, reflecting changes in the FastComments API or underlying data structures. This may require updates to your code to match new property names, types, or required fields.
  Fix: Review the FastComments changelog and update your code to align with the new type definitions. Re-running `npm install` or `yarn` may be necessary to ensure you have the latest types.
• gotcha This package provides only TypeScript type definitions; it contains no runtime JavaScript code or functionality. It is solely used for compile-time type checking and will be entirely removed during compilation to plain JavaScript.
  Fix: Do not attempt to import or use anything from this package at runtime. Its purpose is purely for development-time type safety. If you need runtime functionality, use the FastComments JavaScript SDK.
• gotcha Ensure your TypeScript project is configured to correctly resolve modules and type declarations. Incorrect `moduleResolution` settings in `tsconfig.json` can lead to 'Cannot find module' errors even if the package is installed.
  Fix: Verify `compilerOptions.moduleResolution` is set to 'Node' or 'Bundler' and `compilerOptions.target` is appropriate for your environment in `tsconfig.json`. Ensure `skipLibCheck` is not hiding critical errors.

Install

• npm install fastcomments-typescript npm
• yarn add fastcomments-typescript yarn
• pnpm add fastcomments-typescript pnpm

Imports

• Comment
  wrong:

  import { Comment } from 'fastcomments-typescript';

  correct:

  import type { Comment } from 'fastcomments-typescript';

  Use 'import type' for type-only imports to ensure they are erased at compile-time and prevent accidental runtime dependency.
• CreateCommentRequest
  wrong:

  import CreateCommentRequest from 'fastcomments-typescript';

  correct:

  import type { CreateCommentRequest } from 'fastcomments-typescript';

  Most API model types are named exports. The package ships ESM-only type definitions.
• WidgetConfig
  wrong:

  const WidgetConfig = require('fastcomments-typescript');

  correct:

  import type { WidgetConfig } from 'fastcomments-typescript';

  This package is designed for TypeScript environments and ESM consumption. CommonJS 'require' will not correctly resolve type definitions.

Quickstart

This quickstart demonstrates how to import and use core FastComments types (Comment, CreateCommentRequest, WidgetConfig) to define data structures, enhancing type safety in your application.

import type { Comment, CreateCommentRequest, WidgetConfig } from 'fastcomments-typescript';

// Example: Defining a comment object received from the API
const myComment: Comment = {
  id: 'some-comment-id-123',
  userId: 'user-456',
  text: 'This is an example comment.',
  createdAt: new Date().toISOString(),
  author: {
    id: 'user-456',
    displayName: 'Example User',
    profileUrl: 'https://example.com/users/456',
    avatarURL: 'https://example.com/avatars/456.png'
  },
  status: 'APPROVED',
  threadId: 'blog-post-abc'
};

// Example: Defining a request payload for creating a new comment
const newCommentPayload: CreateCommentRequest = {
  text: 'A new comment to be posted on the thread.',
  threadId: 'blog-post-xyz',
  url: 'https://example.com/blog/post-xyz',
  // Additional optional fields like parentId, anonymousUser, etc., can be added here
};

// Example: Defining widget configuration for embedding FastComments
const myWidgetConfig: WidgetConfig = {
  tenantId: 'your-tenant-id-here',
  url: 'https://example.com/current-page-url',
  // Many more configuration options are available
  theme: 'dark',
  replyingPlaceholderText: 'Write your reply...', 
  maxCommentLength: 1000,
  disableVoting: false
};

console.log('Defined Comment:', myComment);
console.log('Defined New Comment Payload:', newCommentPayload);
console.log('Defined Widget Configuration:', myWidgetConfig);

// These types provide compile-time safety when interacting with FastComments data and APIs.
function handleIncomingComment(commentData: Comment) {
  console.log(`Received comment from ${commentData.author.displayName}: ${commentData.text.substring(0, 50)}...`);
}

handleIncomingComment(myComment);