Camel case

Last updated Mar 7th, 2020

About this...

Camel case is a naming convention that says all words in an indentifier (except the first) must be capitalized.

Camel case (or should I say camelCase) is one of three primary capitalization conventions (underscore, Pascal, and camel) used in programming languages.

Camel case dictates that each word in an indentifier be capitalized (except the first) and contain no separators (like underscores) in between them.

Not camel case

type User = {   id: string; 
  name: string

interface Serializable {  ToJSON (): string;}

class UserModel implements Serializable {  ...
// likesWeirdmusic is _almost_ camel case
const ShouldListentoJohnMaus = likesWeirdmusic() && isgenerallyahappyperson();

Camel case

type user = {   id: string; 
  name: string

interface serializable {  toJSON (): string;}

class userModel implements serializable {  ...

const shouldListenToJohnMaus = likesWeirdMusic() && isGenerallyAHappyPerson();

The role of Camel case in TypeScript & JavaScript

In TypeScript & JavaScript, the camel case convention is usually used to signify that an indentifier is a variable, function, method, or attribute.

Here's an example of common camel case usage.

// It is conventional to use camel case for variables and functions
const shouldListenToJohnMaus = likesWeirdMusic() && isGenerallyAHappyPerson();
type CanPlaySynth = {
  // Attributes of classes, types, or interfaces are camel cased.
  favouriteSynth: Synth;}

class JohnMaus implements CanPlaySynth {
  // Accessors (getters), in addition to setters or any other
  // types of methods are also camel-cased
  get favouriteSynth () : Synth {    ...

React HOCs

In React, it's conventional to use Camel case for HOCs like so:

import React from 'react';
import { UsersState } from '../redux/states';
import { IUserOperators } from '../redux/operators';

interface withLoginHandlingProps extends IUserOperators {  users: UsersState
  history: any;

function withLoginHandling (WrappedComponent: any) {  class HOC extends React.Component<withLoginHandlingProps, any> {
    constructor (props: withLoginHandlingProps) {


    render () {
      return (
          login={(user: string, props: string) => this.handleLogin(user, props)}
  return HOC;

export default withLoginHandling;

See also


Be the first to leave a comment