隨著 HarmonyOS NEXT（純血鴻蒙） 的到來，開發者在學習鴻蒙應用開發時會遇到一個新的語言 —— ArkTS。很多人會疑惑：它和 TypeScript（TS）是什么關系？又有哪些新的特性？在實際開發中，為什么總是報一堆奇怪的錯誤？

本文將系統介紹 ArkTS 與 TypeScript 的關系，并結合社區經驗整理出 常見錯誤案例與改進建議，幫助開發者快速上手鴻蒙開發。

---

一、ArkTS 與 TypeScript 的關系

1. 語言定位

   • TypeScript：由微軟開發的 JavaScript 超集，主要在前端/Node.js 生態下使用。

   • ArkTS：由華為基于 TypeScript 擴展的鴻蒙專用語言，運行在 方舟運行時（ArkVM） 上，深度結合 ArkUI 框架 和 HarmonyOS 系統能力。

   👉 可以理解為：ArkTS = TypeScript + 鴻蒙專屬增強。

2. 運行環境不同

   • TS 運行在瀏覽器（V8 引擎）或 Node.js。

   • ArkTS 運行在鴻蒙的 Ark Runtime，無法直接使用 DOM 或 Node API。

3. 特性擴展

   ArkTS 在 TS 的基礎上，新增了以下能力：

   • 聲明式 UI（類似 SwiftUI / Jetpack Compose）

   • 響應式狀態管理（@State, @Prop, @Link 等）

   • 組件生命周期（aboutToAppear, aboutToDisappear 等）

   • 并發編程能力（更高效的 async/await 支持）

   • 嚴格的類型檢查（限制 any/unknown）

   • 與鴻蒙 系統 API（Kit） 的無縫對接

---

二、ArkTS 新增特性示例

1. 聲明式 UI 編程

@Entry
@Component
struct HelloWorld {@State count: number = 0;build() {Column() {Text(`當前點擊次數: ${this.count}`).fontSize(20)Button("點我").onClick(() => {this.count++;})}}
}

• @Entry 定義應用入口

• @Component 定義 UI 組件

• @State 管理狀態，狀態改變后 UI 自動刷新

---

三、ArkTS 常見錯誤案例及解決方案

錯誤一：屬性未初始化導致報錯

錯誤代碼：

class User {name: string;  // Error: 屬性 “name” 沒有初始化器
}

ArkTS 默認啟用嚴格類型檢查，要求屬性必須初始化。

正確寫法：

class User {name: string = '';
}

或者允許為空：

class User {name?: string;
}

---

錯誤二：濫用?any?或?unknown

錯誤代碼：

let data: any = getData();  
console.log(data.name);  // ArkTS 編譯器警告

正確寫法：

interface User {name: string;age: number;
}
let data: User = getData();
console.log(data.name);

👉 在 ArkTS 中，any、unknown 會被判為低質量代碼，必須定義清晰的類型。

---

錯誤三：構造函數類型簽名不匹配

錯誤代碼：

class Controller {value: string = '';constructor(value: string) {this.value = value;}
}type ControllerConstructor = new (value: string) => Controller;

編譯會報錯，因為 ArkTS 不允許這種寫法。

正確寫法：

type ControllerConstructor = () => Controller;class Menu {controller: ControllerConstructor = () => new Controller("abc");createController() {return this.controller();}
}

---

錯誤四：誤用?globalThis

ArkTS 不支持像 JS 一樣隨意往 globalThis 添加屬性。

錯誤代碼：

(globalThis as any).config = { debug: true };

正確寫法：

export class Config {static debug: boolean = true;
}// 在其他模塊中
import { Config } from './Config';
console.log(Config.debug);

---

錯誤五：誤用?apply /?bind?/?call

ArkTS 不建議使用這類動態函數調用方式。

錯誤代碼：

String.fromCharCode.apply(null, [65, 66]);

正確寫法：

String.fromCharCode(...[65, 66]);

---

錯誤六：標準庫方法受限

ArkTS 不推薦直接使用某些全局函數：

• isNaN() → 改用 Number.isNaN()

• parseInt() → 改用 Number.parseInt()

• Object.fromEntries() → 可能報錯，需手動實現

改寫示例：

let num = Number.parseInt("123", 10);

---

錯誤七：空值未檢查

錯誤代碼：

let name: string | null = null;
console.log(name.toLowerCase()); // 報錯

正確寫法：

if (name) {console.log(name.toLowerCase());
}

---

錯誤八：導航機制混用出錯

ArkTS 提供兩種導航方式：舊的 router 和新的 Navigation。混用容易出問題。

錯誤寫法：

router.push({ url: 'pages/Detail' });
this.navigation.push('Detail');  // 兩種方式混用

正確寫法：

只使用 Navigation：

Navigation(this.navStack).navDestination("Detail", DetailPage);

---

錯誤九：模塊路徑大小寫問題

常見報錯：

Cannot find module './utils/helper'

實際原因是文件名大小寫不一致：Helper.ts vs helper.ts。

ArkTS 編譯器對路徑大小寫敏感，務必保持一致。

---

四、開發注意事項總結

1. 避免 any/unknown，盡量寫明類型

2. 組件必須有 build() 方法

3. 生命周期函數與 React/Vue 不同

4. 狀態修飾符要用對（@State, @Prop, @Link, @Provide, @Consume）

5. 禁止使用 globalThis、apply/bind/call

6. 導航建議統一使用 Navigation

7. 嚴格模式下所有屬性必須初始化或聲明可選

8. 注意模塊路徑大小寫

---

五、總結

• ArkTS 是 TypeScript 的超集，但它不僅僅是語法糖，而是和 鴻蒙應用開發框架 ArkUI 深度綁定。

• 開發鴻蒙應用時，必須轉變思維方式，從傳統 JS/TS 的“寬松風格”轉向 ArkTS 的“強類型、聲明式 UI、響應式編程”模式。

• 常見錯誤主要集中在 類型檢查、狀態管理、導航機制、標準庫使用 上。

• 掌握這些要點，就能在鴻蒙開發中少踩坑，更快上手。