DANNY YANG

about me · blog · projects · hire me

ReScript Tutorial: Learn ReScript in Y Minutes

14 Sep 2022 - 4277 words - 21 minute read - RSS

ReScript is a robustly typed language that compiles to efficient and human-readable JavaScript. It brings features like type inference, pattern matching, and null-safety to the web ecosystem, along with beginner-friendly syntax and easy integration with JavaScript.

This tutorial is a brief introduction to the syntax and features of ReScript, based on the Learn Reason in Y Minutes tutorial. Credit for the original goes to Seth Corker.

Resources #


Tutorial #

/* Comments start with slash-star, and end with star-slash */
// Single line comments start with double slash

/*----------------------------------------------
 * Variable and function declaration
 *----------------------------------------------
 * Variables and functions use the let keyword and end with a semi-colon
 * `let` bindings are immutable
 */

let x = 5
/* - Notice we didn't add a type, ReScript will infer x is an int */

/* A function like this, take two arguments and add them together */
let add = (a, b) => a + b
/* - This doesn't need a type annotation either! */

/*----------------------------------------------
 * Type annotation
 *----------------------------------------------
 * Types don't need to be explicitly annotated in most cases but when you need
 * to, you can add the type after the name
 */

/* A type can be explicitly written like so */
let x: int = 5

/* The add function from before could be explicitly annotated too */
let add2 = (a: int, b: int): int => a + b

/* A type can be aliased using the type keyword */
type companyId = int
let myId: companyId = 101

/* Mutation is not encouraged in ReScript but it's there if you need it
   If you need to mutate a let binding, the value must be wrapped in a `ref()`*/
let myMutableNumber = ref(120)

/* To access the value (and not the ref container), use `.contents` */
let copyOfMyMutableNumber = myMutableNumber.contents

/* To assign a new value, use the `:=` operator */
myMutableNumber := 240

/*----------------------------------------------
 * Basic types and operators
 *----------------------------------------------
 */

/* > String */

/* Use double quotes for strings */
let greeting = "Hello world!"

/* A string can span multiple lines */
let aLongerGreeting = "Look at me,
I'm a multi-line string
"

/* Use ` for unicode */
let world = `🌍`

/* The ` annotation is also used for string interpolation */
let helloWorld = `hello, ${world}`
/* Bindings must be converted to strings */
let age = 10
let ageMsg = `I am ${Js.Int.toString(age)} years old`

/* Using `j` annotation in interpolation will implicitly convert bindings to strings */
let ageMsg = j`I am $age years old`


/* Concatenate strings with ++ */
let name = "John " ++ "Wayne"
let emailSubject = "Hi " ++ name ++ ", you're a valued customer"

/* > Char */

/* Use a single character for the char type */
let lastLetter = 'z'
/* - Char doesn't support Unicode or UTF-8 */

/* > Boolean */

/* A boolean can be either true or false */
let isLearning = true

true && false  /* - : bool = false  Logical and */
true || true   /* - : bool = true   Logical or  */
!true          /* - : bool = false  Logical not */

/* Greater than `>`, or greater than or equal to `>=` */
'a' > 'b' /* - bool : false */

/* Less than `<`, or less than or equal to `<=` */
1 < 5 /* - : bool = true */

/* Structural equal */
"hello" == "hello" /* - : bool = true */

/* Referential equal */
"hello" === "hello" /* - : bool = false */
/* - This is false because they are two different "hello" string literals */

/* Structural unequal */
lastLetter != 'a' /* -: bool = true */

/* Referential unequal */
lastLetter !== lastLetter /* - : bool = false */

/* > Integer */
/* Perform math operations on integers */

1 + 1          /* - : int = 2  */
25 - 11        /* - : int = 11 */
5 * 2 * 3      /* - : int = 30 */
8 / 2          /* - : int = 4  */

/* > Float */
/* Operators on floats have a dot after them */

1.1 +. 1.5     /* - : float = 2.6  */
18.0 -. 24.5   /* - : float = -6.5 */
2.5 *. 2.0     /* - : float = 5.   */
16.0 /. 4.0    /* - : float = 4.   */

/* > Tuple
 * Tuples have the following attributes
  - immutable
  - ordered
  - fix-sized at creation time
  - heterogeneous (can contain different types of values)
 A tuple is 2 or more values */

let teamMember = ("John", 25)

/* Type annotation matches the values */
let position2d: (float, float) = (9.0, 12.0)

/* Pattern matching is a great tool to retrieve just the values you care about
   If we only want the y value, let's use `_` to ignore the value */
let (_, y) = position2d
y +. 1.0 /* - : float = 13. */

/* > Record */

/* A record has to have an explicit type */
type trainJourney = {
  destination: string,
  capacity: int,
  averageSpeed: float,
}

/* Once the type is declared, ReScript can infer it whenever it comes up */
let firstTrip = {destination: "London", capacity: 45, averageSpeed: 120.0}

/* Access a property using dot notation */
let maxPassengers = firstTrip.capacity

/* If you define the record type in a different file, you have to reference the
   filename, if trainJourney was in a file called Trips.re */
