前言

Mozilla創(chuàng)造了JS，Microsoft創(chuàng)建了TS，而Huawei進(jìn)一步推出了ArkTS。因此在學(xué)習(xí)使用ArkTS前，需要掌握基本的TS開發(fā)技能。

ArkTS介紹

ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開發(fā)語言。它在TypeScript（簡(jiǎn)稱TS）的基礎(chǔ)上，匹配ArkUI框架，擴(kuò)展了聲明式UI、狀態(tài)管理等相應(yīng)的能力，讓開發(fā)者以更簡(jiǎn)潔、更自然的方式開發(fā)跨端應(yīng)用。要了解什么是ArkTS，我們首先要了解下ArkTS、TypeScript和JavaScript之間的關(guān)系：

1. JavaScript是一種屬于網(wǎng)絡(luò)的高級(jí)腳本語言，已經(jīng)被廣泛用于Web應(yīng)用開發(fā)，常用來為網(wǎng)頁添加各式各樣的動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。

2. TypeScript 是 JavaScript 的一個(gè)超集，它擴(kuò)展了 JavaScript 的語法，通過在JavaScript的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成，是一個(gè)開源的編程語言。

3. ArkTS兼容TypeScript語言，拓展了聲明式UI、狀態(tài)管理、并發(fā)任務(wù)等能力。

由此可知，TypeScript是JavaScript的超集，ArkTS則是TypeScript的超集，他們的關(guān)系如下圖所示：

在學(xué)習(xí)ArkTS聲明式的相關(guān)語法之前，下面我們首先學(xué)習(xí)下TypeScript的基礎(chǔ)語法。

TypeScript快速入門

下面先從TS最基礎(chǔ)的基礎(chǔ)類型講起。

基礎(chǔ)類型

TypeScript支持一些基礎(chǔ)的數(shù)據(jù)類型，如布爾型、數(shù)組、字符串等，下文舉例幾個(gè)較為常用的數(shù)據(jù)類型，我們來了解下他們的基本使用。

• 布爾值
  TypeScript中可以使用boolean來表示這個(gè)變量是布爾值，可以賦值為true或者false。

let isDone: boolean = false;

• 數(shù)字類型
  TypeScript里的所有數(shù)字都是浮點(diǎn)數(shù)，這些浮點(diǎn)數(shù)的類型是 number。除了支持十進(jìn)制，還支持二進(jìn)制、八進(jìn)制、十六進(jìn)制。

let decLiteral: number = 2023;
let binaryLiteral: number = 0b11111100111;
let octalLiteral: number = 0o3747;
let hexLiteral: number = 0x7e7;

• 字符串類型
  TypeScript里使用 string表示文本數(shù)據(jù)類型， 可以使用雙引號(hào)（ "）或單引號(hào)（'）表示字符串。

let name: string = "Jacky";
name = "Tom";
name = 'Music';

• 數(shù)組
  TypeScrip有兩種方式可以定義數(shù)組。 第一種，可以在元素類型后面接上 []，表示由此類型元素組成的一個(gè)數(shù)組。

let list: number[] = [1, 2, 3, 4];

第二種方式是使用數(shù)組泛型，Array<元素類型>。

let list: Array<number> = [1, 2, 3, 4];

• 元組類型
  元組類型允許表示一個(gè)已知元素?cái)?shù)量和類型的數(shù)組，各元素的類型不必相同。 比如，你可以定義一對(duì)值分別為 string和number類型的元組。

let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error

• 枚舉類型
  enum類型是對(duì)JavaScript標(biāo)準(zhǔn)數(shù)據(jù)類型的一個(gè)補(bǔ)充，使用枚舉類型可以為一組數(shù)值賦予友好的名字。

enum Color {Red, Green, Blue};
let c: Color = Color.Green;

• Unknown類型

有時(shí)候，我們會(huì)想要為那些在編程階段還不清楚類型的變量指定一個(gè)類型。這種情況下，我們不希望類型檢查器對(duì)這些值進(jìn)行檢查而是直接讓它們通過編譯階段的檢查。那么我們可以使用unknown類型來標(biāo)記這些變量。

