《从零到一:鸿蒙原生应用开发实战》第4篇:ArkTS 基础语法速成(上)—— 数据类型、变量、函数、箭头函数

你好，我是华鸿技术栈的作者。

前三篇我们搞懂了鸿蒙的“世界观”，搭好了开发环境，还逐行拆解了第一个 ArkTS 页面。按道理接下来该写 UI 了——按钮、列表、输入框，把界面搭出来。

但直接讲组件有一个问题。你会看到一堆 let、const、箭头函数、类型标注，如果这些基础语法不先过一遍，后面每一篇你都得边写边查，效率很低。

所以今天这篇，咱们先把 ArkTS 的基础语法扫一遍。不贪多，就四样：数据类型、变量声明、函数、箭头函数。只讲 UI 开发里天天用的部分，用不到的先不碰。

这篇没有 UI，全是代码片段。但别跳过——把这些语法吃透了，后面的组件篇你写起来会顺很多。

4.1 ArkTS 和 TypeScript 的关系

先把这个关系理清楚，不然你看到某些写法会懵。

ArkTS 不是凭空冒出来的新语言。它在 TypeScript 的基础上做了两件事：加了东西，也砍了东西。

加的：装饰器（@State、@Component 这些），声明式 UI 语法（build() 方法里写界面），状态管理机制。

砍的：any 类型。在 TypeScript 里你可以偷懒写 let a: any = 'hello'，ArkTS 直接不允许。变量必须明确类型，编译阶段就会检查出来。

也就是说，TypeScript 的基本语法 ArkTS 全都认，你不需要重新学一门语言。如果你写过 TS，上手基本零门槛。没写过也没关系，这篇带你从零过一遍。

4.2 变量声明：let 和 const

写代码第一件事就是声明变量。ArkTS 里用 let 和 const，不用 var。

let 声明一个可变变量：

typescript

typescript

• 这个值后面要变的，用 let。比如计数器的数字、用户输入的内容。

• 这个值定了就不改了，用 const。比如固定的配置项、不会变的应用名称。

实际开发里 const 用得比 let 多。大部分变量其实不需要改，写 const 能让代码更安全，别人读你的代码也一眼知道这个值不会变。

初学者容易犯的错：以为 const 声明的对象属性也不能改。其实不是，const 只是不能重新赋值，但对象里面的属性可以改：

typescript

const user = { name: '张三', age: 25 }; user.age = 26;  // 没问题 user = { name: '李四', age: 30 };  // 报错

4.3 数据类型：写 UI 常用的就这几种

ArkTS 里的基础类型和 TypeScript 一致。你不需要全记住，写 UI 常用的就这几种：

数字：number

ArkTS 里不区分 int 和 float，统一用 number：

typescript

后面写组件时，fontSize、width、height 这些属性值的类型都是 number。

字符串：string

typescript

let title: string = '鸿蒙开发实战'; let subtitle: string = "华鸿技术栈";

单引号和双引号都可以，但一个项目里最好统一用一种。推荐单引号，大部分 ArkTS 官方示例都用单引号。

字符串拼接：实际开发里经常要拼字符串，比如拼接一个 URL 或者动态生成文案。用模板字符串最方便，反引号包起来，${} 里面放变量：

typescript

const name: string = '华鸿'; const greeting: string = 欢迎来到${name}技术栈; // 结果：欢迎来到华鸿技术栈

另一个常用场景：条件判断时显示不同文字：

typescript

const status: number = 1; const statusText: string = status === 1 ? '已上架' : '已下架';

三元表达式在 UI 开发里用到飞起，按钮文字、标签颜色、提示信息都靠它动态切换。

布尔值：boolean

typescript

let isLoading: boolean = false; let isFollowed: boolean = true;

按钮的禁用状态、加载中状态、收藏状态，背后都是 boolean 在控制。

数组：Array

数组用来存列表数据，比如文章列表、收藏列表：

typescript

const articleList: string[] = ['文章A', '文章B', '文章C']; const numbers: number[] = [1, 2, 3, 4, 5];

后面做列表渲染时，ForEach 和 LazyForEach 遍历的就是数组。

数组的常用操作：

