开始我的 Dart 学习之旅

作为一名主要使用 JavaScript 的前端开发者，最近我对 Flutter 产生了浓厚的兴趣。Flutter 使用 Dart 作为开发语言，所以我决定先从学习 Dart 开始。这篇文章记录了我这个初学者在学习 Dart 过程中的笔记、困惑以及解决方案，希望能帮助其他和我一样的前端开发者。

初识 Dart：安装与环境配置

第一步：安装 Dart SDK

我首先需要安装 Dart SDK。作为 Windows 用户，我选择了使用 Chocolatey 包管理器：

choco install dart-sdk

Mac 用户可以使用 Homebrew：

brew tap dart-lang/dart
brew install dart

安装完成后，我在命令行中输入dart --version，确认安装成功。

配置编辑器

我选择了 VS Code 作为开发环境，安装了 Dart 插件。这个插件提供了代码高亮、自动完成、错误提示等功能，对初学者非常友好。

创建第一个 Dart 程序

创建了一个简单的 Hello World 程序，我将其保存为hello.dart：

void main() {
  print('Hello, Dart!');
}

然后在终端中运行：

dart hello.dart

看到输出"Hello, Dart!"时，我有种小小的成就感。这样，我的 Dart 学习之旅就正式开始了。

坑一：变量声明与类型系统的理解

问题描述：

作为 JavaScript 开发者，我习惯了使用var、let和const来声明变量，并且 JavaScript 是动态类型语言。当我开始编写 Dart 代码时，我按照 JavaScript 的习惯写了这样的代码：

// 我最初的尝试，受JavaScript影响
var name = "Alice";
name = 42; // 尝试将字符串变量赋值为数字

结果得到了错误：A value of type 'int' can't be assigned to a variable of type 'String'

解决方案：

通过学习，我了解到 Dart 虽然也使用var关键字，但它是一种"类型推断"的静态类型语言。一旦变量通过初始值被推断为某种类型，就不能再赋值为其他类型：

// 正确的Dart代码
var name = "Alice"; // 推断为String类型
// name = 42; // 错误

// 如果需要变量能够存储不同类型
dynamic name2 = "Alice";
name2 = 42; // OK，但失去了类型安全

// 或者明确声明类型
String name3 = "Alice";
int age = 30;

我还学到了 Dart 中其他的变量声明方式：

final：一旦赋值，不能更改（类似 JavaScript 的const）
const：编译时常量，比final更严格

final birthday = '1990-01-01'; // 不能重新赋值
const pi = 3.14159; // 编译时常量

教训：Dart 是静态类型语言，虽然使用var可以进行类型推断，但变量的类型一旦确定就不能更改。这与 JavaScript 的动态类型特性有很大不同，需要适应这种思维方式的转变。

坑二：函数参数与箭头函数的区别

问题描述：

在 JavaScript 中，我习惯使用箭头函数和可选参数。当我尝试在 Dart 中编写类似代码时，遇到了问题：

// 我最初的尝试
var add = (a, b) => a + b;
var greet = (name) => "Hello, ${name}";

// 调用
print(add(5)); // 尝试只传一个参数

这段代码在 Dart 中报错，提示我缺少必要的参数。

解决方案：

通过学习，我发现 Dart 的函数参数处理与 JavaScript 有很大不同：

Dart 的函数参数默认是必须的，可以通过位置参数或命名参数来实现可选功能
箭头函数语法相似但规则不同

// 位置可选参数
int add(int a, [int b = 0]) {
  return a + b;
}

// 命名可选参数
String greet(String name, {String title = 'Mr/Ms'}) {
  return "Hello, $title $name";
}

// 箭头函数
var multiply = (int a, int b) => a * b;

调用示例：

print(add(5)); // 输出 5
print(add(5, 3)); // 输出 8

print(greet('Alice')); // 输出 "Hello, Mr/Ms Alice"
print(greet('Bob', title: 'Dr')); // 输出 "Hello, Dr Bob"

教训：Dart 的函数参数系统比 JavaScript 更严格，但也更灵活。区分位置参数和命名参数很重要，它们有不同的语法和用途。箭头函数只适用于单表达式函数，而且参数类型也不能省略。

坑三：异步编程模型的差异

问题描述：

作为前端开发者，我在 JavaScript 中大量使用 Promise 和 async/await 处理异步操作。当我尝试在 Dart 中编写异步代码时，我用了类似的语法：

// 我的JavaScript思维方式
async function fetchData() {
  const result = await fetch('https://api.example.com/data');
  return result.json();
}

// 我在Dart中的尝试
async fetchData() {
  var result = await fetch('https://api.example.com/data');
  return result.json();
}

但这在 Dart 中并不工作。

