鸿蒙开发 TypeScript 基础语法

文章的最下面有官网链接可以进行练习！

变量声明

TypeScript 在 JavaScript 的基础上加入了静态类型检查功能，因此每一个变量都有固定的数据类型

let：声明变量的关键字，const则代表常量

示例代码：

// string：字符串，可以用单引号或双引号
let msg: string = 'hello world'
// number：数值，整数、浮点数都可以
let age: number = 21
// boolean：布尔
let finished: boolean = true
// any：不确定类型，可以是任意类型
let a:any = 'jack'
a = 21
// uniton：联合类型，可以是多个指定类型中的一种
let u: string|number|boolean = 'rose'
u = 18
// Object：对象
let p = {name: 'Jack', age: 21}
console.log(p.name)
console.log(p['name'])
// Array：数组，元素可以是任意其他类型
let names: Array<string> = ['Jack', 'Rose']
let ages: number[] = [21,18]
console.log(names[0])

条件控制

TypeScript 与大多数开发语言类似，支持基于 if - else 和 switch 的条件控制

if - else 示例代码

// 定义数字
let num:number = 21
// 判断是否是偶数
if(num % 2 === 0) {
  console.log(num + '是偶数')
} else {
  console.log(num + '是奇数')
}
// 判断是否是正数
if(num > 0) {
  console.log(num + '是正数')
} else if(num < 0){
  console.log(num + '是负数')
} else {
  console.log(num + '为0')
}

switch 示例代码

let grade: string = 'A'
switch (grade) {
  case 'A': {
    console.log('优秀')
    break
  }
  case 'B': {
    console.log('合格')
    breka
  }
  case 'C': {
    console.log('不合格')
    breka
  }
  default: {
    console.log('非法输入')
    break
  }
}

循环迭代

TypeScript 支持 for 和 while 循环，并且为一些内置类型如 Array 等提供了快捷迭代语法

 普通循序

// 普通 for
for(let i = 1; i <= 10; i++){
  console.log('点赞' + i + '次')
}
// while
let i = 1;
while(i <= 10){
  console.log('点赞' + i + '次')
  i++;
}

for 迭代器

// 定义数组
let names: string[] = ['Jack', 'Rose']
// for in 迭代器，遍历得到数组角标
for (const i in names) {
  console.log(i + ':' + names[i])
}
// for of 迭代器，直接得到元素
for (const name of names) {
  console.log(name)
}

函数

TypeScript 通常利用 function 关键字声明函数，并且支持可选参数、默认参数、箭头函数等特殊语法

定义函数

// 无返回值函数，返回值 void 可以省略
function sayHello(name: stirng): void{
  console.log('你好，' + name + '！')
}
sayHello('Jack')
// 有返回值函数
function sum(x: number,y: number): number {
  return x + y
}
let result = sum(21,18)
console.log('21 + 18 =' + result)
// 箭头函数
let sayHi = (name: string) =>{
  console.log('你好，' + name + "！")
}
sayHi('Rose')

函数 - 可选参数

// 可选参数，在参数名后加 ?，表示该参数是可选的
function sayHello(name?: stirng){
  // 判断 name 是否有值，如果无值则给一个默认值
  name = name ? name : '陌生人'
  console.log('你好，' + name + '！')
}
sayHello('Jack')
sayHello()

函数 - 参数默认值

// 参数默认值，在参数后面赋值，表示参数默认值
// 如果调用者没有传参，则使用默认值
function sayHello(naem: string = '陌生人'){
  console.log('你好，' + name + '：')
}
sayHello('Jack')
sayHello()

类和接口

TypeScript 具备面向对象编程的基本语法，例如 interface、class、enum 等；也具备封装、继承、多态等面向对象基本特征

类、接口、枚举

// 定义枚举
enum Msg{
  HI = 'Hi',
  HELLO = 'Hello'
}
// 定义接口，抽象方法接收枚举参数
interface A {
  say(msg: Msg):void
}
// 实现接口
class B implements A {
  say(msg: Msg): void {
    console.log(msg + '，I am B')
  }
}
// 初始化对象
let a:A = new B()
// 调用方法，传递枚举参数
a.say(Msg.HI)

继承

// 定义矩形类
class Rectangle {
  // 成员变量
  private width: number
  private length: number
  // 构造函数
  constructor(width: number, length: number) {
    this.width = width
    this.length = length
  }
  // 成员方法
  public area(): nuber{
    return this.width * this.length
  }
}
// 定义正方形
class Square extends Rectangle{
  constructor(side: number) {
    // 调用父类构造
    super(side, side)
  }
}

let s =new Square(10)
console.log('正方形面积为：' + s.area())

模块开发

应用复杂时，我们可以把通用功能抽取到单独的ts文件中，每个文件都是一个模块（module）；模块可以相互加载，提供代码复用性

rectangle.ts

// 定义矩形类，并通过 export 导出
export class Rectangle {
  // 成员变量
  public width: number
  public length: number
  // 构造函数
  constructor(width: number, length: number) {
    this.width = width
    this.length = length
  }
}
// 定义工具方法，求矩形面积，并通过 export 导出
export function area(rec: Rectangle): number{
  return rec.width * rec.length
}

index.ts

// 通过 import 语法导入，from 后面写文件的地址
import {Rectangle, area} from './rectangle'
// 创建 Rectangle 对象
let r = new Rectangle(10, 20)
// 调用 area 方法
console.log('面积为：' + area(r))

我们可以通过链接进入官网：TypeScript： TS Playground - 用于探索 TypeScript 和 JavaScript 的在线编辑器 (typescriptlang.org) 进行练习 

如想了解更多 TypeScript 语言可以通过官网：TypeScript: The starting point for learning TypeScript (typescriptlang.org)了解更多