Dart for JS/TS Developers

Dart is a strongly typed, sound null-safe language that compiles to native ARM and JavaScript. If you know TypeScript you already understand most of it — the type syntax is different but the concepts are the same. This lesson maps the key Dart features onto their TypeScript equivalents so you can start reading Flutter code immediately.

Types and sound null safety

TypeScript’s string | null union becomes Dart’s String?. The ? suffix on any type means “this value may be null.” Without ?, the type is guaranteed non-null and the compiler enforces it at every assignment.

React

// TypeScript
let name: string = 'Ava';
let maybeAge: number | null = null;
let definiteAge: number = 30;

function greet(n: string): string {
  return `Hello, ${n}!`;
}

Flutter

// Dart
String name = 'Ava';
int? maybeAge = null;
int definiteAge = 30;

String greet(String n) {
  return 'Hello, $n!';
}

🔀 TypeScript types → Dart types

• string → String, number → int / double, boolean → bool. Dart primitive type names are capitalised (except int, double, bool).
• T | null → T?. Dart’s null safety is sound — the compiler proves at compile time that a non-nullable variable can never hold null. No runtime TypeError: Cannot read properties of null.
• Template literals (`Hello ${name}`) → string interpolation ('Hello $name') — use '$name' for a simple variable and '${expr}' for an expression.
• Return types are written before the function name, not after a :.

var, final, and const

React

// TypeScript
let counter = 0;          // mutable
const MAX = 100;          // runtime constant
const PI = 3.14159;       // runtime constant

// 'as const' for compile-time literal
const COLORS = ['red', 'green'] as const;

Flutter

// Dart
var counter = 0;          // mutable, type inferred
final max = 100;          // runtime constant (set once)
const pi = 3.14159;       // compile-time constant

// const list = compile-time literal
const colors = ['red', 'green'];

🔀 let/const → var/final/const

• var infers the type and allows reassignment — same as let in JS/TS.
• final = assigned once, value determined at runtime. Use it for most “I won’t reassign this” variables — equivalent to TypeScript const for objects.
• const = compile-time constant. The value must be computable at compile time. In Flutter, const widgets are cached and never rebuilt unnecessarily.

Classes and constructors

React

// TypeScript
class User {
  readonly id: string;
  name: string;

  constructor(id: string, name: string) {
    this.id = id;
    this.name = name;
  }

  greet(): string {
    return `Hi, I'm ${this.name}`;
  }
}

const u = new User('1', 'Ava');
console.log(u.greet());

Flutter

// Dart
class User {
  final String id;
  String name;

  User(this.id, this.name); // shorthand constructor

  String greet() => 'Hi, I\'m $name';
}

final u = User('1', 'Ava');
print(u.greet());

🔀 TypeScript class → Dart class

• this.id = id becomes User(this.id, this.name) — Dart’s initialising formal shorthand. No constructor body needed for simple field assignments.
• Named parameters (Flutter convention): User({required this.id, required this.name}). Call site: User(id: '1', name: 'Ava'). Named parameters in Flutter widgets are the equivalent of React props.
• Arrow functions => exist in Dart for single-expression functions, just like in JS/TS.
• new keyword is optional in Dart 2+ — User('1', 'Ava') and new User('1', 'Ava') are identical. Flutter code omits new.

async / await and Future

React

// TypeScript
async function fetchUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  return res.json() as Promise<User>;
}

// Usage
const user = await fetchUser('42');

Flutter

// Dart
Future<User> fetchUser(String id) async {
  final res = await http.get(Uri.parse('/api/users/$id'));
  return User.fromJson(jsonDecode(res.body));
}

// Usage
final user = await fetchUser('42');

Future<T> is Dart’s Promise<T>. The async/await syntax is identical. Dart also has Stream<T> for sequences of async values — the equivalent of an async generator / RxJS Observable.

Collections, spreads, and collection-if

React

// TypeScript
const nums: number[] = [1, 2, 3];
const map: Record<string, number> = { a: 1, b: 2 };
const set: Set<string> = new Set(['x', 'y']);

// spread
const more = [...nums, 4, 5];

// conditional item
const isAdmin = true;
const items = ['home', ...(isAdmin ? ['admin'] : [])];

Flutter

// Dart
List<int> nums = [1, 2, 3];
Map<String, int> map = {'a': 1, 'b': 2};
Set<String> set = {'x', 'y'};

// spread
final more = [...nums, 4, 5];

// collection-if (Dart-native syntax)
final isAdmin = true;
final items = [
  'home',
  if (isAdmin) 'admin',
];

🔀 TS collections → Dart collections

• T[] → List<T> — Dart’s ordered list. Literals look identical: [1, 2, 3].
• Record<K,V> → Map<K,V> — key/value pairs with curly-brace literals.
• Set<T> exists in both — Dart uses curly braces without the new Set(...) wrapper.
• Collection-if (if (cond) expr) and collection-for (for (var x in list) expr) are Dart syntax built into list/map/set literals. No .filter().map() chaining needed inside widget trees — very common in Flutter children arrays.

Runnable Dart example

Flutter / DartOpen in DartPad ↗ (copies code)

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

// Pure Dart logic — same as you would write in Node/TS
List<String> buildGreetings(List<String> names, {bool formal = false}) {
  return [
    for (final name in names)
      formal ? 'Good day, $name.' : 'Hey, $name!',
  ];
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const names = ['Ava', 'Ben', 'Cleo'];
    final greetings = buildGreetings(names, formal: false);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Dart for JS Devs')),
        body: ListView(
          padding: const EdgeInsets.all(16),
          children: [
            for (final g in greetings)
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(12),
                  child: Text(g, style: const TextStyle(fontSize: 16)),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

What is the Dart equivalent of TypeScript's `string | null`?

String | null String? nullable String Optional<String>

What is the difference between `final` and `const` in Dart?

There is no difference — they are synonyms `final` is for primitives, `const` is for objects `final` is a runtime constant (set once); `const` is a compile-time constant `const` allows reassignment; `final` does not

What is Dart's equivalent of a TypeScript `Promise<T>`?

Stream<T> Future<T> Observable<T> Async<T>

Which Dart feature lets you conditionally include an item in a list literal without `.filter()`?

Null-aware operator Spread operator Collection-if Pattern matching

Submit

Mark as complete