let notSure: unknown = 4;
notSure = 'maybe a string instead';
notSure = false;

• Void類型

當(dāng)一個(gè)函數(shù)沒有返回值時(shí)，你通常會(huì)見到其返回值類型是 void。

function test(): void {
   console.log('This is function is void');
}

• Null 和 Undefined

TypeScript里，undefined和null兩者各自有自己的類型分別叫做undefined和null。

let u: undefined = undefined;
let n: null = null;

• 聯(lián)合類型

聯(lián)合類型（Union Types）表示取值可以為多種類型中的一種。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

介紹完基礎(chǔ)類型，下面簡(jiǎn)單介紹一下條件控制語句。

條件語句

條件語句用于基于不同的條件來執(zhí)行不同的動(dòng)作。TypeScript 條件語句是通過一條或多條語句的執(zhí)行結(jié)果（True 或 False）來決定執(zhí)行的代碼塊。

• if 語句
  TypeScript if 語句由一個(gè)布爾表達(dá)式后跟一個(gè)或多個(gè)語句組成。

var num:number = 5
if (num > 0) { 
   console.log('數(shù)字是正數(shù)') 
}

• if…else 語句
  一個(gè) if 語句后可跟一個(gè)可選的 else 語句，else 語句在布爾表達(dá)式為 false 時(shí)執(zhí)行。

var num:number = 12; 
if (num % 2==0) { 
    console.log('偶數(shù)'); 
} else {
    console.log('奇數(shù)'); 
}

• if…else if…else 語句

if…else if…else 語句在執(zhí)行多個(gè)判斷條件的時(shí)候很有用。

var num:number = 2 
if(num > 0) { 
    console.log(num+' 是正數(shù)') 
} else if(num < 0) { 
    console.log(num+' 是負(fù)數(shù)') 
} else { 
    console.log(num+' 為0') 
}

• switch…case 語句
  一個(gè) switch 語句允許測(cè)試一個(gè)變量等于多個(gè)值時(shí)的情況。每個(gè)值稱為一個(gè) case，且被測(cè)試的變量會(huì)對(duì)每個(gè) switch case 進(jìn)行檢查。

var grade:string = 'A'; 
switch(grade) { 
    case 'A': { 
        console.log('優(yōu)'); 
        break; 
    } 
    case 'B': { 
        console.log('良'); 
        break; 
    } 
    case 'C': {
        console.log('及格'); 
        break;    
    } 
    case 'D': { 
        console.log('不及格'); 
        break; 
    }  
    default: { 
        console.log('非法輸入'); 
        break;              
    } 
}

這些就是我們常用的條件語句，接下來我們繼續(xù)學(xué)習(xí)TS的函數(shù)。

函數(shù)

函數(shù)是一組一起執(zhí)行一個(gè)任務(wù)的語句，函數(shù)聲明要告訴編譯器函數(shù)的名稱、返回類型和參數(shù)。TypeScript可以創(chuàng)建有名字的函數(shù)和匿名函數(shù)，其創(chuàng)建方法如下：

// 有名函數(shù)
function add(x, y) {
  return x + y;
}

// 匿名函數(shù)
let myAdd = function (x, y) {
  return x + y;
};

• 為函數(shù)定義類型

為了確保輸入輸出的準(zhǔn)確性，我們可以為上面那個(gè)函數(shù)添加類型：

// 有名函數(shù)：給變量設(shè)置為number類型
function add(x: number, y: number): number {
  return x + y;
}

// 匿名函數(shù)：給變量設(shè)置為number類型
let myAdd = function (x: number, y: number): number {
  return x + y;
};

• 可選參數(shù)

在TypeScript里我們可以在參數(shù)名旁使用 ?實(shí)現(xiàn)可選參數(shù)的功能。 比如，我們想讓lastName是可選的：

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + ' ' + lastName;
    else
        return firstName;
}

let result1 = buildName('Bob');
let result2 = buildName('Bob', 'Adams'); 

• 剩余參數(shù)