解决方案：

学习后，我了解到 Dart 使用Future（类似 JavaScript 的 Promise）和async/await处理异步，但有一些语法差异：

// 正确的Dart异步函数
Future<String> fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to load data');
  }
}

// 调用异步函数
void main() async {
  try {
    String data = await fetchData();
    print(data);
  } catch (e) {
    print('Error: $e');
  }
}

关键区别：

需要使用Future<ReturnType>声明返回类型
异步函数标记为async
使用await等待Future完成
异常处理使用 try/catch，类似 JavaScript

教训：Dart 的异步模型概念上与 JavaScript 相似，但在语法和类型声明上有区别。特别是需要明确声明返回的Future类型，这反映了 Dart 强类型的特性。

坑四：类和对象的不同之处

问题描述：

在 JavaScript 中，我习惯使用类和构造函数的方式是：

// JavaScript类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

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

const john = new Person("John", 30);

当我尝试在 Dart 中使用相同的方式定义类时，发现有些地方不太一样。

解决方案：

学习 Dart 的类和对象后，我了解到以下关键区别：

// Dart类
class Person {
  // 属性声明
  String name;
  int age;

  // 构造函数
  Person(this.name, this.age);

  // 命名构造函数
  Person.guest() {
    name = 'Guest';
    age = 0;
  }

  // 方法
  String greet() {
    return 'Hello, I\'m $name';
  }
}

void main() {
  // 创建实例
  var john = Person('John', 30);
  var guest = Person.guest();

  print(john.greet()); // Hello, I'm John
  print(guest.greet()); // Hello, I'm Guest
}

主要区别：

Dart 类需要明确声明属性类型
构造函数可以使用简写语法Constructor(this.property)
Dart 支持命名构造函数，可以有多个不同名称的构造函数
不需要new关键字来创建实例(Dart 2 开始)

教训：Dart 的类系统更加严格和明确，提供了比 JavaScript 更多的功能，如命名构造函数、工厂构造函数等。虽然语法上有相似之处，但概念和用法有明显区别。

坑五：集合类型和操作的差异

问题描述：

在 JavaScript 中，我经常使用数组和对象来存储集合数据，并使用各种方法操作它们：

// JavaScript的数组和对象
const fruits = ["apple", "banana", "orange"];
fruits.push("grape");
fruits.map((fruit) => fruit.toUpperCase());

const person = {
  name: "Alice",
  age: 30,
};
person.job = "Developer";

当我开始使用 Dart 时，发现集合类型和操作方法有很大不同。

解决方案：

学习过程中，我了解到 Dart 有更丰富的集合类型：

// List (类似JavaScript数组)
var fruits = ['apple', 'banana', 'orange'];
fruits.add('grape');
var upperFruits = fruits.map((fruit) => fruit.toUpperCase()).toList();

// Map (类似JavaScript对象)
var person = {
  'name': 'Alice',
  'age': 30
};
person['job'] = 'Developer';

// Set (无序不重复集合)
var uniqueNumbers = {1, 2, 3, 4};
uniqueNumbers.add(5);
uniqueNumbers.add(2); // 不会添加重复元素

还可以使用泛型确保类型安全：

// 使用泛型的集合
List<String> typedFruits = ['apple', 'banana'];
Map<String, dynamic> typedPerson = {'name': 'Alice', 'age': 30};
Set<int> typedNumbers = {1, 2, 3};

// 不能添加错误类型
// typedFruits.add(42); // 错误：int不能赋值给String

教训：Dart 的集合类型比 JavaScript 更丰富和严格。需要注意的是，虽然语法看起来相似，但方法名称和行为可能不同。使用泛型可以增加类型安全，这是 JavaScript 中没有的概念。

坑六：空安全特性的理解

问题描述：

学习 Dart 2.12 之后的版本时，我遇到了许多关于"空安全"(null safety)的错误，这在 JavaScript 中是没有的概念：

// 我的初次尝试
String name;
print(name.length); // 错误

这导致了编译错误，因为name可能是null。

解决方案：

了解 Dart 的空安全特性后，我学会了以下处理方式：

// 声明可空类型
String? name; // 可以为null

// 空安全检查
if (name != null) {
  print(name.length); // 安全，因为已检查
}

// 使用空判断操作符
print(name?.length); // 如果name为null，返回null而不是错误

// 使用空断言操作符（确定非空时使用）
String definitelyNotNull = 'Hello';
print(definitelyNotNull!.length); // 告诉编译器这绝对不是null

// 声明非空变量并初始化
String nonNullableName = 'Alice'; // 必须初始化

我还学到了"延迟初始化"的概念：