typescript

遍历数组用 for...of：

typescript

const list: string[] = ['鸿蒙', 'ArkTS', 'ArkUI']; for (const item of list) {  console.log(item); }

对象：object

对象用来描述一个结构化的数据，比如一个用户信息、一篇文章：

typescript

const article = {  title: '鸿蒙开发入门',  author: '华鸿技术栈',  readCount: 1280};

访问对象属性用点号：

typescript

console.log(article.title);// '鸿蒙开发入门'

type 关键字——自定义类型：

如果你想给对象定义一个固定的类型结构，用 type：

typescript

type Article = {  title: string;  author: string;  readCount: number;};

const article: Article = {  title: '鸿蒙开发入门',  author: '华鸿技术栈',  readCount: 1280};

后面做网络请求、解析 JSON 数据时，type 定义数据模型会大量用到。

4.4 函数：把重复的逻辑封装起来

函数就是把一段逻辑包装起来，起个名字，需要的时候调用。先看基本结构：

typescript

function 函数名(参数: 类型): 返回值类型 {  // 函数体  return 返回值;}

一个具体的例子：

typescript

括号里 (a: number, b: number) 是参数列表，每个参数都要标注类型。

• 括号后面 : number 是返回值类型。

• 没有返回值时写 void：

typescript

function logMessage(msg: string): void {  console.log(msg);}

实际开发中，函数通常用来封装可复用的逻辑。比如格式化日期：

typescript

function formatReadCount(count: number): string {  if (count >= 10000) {    return ${(count / 10000).toFixed(1)}万;  }  return count.toString();}

console.log(formatReadCount(12800));  // '1.3万'console.log(formatReadCount(560));    // '560'

这种工具函数封装好以后，多个页面都能调用，不用每次都重写一遍逻辑。

4.5 箭头函数：回调里用得最多

箭头函数是普通函数的简写形式。它最大的好处是语法更短，在回调里用起来非常顺手。

对比一下普通函数和箭头函数：

typescript

() => {} 这个结构就是箭头函数的标志。箭头左边是参数，箭头右边是函数体。

当函数体只有一行 return 时，可以进一步简写，省略 {} 和 return：

typescript

箭头函数在 ArkUI 开发里最常用的场景是回调函数，比如按钮的点击事件：

typescript

再看一个带参数的例子，输入框的 onChange 事件：

typescrip

TextInput({ placeholder: '请输入' })  .onChange((value: string) => {    this.username = value;  });

这里 value 是输入框自动传进来的参数，类型是 string，箭头函数接收到这个值后，把它赋值给 this.username。

这两种写法以后会反复出现，现在就混个眼熟：

• () => {} —— 无参数回调，典型的就是按钮点击

• (value: type) => {} —— 有参数回调，典型的就是输入变化

4.6 动手写：用学到的语法写一个工具函数

下面这些代码演示了一个文章阅读量的格式化函数，你可以把它复制到 Index.ets 里跑一下看看效果：

typescript

// 格式化阅读量：12800 → 1.3万，560 → 560function formatReadCount(count: number): string {  if (count >= 10000) {    return ${(count / 10000).toFixed(1)}万;  }  return count.toString();}

这个函数里有我们刚学到的：number 类型、string 类型、模板字符串、if 条件判断、return 返回值。这个函数用到的不多，但包含的技术点很全，你可以通过它回顾一下本篇学到的内容。

后面讲网络请求、JSON 解析、状态管理的时候，这篇学的基础语法全都会用到。不用现在就全背下来，有个印象就行，用多了就熟了。

4.7 本篇总结

这篇是纯语法，没有 UI。把这些基础打牢，后面写组件会顺畅很多。

今天讲的四样东西，你在后续代码里每天都会碰到：

下一篇继续语法——数组操作、对象解构、扩展运算符。这几样是在写列表渲染、数据映射、组件传参时用的“手边活”。做完之后，咱们就可以正式进入组件实战了。

本文由「华鸿技术栈」原创发布，专注鸿蒙原生应用与元服务开发。分享实战代码、源码解析、性能优化及生态前沿。不讲虚的，只上干货。转载请联系授权。