剩余參數(shù)會(huì)被當(dāng)做個(gè)數(shù)不限的可選參數(shù)。 可以一個(gè)都沒有，同樣也可以有任意個(gè)。 可以使用省略號(hào)（ …）進(jìn)行定義：

function getEmployeeName(firstName: string, ...restOfName: string[]) {
  return firstName + ' ' + restOfName.join(' ');
}

let employeeName = getEmployeeName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');

• 箭頭函數(shù)

ES6版本的TypeScript提供了一個(gè)箭頭函數(shù)，它是定義匿名函數(shù)的簡(jiǎn)寫語法，用于函數(shù)表達(dá)式，它省略了function關(guān)鍵字。箭頭函數(shù)的定義如下，其函數(shù)是一個(gè)語句塊：

( [param1, parma2,…param n] )=> {
    // 代碼塊
}

其中，括號(hào)內(nèi)是函數(shù)的入?yún)?，可以?到多個(gè)參數(shù)，箭頭后是函數(shù)的代碼塊。我們可以將這個(gè)箭頭函數(shù)賦值給一個(gè)變量，如下所示：

let arrowFun = ( [param1, parma2,…param n] )=> {
    // 代碼塊
}

如何要主動(dòng)調(diào)用這個(gè)箭頭函數(shù)，可以按如下方法去調(diào)用：

arrowFun(param1, parma2,…param n)

接下來我們看看如何將我們熟悉的函數(shù)定義方式轉(zhuǎn)換為箭頭函數(shù)。我們可以定義一個(gè)判斷正負(fù)數(shù)的函數(shù)，如下：

function testNumber(num: number) {
  if (num > 0) {
    console.log(num + ' 是正數(shù)');
  } else if (num < 0) {
    console.log(num + ' 是負(fù)數(shù)');
  } else {
    console.log(num + ' 為0');
  }
}

其調(diào)用方法如下：

testNumber(1)   //輸出日志：1 是正數(shù)

如果將這個(gè)函數(shù)定義為箭頭函數(shù)，定義如下所示：

let testArrowFun = (num: number) => {
  if (num > 0) {
    console.log(num + ' 是正數(shù)');
  } else if (num < 0) {
    console.log(num + ' 是負(fù)數(shù)');
  } else {
    console.log(num + ' 為0');
  }
}

其調(diào)用方法如下：

testArrowFun(-1)   //輸出日志：-1 是負(fù)數(shù)

后面，我們?cè)趯W(xué)習(xí)HarmonyOS應(yīng)用開發(fā)時(shí)會(huì)經(jīng)常用到箭頭函數(shù)。例如，給一個(gè)按鈕添加點(diǎn)擊事件，其中onClick事件中的函數(shù)就是箭頭函數(shù)。

Button("Click Now")
  .onClick(() => {
    console.info("Button is click")
  })

類

TypeScript支持基于類的面向?qū)ο蟮木幊谭绞?，定義類的關(guān)鍵字為 class，后面緊跟類名。類描述了所創(chuàng)建的對(duì)象共同的屬性和方法。

1. 類的定義

例如，我們可以聲明一個(gè)Person類，這個(gè)類有3個(gè)成員：一個(gè)是屬性（包含name和age)，一個(gè)是構(gòu)造函數(shù)，一個(gè)是getPersonInfo方法，其定義如下所示。

class Person {
  private name: string
  private age: number

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

  public getPersonInfo(): string {
    return `My name is ${this.name} and age is ${this.age}`;
  }
}

通過上面的Person類，我們可以定義一個(gè)人物Jacky并獲取他的基本信息，其定義如下：

let person1 = new Person('Jacky', 18);
person1.getPersonInfo();

2. 繼承
   繼承就是子類繼承父類的特征和行為，使得子類具有父類相同的行為。TypeScript中允許使用繼承來擴(kuò)展現(xiàn)有的類，對(duì)應(yīng)的關(guān)鍵字為extends。

class Employee extends Person {
  private department: string

  constructor(name: string, age: number, department: string) {
    super(name, age);
    this.department = department;
  }

  public getEmployeeInfo(): string {
    return this.getPersonInfo() + ` and work in ${this.department}`;
  }
}

