📚 鸿蒙入门专栏 · 第 4 篇 / 共 10 篇
上一篇：项目结构详解：entry、Ability、module.json5 ｜ 下一篇：声明式 UI 入门：@State、@Prop、@Link

目录

一、变量与类型（和 TS 一致）

二、函数

三、一张图看懂一个 .ets 页面的结构

四、和 TS 的差异（避坑）

五、下一篇预告

---

这篇是全专栏的「语言地基」。ArkTS = TypeScript（TS）+ 鸿蒙 UI 增强。我们只讲写鸿蒙必须会的部分，不讲废话。

一、变量与类型（和 TS 一致）

let name: string = "小明"      // 字符串
let age: number = 18           // 数字
let isVip: boolean = true      // 布尔
let list: string[] = ["a", "b"] // 数组

// 对象：鸿蒙里推荐用 interface + class
interface Person {
  name: string
  age: number
}
let p: Person = { name: "小明", age: 18 }

二、函数

// 标准写法：参数类型 + 返回类型
function add(a: number, b: number): number {
  return a + b
}

// 箭头函数（UI 里传事件常用这种）
let sayHi = (name: string): void => {
  console.log("你好，" + name)
}

三、一张图看懂一个 .ets 页面的结构

@Entry                    // 页面入口标记
@Component                // 这是个组件
struct Index {            // 页面主体
  @State msg: string = "你好"   // 状态变量（下篇细讲）

  build() {               // 界面描述：页面长什么样写在这
    Column() {
      Text(this.msg)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
  }
}

关键字	作用	一句话理解
@Entry	标记页面入口	有它才能当独立页面显示
@Component	标记组件	可复用的 UI 单元
struct	组件载体	类似 class，但专用于 UI
build()	描述界面	里面写 UI 组件的嵌套结构
@State	状态变量	变量变了界面自动变

四、和 TS 的差异（避坑）

ArkTS 为了性能和安全，禁用了一些 TS 动态特性：any 类型、运行时改变对象结构、call/apply 等。报错提示 unsupported 时，优先想是不是用了被禁的特性。

💡 本专栏不需要你精通 TS，上面的语法够用 80% 场景。写代码时让 DevEco 的自动补全带着你走，学得最快。

五、下一篇预告

你已经认识了 @State，但「为什么变量一变界面就自动变」？下一篇：声明式 UI 与状态管理，鸿蒙的核心思想一次讲透。

---

如果这篇对你有帮助，点赞 + 收藏 + 关注三连支持一下，后续教程更新不迷路。
有报错解决不了？评论区贴出报错信息 + 代码，看到都会回。