let secondTrip: Trips.trainJourney = {
  destination: "Paris",
  capacity: 50,
  averageSpeed: 150.0,
}

/* Records are immutable by default */
/* But the contents of a record can be copied using the spread operator */
let newTrip = {...secondTrip, averageSpeed: 120.0}

/* A record property can be mutated explicitly with the `mutable` keyword */
type breakfastCereal = {
  name: string,
  mutable amount: int,
}

let tastyMuesli = {name: "Tasty Muesli TM", amount: 500}

tastyMuesli.amount = 200
/* - tastyMuesli now has an amount of 200 */

/* Punning is used to avoid redundant typing */
let name = "Just As Good Muesli"
let justAsGoodMuesli = {name, amount: 500}
/* - justAsGoodMuesli.name is now "Just As Good Muesli", it's equivalent
   to { name: name, amount: 500 } */

/* > Variant
   Mutually exclusive states can be expressed with variants */

type authType =
  | GitHub
  | Facebook
  | Google
  | Password
/* - The constructors must be capitalized like so */
/* - Like records, variants should be named if declared in a different file */

let userPreferredAuth = GitHub

/* Variants work great with a switch statement */
let loginMessage =
  switch (userPreferredAuth) {
  | GitHub => "Login with GitHub credentials."
  | Facebook => "Login with your Facebook account."
  | Google => "Login with your Google account"
  | Password => "Login with email and password."
  }

/* > Option
   An option can be None or Some('a) where 'a is the type */

let userId = Some(23)

/* A switch handles the two cases */
let alertMessage =
  switch (userId) {
  | Some(id) => "Welcome, your ID is" ++ string_of_int(id)
  | None => "You don't have an account!"
  }
/* - Missing a case, `None` or `Some`, would cause an error */

/* > List
  * Lists have the following attributes
   - immutable
   - ordered
   - fast at prepending items
   - fast at splitting

  * Lists in ReScript are linked lists
 */

/* A list is declared with the `list` keyword and initialized with values wrapped in curly braces */
let userIds = list{1, 4, 8}

/* The type can be explicitly set with list<'a> where 'a is the type */
type idList = list<int>
type attendanceList = list<string>

/* Lists are immutable */
/* But you can create a new list with additional prepended elements by using the spread operator on an existing list */
let newUserIds = list{101, 102, ...userIds}

/* > Array
 * Arrays have the following attributes
  - mutable
  - fast at random access & updates */

/* An array is declared with `[` and ends with `]` */
let languages = ["ReScript", "JavaScript", "OCaml"]

/*----------------------------------------------
 * Function
 *----------------------------------------------
 */

/* ReScript functions use the arrow syntax, the expression is returned */
let signUpToNewsletter = email => "Thanks for signing up " ++ email

/* Call a function like this */
signUpToNewsletter("hello@ReScript.org")

/* For longer functions, use a block */
let getEmailPrefs = email => {
  let message = "Update settings for " ++ email
  let prefs = ["Weekly News", "Daily Notifications"]

  (message, prefs)
}
/* - the final tuple is implicitly returned */

/* > Labeled Arguments */

/* Arguments can be labeled with the ~ symbol */
let moveTo = (~x, ~y) => {
  /* Move to x,y */
  ()
}

moveTo(~x=7.0, ~y=3.5)

/* Labeled arguments can also have a name used within the function */
let getMessage = (~message as msg) => "==" ++ msg ++ "=="

getMessage(~message="You have a message!")
/* - The caller specifies ~message but internally the function can make use */

/* The following function also has explicit types declared */
let showDialog = (~message: string): unit => {
  () /* Show the dialog */
}
/* - The return type is `unit`, this is a special type that is equivalent to
   specifying that this function doesn't return a value
   the `unit` type can also be represented as `()` */

/* > Currying
   Functions can be curried and are partially called, allowing for easy reuse */

let div = (denom, numr) => numr / denom
let divBySix = div(6)
let divByTwo = div(2)

div(3, 24)     /* - : int = 8  */
divBySix(128)  /* - : int = 21 */
divByTwo(10)   /* - : int = 5  */

/* > Optional Labeled Arguments */

/* Use `=?` syntax for optional labeled arguments */
let greetPerson = (~name, ~greeting=?, ()) => {
  switch (greeting) {
  | Some(greet) => greet ++ " " ++ name
  | None => "Hi " ++ name
  }
}
/* - The third argument, `unit` or `()` is required because if we omitted it,
   the function would be curried so greetPerson(~name="Kate") would create
   a partial function, to fix this we add `unit` when we declare and call it */

/* Call greetPerson without the optional labeled argument */
greetPerson(~name="Kate", ())

/* Call greetPerson with all arguments */
greetPerson(~name="Marco", ~greeting="How are you today,")

/* > Pipe */
/* Functions can be called with the pipeline operator */

/* Use `->` to pass in the first argument (pipe-first) */
3->div(24)     /* - : int = 8 */
/* - This is equivalent to div(3, 24) */

36->divBySix   /* - : int = 6 */
/* - This is equivalent to divBySix(36) */