通過上面的Employee類，我們可以定義一個(gè)人物Tom，這里可以獲取他的基本信息，也可以獲取他的雇主信息，其定義如下：

let person2 = new Employee('Tom', 28, 'HuaWei');
person2.getPersonInfo();
person2.getEmployeeInfo();

在TypeScript中，有public、private、protected修飾符，其功能和具體使用場(chǎng)景大家可以參考TypeScript的相關(guān)學(xué)習(xí)資料，進(jìn)行拓展學(xué)習(xí)。

模塊

隨著應(yīng)用越來越大，通常要將代碼拆分成多個(gè)文件，即所謂的模塊（module）。模塊可以相互加載，并可以使用特殊的指令 export 和 import 來交換功能，從另一個(gè)模塊調(diào)用一個(gè)模塊的函數(shù)。

兩個(gè)模塊之間的關(guān)系是通過在文件級(jí)別上使用 import 和 export 建立的。模塊里面的變量、函數(shù)和類等在模塊外部是不可見的，除非明確地使用 export 導(dǎo)出它們。類似地，我們必須通過 import 導(dǎo)入其他模塊導(dǎo)出的變量、函數(shù)、類等。

1. 導(dǎo)出
   任何聲明（比如變量，函數(shù)，類，類型別名或接口）都能夠通過添加export關(guān)鍵字來導(dǎo)出，例如我們要把NewsData這個(gè)類導(dǎo)出，代碼示意如下：

export class NewsData {
  title: string;
  content: string;
  imagesUrl: Array<NewsFile>;
  source: string;

  constructor(title: string, content: string, imagesUrl: Array<NewsFile>, source: string) {
    this.title = title;
    this.content = content;
    this.imagesUrl = imagesUrl;
    this.source = source;
  }
}

2. 導(dǎo)入

模塊的導(dǎo)入操作與導(dǎo)出一樣簡(jiǎn)單。 可以使用以下 import形式之一來導(dǎo)入其它模塊中的導(dǎo)出內(nèi)容。

import { NewsData } from '../common/bean/NewsData';

迭代器

當(dāng)一個(gè)對(duì)象實(shí)現(xiàn)了Symbol.iterator屬性時(shí)，我們認(rèn)為它是可迭代的。一些內(nèi)置的類型如Array，Map，Set，String，Int32Array，Uint32Array等都具有可迭代性。

1. for…of 語句
   for…of會(huì)遍歷可迭代的對(duì)象，調(diào)用對(duì)象上的Symbol.iterator方法。 下面是在數(shù)組上使用for…of的簡(jiǎn)單例子

let someArray = [1, "string", false];

for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

2. for…of vs. for…in 語句
   for…of和for…in均可迭代一個(gè)列表，但是用于迭代的值卻不同：for…in迭代的是對(duì)象的鍵，而for…of則迭代的是對(duì)象的值。

let list = [4, 5, 6];

for (let i in list) {
    console.log(i); // "0", "1", "2",
}

for (let i of list) {
    console.log(i); // "4", "5", "6"
}

學(xué)習(xí)總結(jié)

TypeScript是一個(gè)開源的編程語言，本章節(jié)只介紹了TypeScript的基礎(chǔ)語法知識(shí)，更多內(nèi)容大家可以參考TypeScript的官方教程。大家在學(xué)習(xí)過程中，如果沒有搭建TypeScript的開發(fā)環(huán)境，也可以直接使用在線Playground平臺(tái)進(jìn)行編碼練習(xí)。已掌握TypeScript編程基礎(chǔ)的學(xué)員可以跳過本章節(jié)的學(xué)習(xí)，沒有接觸過TypeScript的同學(xué)可以先補(bǔ)齊相關(guān)的語法基礎(chǔ)，再進(jìn)入HarmonyOS的相關(guān)開發(fā)學(xué)習(xí)之旅。文章來源地址http://www.zghlxwxcb.cn/news/detail-738742.html

到了這里，關(guān)于HarmonyOS（二）—— 初識(shí)ArkTS開發(fā)語言（上）之TypeScript入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！