This is the latest docs version
Quick Links
  • -Overview
  • -Language Features
  • -JS Interop
  • -Build System
Documentation
Language Manual
Reference for all language features
ReScript & React
First class bindings for ReactJS
GenType
Seamless TypeScript integration
Reanalyze
Dead Code & Termination analysis
Exploration
Packages
Explore third party libraries and bindings
Syntax Lookup
Discover all syntax constructs
APIPlaygroundBlogCommunity
  • Playground
  • Blog
  • Twitter
  • GitHub
  • Forum
Language Manual
Overview
  • Introduction
  • Installation
  • Migrate to v11
  • Editor Plugins
  • Try
Language Features
  • Overview
  • Let Binding
  • Type
  • Primitive Types
  • Tuple
  • Record
  • Object
  • Variant
  • Polymorphic Variant
  • Null, Undefined and Option
  • Array & List
  • Function
  • If-Else & Loops
  • Pipe
  • Pattern Matching / Destructuring
  • Mutation
  • JSX
  • Exception
  • Lazy Value
  • Promises
  • Async / Await
  • Tagged templates
  • Module
  • Import & Export
  • Attribute (Decorator)
    • Usage
    • Extension Point
  • Reserved Keywords
  • Equality and Comparison
Advanced Features
  • Extensible Variant
  • Scoped Polymorphic Types
JavaScript Interop
  • Interop Cheatsheet
  • Embed Raw JavaScript
  • Shared Data Types
  • External (Bind to Any JS Library)
  • Bind to JS Object
  • Bind to JS Function
  • Import from / Export to JS
  • Bind to Global JS Values
  • JSON
  • Inlining Constants
  • Use Illegal Identifier Names
  • Generate Converters & Helpers
  • Browser Support & Polyfills
  • Libraries & Publishing
  • TypeScript
Build System
  • Overview
  • Configuration
  • Configuration Schema
  • External Stdlib
  • Pinned Dependencies
  • Interop with JS Build Systems
  • Performance
  • Warning Numbers
Guides
  • Converting from JS
Extra
  • Newcomer Examples
  • Project Structure
  • FAQ
Docs / Language Manual / Attribute (Decorator)
Edit

Attribute (Decorator)

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

ReScriptJS Output
@inline
let mode = "dev"

let mode2 = mode

The @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

Note: In previous versions (< 8.3) all our interop related attributes started with a bs. prefix (bs.module, bs.val). Our formatter will automatically drop them in newer ReScript versions.

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)

@val external message: string = "message"

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

@deprecated
let customDouble = foo => foo * 2

@deprecated("Use SomeOther.customTriple instead")
let customTriple = foo => foo * 3 
  1. @@warning("-27") is a standalone attribute that annotates the entire file. Those attributes start with @@. Here, it carries the data "-27". You can find a full list of all available warnings here.

  2. @unboxed annotates the type definition.

  3. @val annotates the external statement.

  4. @as("aria-label") annotates the ariaLabel record field.

  5. @deprecated annotates the customDouble expression. This shows a warning while compiling telling consumers to not rely on this method long-term.

  6. @deprecated("Use SomeOther.customTriple instead") annotates the customTriple expression with a string to describe the reason for deprecation.

For a list of all decorators and their usage, please refer to the Syntax Lookup page.

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 %%.

For a list of all extension points and their usage, please refer to the Syntax Lookup page.

Import & ExportReserved Keywords

© 2024 The ReScript Project

Software and assets distribution powered by KeyCDN.

About
  • Community
  • ReScript Association
Find us on