/* Pipes make it easier to chain code together */
let addOne = a => a + 1
let divByTwo = a => a / 2
let multByThree = a => a * 3

let pipedValue = 3->addOne->divByTwo->multByThree /* - : int = 6 */

/*----------------------------------------------
 * Control Flow & Pattern Matching
 *----------------------------------------------
 */

/* > If-else */
/* In ReScript, `If` is an expression when evaluate will return the result */

/* greeting will be "Good morning!" */
let greeting = if (true) {"Good morning!"} else {"Hello!"}

/* Without an else branch the expression will return `unit` or `()` */
if (false) {
  showDialog(~message="Are you sure you want to leave?")
}
/* - Because the result will be of type `unit`, both return types should be of
   the same type if you want to assign the result. */

/* > Destructuring */
/* Extract properties from data structures easily */

let aTuple = ("Teacher", 101)

/* We can extract the values of a tuple */
let (name, classNum) = aTuple

/* The properties of a record can be extracted too */
type person = {
  firstName: string,
  age: int,
}
let bjorn = {firstName: "Bjorn", age: 28}

/* The variable names have to match with the record property names */
let {firstName, age} = bjorn

/* But we can rename them like so */
let {firstName: bName, age: bAge} = bjorn

let {firstName: cName, age: _} = bjorn

/* > Switch
   Pattern matching with switches is an important tool in ReScript
   It can be used in combination with destructuring for an expressive and
   concise tool */

/* Lets take a simple list */
let firstNames = ["James", "Jean", "Geoff"]

/* We can pattern match on the names for each case we want to handle */
switch (firstNames) {
| [] => "No names"
| [first] => "Only " ++ first
| [first, second] => "A couple of names " ++ first ++ "," ++ second
| [first, second, third] =>
  "Three names, " ++ first ++ ", " ++ second ++ ", " ++ third
| _ => "Lots of names"
}
/* - The `_` is a catch all at the end, it signifies that we don't care what
   the value is so it will match every other case */

/* > When clause */

let isJohn = a => a == "John"
let maybeName = Some("John")

/* When can add more complex logic to a simple switch */
let aGreeting =
  switch (maybeName) {
  | Some(name) when isJohn(name) => "Hi John! How's it going?"
  | Some(name) => "Hi " ++ name ++ ", welcome."
  | None => "No one to greet."
  }

/* > Exception */

/* Define a custom exception */
exception Under_Age

/* Raise an exception within a function */
let driveToTown = (driver: person) =>
  if (driver.age >= 15) {
    "We're in town"
  } else {
    raise(Under_Age)
  }

let evan = {firstName: "Evan", age: 14}

/* Pattern match on the exception Under_Age */
switch (driveToTown(evan)) {
| status => print_endline(status)
| exception Under_Age =>
  print_endline(evan.firstName ++ " is too young to drive!")
}

/* Alternatively, a try block can be used */
/* - With ReScript exceptions can be avoided with optionals and are seldom used */
let messageToEvan =
  try {
    driveToTown(evan)
  } catch {
  | Under_Age => evan.firstName ++ " is too young to drive!"
  }

/*----------------------------------------------
 * Object
 *----------------------------------------------
 * Objects are similar to Record types, but are less rigid
 */

/* An object may be typed like a record but the property names are quoted */
type surfaceComputer = {
  "color": string,
  "capacity": int,
}
let surfaceBook: surfaceComputer = { "color": "blue", "capacity": 512 }

/* Objects don't require types */
let hamster = { "color": "brown", "age": 2 }
  
/* Object typing is structural, so you can have functions that accept any object with the required fields */
let getAge = animal => animal["age"]
getAge(hamster)
getAge({ "name": "Fido", "color": "silver", "age": 3 })
getAge({ "age": 5 })
  
/*----------------------------------------------
 * Module
 *----------------------------------------------
 * Modules are used to organize your code and provide namespacing.
 * Each file is a module by default
 */

/* Create a module */
module Staff = {
  type role =
    | Delivery
    | Sales
    | Other
  type member = {
    name: string,
    role,
  }

  let getRoleDirectionMessage = staff =>
    switch (staff.role) {
    | Delivery => "Deliver it like you mean it!"
    | Sales => "Sell it like only you can!"
    | Other => "You're an important part of the team!"
    }
}

/* A module can be accessed with dot notation */
let newEmployee: Staff.member = {name: "Laura", role: Staff.Delivery}

/* Using the module name can be tiresome so the module's contents can be opened
   into the current scope with `open` */
open Staff

let otherNewEmployee: member = {name: "Fred", role: Other}

/* A module can be extended using the `include` keyword, include copies
   the contents of the module into the scope of the new module */
module SpecializedStaff = {
  include Staff

  /* `member` is included so there's no need to reference it explicitly */
  let ceo: member = {name: "Reggie", role: Other}

  let getMeetingTime = staff =>
    switch (staff) {
    | Other => 11_15 /* - : int = 1115 Underscores are for formatting only  */
    | _ => 9_30
    }
}

If you’re a JavaScript developer interested in learning the basics of functional programming through ReScript, check out my book Introducing ReScript: Functional Programming for the Web.



github · linkedin · email · rss