NUS Hackers Wiki
NUS Hackers Wiki
  • NUS Hackers Wiki
  • Hackerschool
    • Virtual Machines and Linux
    • Beginners' Guide to the Terminal
      • Introduction to the Terminal
      • Modern Shell Tools
      • Shell Scripting
      • Real World Scripting
      • Resources
    • Self-Hosting: Three Easy Pieces
      • 1. Setting up your server
      • 2. Running Services
      • 3. Monitoring your server
    • Vim
    • Introduction to Zig
      • Language Basics
      • Error Handling
      • Memory Management
      • Working with C
      • Exploring comptime
    • CI/CD with Github Actions
      • Background
      • Basics of Github Actions
        • Target workflow
        • Running unit tests
        • Linting code
        • Deploying to Github Pages
      • Advanced use cases
        • Pollers
        • Github script
        • Executing third-party scripts
        • Reusable workflows
      • Cookbook
    • Lightning Git
      • Git Concepts
      • Getting Started with Git
      • Making your first commit
      • Branching
      • Merge Conflicts
      • Integrating remote repositories
      • Collaborative Workflows
      • Commit Manipulation and Reflog
      • Interactive rebasing
      • filter-repo
  • Orbital
    • JavaScript
      • Browser Developer Tools
      • Getting Started
      • Datatypes
      • Operators and Operations
      • Loops and Conditions
      • Functions
      • Strings
      • Arrays
      • HTML
        • Getting Started
        • Tag Attributes
        • HTML Forms
        • Browser Inspector
      • CSS
        • Selectors
        • Colors in CSS
        • Measurements in CSS
        • The Box Model
        • Adding Styles - Part 1
        • Adding Styles - Part 2
      • Working with the DOM
        • Querying the DOM - Selectors
        • Querying the DOM - Element Attributes
        • Querying the DOM - Element Styles
        • Events with JS and HTML
        • Exercise: Click Counter
        • Editing the DOM
        • Fetch Requests
        • Exercise: The NUSMods API
    • React
      • Setup
      • State
    • React Native
      • Setup
      • Intro to JSX
      • Basic Syntax
      • Handling UI
      • Props
      • State Management
    • Git
      • Setup
      • Command Glossary
      • Fundamental Concepts
        • Getting Started
        • Integrating Remote Repositories
        • Branching
        • Merge Conflicts
      • Collaborative Workflows
        • Fork and PR Workflow
        • Branch and PR Workflow
      • Advanced Concepts
        • Ignoring Files
        • Commit Message Conventions
        • Github Collaborators
        • CI/CD with Github Actions
        • Advanced Git Commands
      • FAQ
    • Telegram Bot
      • Creating a TeleBot
      • API Calls
      • Telebot Basics
      • Integrating API's
    • Relational Database
      • Database Overview
      • Database Design
      • Entity Relationship Diagram
      • SQL Basics & PostgreSQL
    • TypeScript
      • Types and Interfaces
      • Utility Types
      • Typing Component Props, Events, and Hooks
      • Why You Should Avoid Using any (and What to Do Instead)
      • TypeScript Tricks You’ll Use All the Time in React
Powered by GitBook
On this page
  • Why Overusing any is a Problem
  • What to Use Instead
  • Use unknown over any
  • Use Partial, Pick, etc. for Flexibility
  • Ending notes
Edit on GitHub
Export as PDF
  1. Orbital
  2. TypeScript

Why You Should Avoid Using any (and What to Do Instead)

any is a special TypeScript type that tells the compiler:

"Trust me, I know what I'm doing."

When you use any, TypeScript turns off type checking for that variable — which defeats the purpose of using TypeScript in the first place.

let data: any = "hello";
data.toFixed(); // No error, but will crash at runtime

Why Overusing any is a Problem

The biggest benefit of TypeScript is catching bugs before they happen. any disables that:

function handleUser(user: any) {
  // You might assume this is safe, but it's not
  console.log(user.name.toUpperCase()); 
  // It will crash if `user.name` is undefined or not a string
}

Plus, you miss out on one of the best developer experience features of TypeScript:

Helpful autocompletion and suggestions from your IDE!

const user: any = getUser();
user. // <- No suggestions 😭. You're flying blind.

What to Use Instead

Use unknown over any

If you truly don’t know the type yet, use unknown. It forces you to do checks before using the value:

function handle(data: unknown) {
  if (typeof data === "string") {
    console.log(data.toUpperCase());
  }
}

Use Partial, Pick, etc. for Flexibility

TypeScript utility types let you write more flexible types without giving up safety:

type UserUpdate = Partial<User>;

Ending notes

Rule of Thumb:

If you’re using any, ask yourself: “What am I losing in type safety by doing this?”

PreviousTyping Component Props, Events, and HooksNextTypeScript Tricks You’ll Use All the Time in React

Last updated 12 days ago

More can be found in the .

Utility Types section