// 使用late关键字
late String willInitLater;
// ... 其他代码
willInitLater = 'Now initialized'; // 首次使用前必须赋值
print(willInitLater.length); // 现在安全了

教训：Dart 的空安全是一个强大的特性，可以在编译时捕获可能的空引用错误。虽然刚开始有些不习惯，但这确实帮助我写出更健壮的代码。需要学会使用?、!、??等操作符和late关键字来适应空安全的编程模式。

坑七：包管理和导入系统

问题描述：

在 JavaScript 生态中，我习惯使用 npm 和 ES6 模块系统：

// JavaScript中导入包
import axios from "axios";
import { useState } from "react";

当我尝试在 Dart 中使用类似语法时，发现它的包管理和导入系统完全不同。

解决方案：

学习后，我了解到 Dart 使用 pub 作为包管理器，使用 pubspec.yaml 文件管理依赖：

# pubspec.yaml
name: my_app
dependencies:
  http: ^0.13.4
  path: ^1.8.0

然后使用dart pub get命令安装依赖。

导入包的语法也与 JavaScript 不同：

// 导入核心库
import 'dart:io';
import 'dart:math';

// 导入第三方包
import 'package:http/http.dart' as http;

// 导入本地文件
import 'path/to/my_file.dart';

// 部分导入
import 'package:my_package/utils.dart' show Utility;
import 'package:my_package/models.dart' hide DeprecatedModel;

教训：Dart 的包管理系统与 npm 有很大不同，需要学习新的工具和命令。导入语法也有不同，特别是区分 core 库(dart:)和外部包(package:)的方式，以及使用as、show和hide关键字的方式。这需要时间适应，但一旦熟悉后会发现它的组织性很强。

坑八：理解 Dart 中的级联操作符

问题描述：

当我需要对同一个对象连续进行多次操作时，JavaScript 中我通常会这样写：

// JavaScript中的链式操作
const element = document.createElement("div");
element.className = "container";
element.textContent = "Hello";
element.addEventListener("click", () => console.log("Clicked"));

在 Dart 中，我发现有一种更简洁的方式，但我一开始不理解它的语法。

解决方案：

学习后，我了解到 Dart 有一个称为"级联操作符"(..)的特殊语法，它允许在同一个对象上执行多个操作：

// 使用级联操作符
var button = querySelector('#confirm')
  ..text = 'Confirm'
  ..classes.add('important')
  ..onClick.listen((e) => window.alert('Confirmed!'));

// 等价于
var button = querySelector('#confirm');
button.text = 'Confirm';
button.classes.add('important');
button.onClick.listen((e) => window.alert('Confirmed!'));

级联操作符不仅可以用于设置属性，还可以用于方法调用，并且可以嵌套使用：

// 嵌套级联
final addressBook = (AddressBookBuilder()
  ..name = 'Contacts'
  ..users.add(User()
    ..name = 'Alice'
    ..email = 'alice@example.com')
  ..users.add(User()
    ..name = 'Bob'
    ..email = 'bob@example.com'))
  .build();

教训：Dart 的级联操作符(..)是一个强大的语法特性，可以使代码更简洁易读。它与 JavaScript 的链式调用不同，因为每个操作都作用于原始对象，而不是返回的新对象。这个特性需要一些时间来适应，但掌握后可以写出更优雅的代码。

总结与反思

作为一名从 JavaScript 背景进入 Dart 的初学者，这段学习之旅既有挑战也很有收获。Dart 的静态类型系统、空安全特性和类似但又不同的语法概念，最初确实让我感到困惑。

最大的挑战是转变思维模式，从 JavaScript 的动态类型、松散语法转向 Dart 的静态类型和更严格的规则。但这种严格性实际上是 Dart 的优势之一，它帮助我在编译时就能捕获许多潜在错误。

我发现 Dart 有许多令人愉快的特性，包括：

强大而直观的类型系统
出色的工具和 IDE 支持
既支持 AOT(提前编译)又支持 JIT(即时编译)
专为 UI 构建优化的语言特性

如果你也是一名从 JavaScript/TypeScript 背景转向 Dart 的开发者，我的建议是：

花时间理解类型系统和空安全
不要害怕使用语言特有的功能（如级联操作符、命名构造函数）
利用 VS Code 或 Android Studio 的 Dart 插件提供的代码补全和错误提示
多参考官方文档和示例，Dart 的官方文档非常清晰

学习新语言总是需要时间和耐心，但 Dart 的设计理念和语法特性使这个过程比我想象的更顺畅。随着我继续深入 Flutter 开发，我相信这些基础知识将为我打下坚实的基础。

如果你也在学习 Dart，希望我的经验能帮助你避开一些常见的坑！记住，每一个学习中的困惑最终都会变成你的知识与经验。