Docs / Language Manual / Attribute

Attribute (Decorator)

Like many other languages, ReScript allows annotating a piece of code to express extra functionality. Here's an example:

ReScriptJS Output

@bs.inline
let mode = "dev"

let mode2 = mode

The @bs.inline annotation tells mode's value to be inlined into its usage sites (see output). We call such annotation "attribute" (or "decorator" in JavaScript).

An attribute starts with @ and goes before the item it annotates. In the above example, it's hooked onto the let binding.

Usage

You can put an attribute almost anywhere. You can even add extra data to them by using them visually like a function call. Here are a few famous attributes (explained in other sections):

ReScriptJS Output

@@warning("-27")


@unboxed
type a = Name(string)

@bs.val external message: string = "message"

type student = {
  age: int,
  @bs.as("aria-label") ariaLabel: string,
}

@@warning("-27") is a standalone attribute that annotates the entire file. Those attributes start with @@. Here, it carries the data "-27".
@unboxed annotates the type definition.
@bs.val annotates the external statement.
@bs.as("aria-label") annotates the ariaLabel record field.

Extension Point

There's a second category of attributes, called "extension points" (a remnant term of our early systems):

ReScriptJS Output

%raw("var a = 1")

Extension points are attributes that don't annotate an item; they are the item. Usually they serve as placeholders for the compiler to implicitly substitute them with another item.

Extension points start with %. A standalone extension point (akin to a standalone regular attribute) starts with %%.