HarmonyOS 开发：TypeScript 语言补充

WAsbry
670 阅读4分钟

本文概述

  • ArkTS 是在TypeScript 的基础上加上鸿蒙特性，而TypeScript 又是在JavaScript 的基础上演变而来的。因此，TypeScript 和JavaScript 也是需要了解的

TypeScript 语言补充

在线调试环境：

  • TypeScript 在线运行环境一：https://www.typescriptlang.org

    • 不要在网页上写太多代码，这个网站会卡死的

TS 语言基础

Any 类型

  • 概述：Any 表示不确定的类型，所以可以存储所有类型

  • 使用场景：

    • 不推荐：将其用作变量类型

      • 这样搞成跟JS 一样的弱类型语言了

    • 推荐：在定义方法行为的时候：入参、返回值；

      • 这时候才考虑使用Any，体现出它的包容性及扩展性

  • 代码展示：

    let nameInfoDis: any = "WAsbry"//不推荐将变量声明为any 类型 
let nameInfo: string = "WAsbry"//推荐写法

数组类型：

  • 基本概述：

    • 有两种声明方式，且索引从0 开始。

  • 代码展示：

    //数组声明：两种方式等价
let phonesA: Array<string> = ['xaiomi','huawei']
let phonesB: string[] = ['xiaomi','huawei']
console.log(phonesA[0] + "--" + phonesA[1])//数组取值

等号问题

  • 基本概述：

    • 最好写三个等号，两个等号，低版本内部会将 == 两端的值先进行转换后面才判断，一个是浪费性能，还有数据可能失真(类型发生变化)

  • 代码展示

    let testNumber = 16 
if(testNumber % 2 === 0){//最好写三个等号，两个等号，低版本内部会将 == 两端的值先进行转换后面才判断，一个是浪费性能，还有数据可能失真(类型发生变化)
    console.log("确实是偶数")
}

条件控制：if-else

  • 基本概述：与C/C++ 非0即true 不同，ts 中将 空/null/0/undefined判断为false,其余情况均为 true

  • 代码展示：

    //=========C/C++ 非0即true 
let data: any
data = 0
if(data){//如果data 此时为空/null/0/undefined,此处会将data 判断为false,其余情况就是true  
    console.log("数据存在")
}else{
    console.log("数据不存在")
}

条件控制：Switch - case

  • 代码展示：类似其他编程语言

    //=====switch-case ,注意这个东西的写法 
let strValue: string = ''
switch(strValue){
    case 'S': {
        console.log("绩效是S")
        break
    }
    case 'A': {
        console.log("绩效是A ")
        break
    }
    default: {
        console.log("不在认知内")
    }
}

条件控制：For 循环

  • 基本概述：在遍历数组时，可以去那数组下标，可以去拿数组元素

  • 代码展示

    //Java 式的写法
for(let i = 0;i < 3;i++){
    console.log("这是第 " + i + " 次打印")
}
let cnt = 0;
while(cnt < 3){
    console.log("while 循环了 " + cnt + "次")
}

//可以认为TS 集百家之长 
let phones: string[] = ['HUAWEI',"XIAOMI"]
for(const i in phones){//使用in 关键字，拿到数组元素下表，可借此拿到元素
    console.log("第 " + i + " 部手机 = " + phones[i])
}
for(const phone of phones){//使用of 关键字，拿到数组元素本身
    console.log("这次拿到的手机 = " + phone)
}

函数部分

  • 函数定义

    //函数跟Kotlin 有点像
function showNameInfo(name: string) : void{
    console.log("name = " + name)
}

function addTwoNum(numberA: number,numberB: number) : number{
    return numberA + numberB
}
console.log("两数相加：" + addTwoNum(2,3))

  • 箭头函数

    • 箭头函数 跟 Kotlin 里面的lamda，es6 箭头函数等类似
    • 箭头函数的返回类型，若没有显示给出，那就是void
    let showName = (name: string) => {
    console.log("箭头函数：name = " + name)
}
showName("WAsbry")

let result = () => {
    console.log("带返回值的箭头函数")
    return true
}
let res: boolean = result()
console.log("带返回类型的箭头函数的返回值：res = " + res)

  • 函数传参：支持参数省略及默认参数

    //函数传参的细节 
function showNameAction(name ? : string){
    name = name ? name : "Default"
    console.log(name)
}
showNameAction()
showNameAction("WAsbry")

//还支持函数的默认参数
function functionDefaultParma(name : string = "default"){
    console.log(name)
}
functionDefaultParma()

TS 对象部分

  • 定义对象：

    //TS对象：有点像Python 里面的键值对
let emptyObj = {}//定义空对象
let student = {name: "WAsbry",age: 23}
console.log(student.name + "--" + student.age)//对象取值
console.log(student['name'] + "--" + student['age'])//对象取值

TS 面向对象实操一

  • 枚举类型 + 接口 + 类 + 对象多态

    //枚举类型
enum Action{//枚举类型默认值为0,1,2,3
    OPEN = '设备打开'，
    CLOSE = '设备关闭'
}

//定义接口：在方法或类里面不需要写let function，反之，就要写
interface IUSB{
    insertUSB() : void
    deleteUSB() : void
}

//定义类
class KeyBoard implements IUSB{
    insertUSB() : void{
        console.log(`键盘${Action.OPEN}`)
    }

    deleteUSB() : void{
        console.log(`键盘${Action.CLOSE}`)
    }
}

class Mouse implements IUSB{
    insertUSB() : void{
        console.log(`鼠标${Action.OPEN}`)
    }

    deleteUSB() : void{
        console.log(`鼠标${Action.CLOSE}`)
    }
}

//多态
let iusb1: IUSB = new Mouse()
iusb1.insertUSB()
iusb1.deleteUSB()

let iusb2: IUSB = new KeyBoard() 
iusb2.insertUSB()
iusb2.deleteUSB()

  • 运行结果： image.png

TS 面向对象实操二

  • 代码展示：

    class RectangleClass{
    private mWidth: number
    private mHeight: number

    //在构造方法里面赋值
    public constructor(w: number,h: number){
        this.mWidth = w;
        this.mHeight = h;
    }

    public calculatedArea(): number{
        return this.mWidth * this.mHeight;
    }
}

//定义一个正方形，宽高同值
class SquareClass extends RectangleClass{//拥有父类的所有能力，再扩展出子类的能力(正方形)
    constructor(wh: number){
        super(wh,wh)
    }
}

let squareObj = new SquareClass(5);
console.log("squareObj 的面积 = " + squareObj.calculatedArea())

let sq : RectangleClass = new SquareClass(5)
console.log("多态做法 squareObj 的面积 = " + squareObj.calculatedArea())

  • 运行结果： image.png

avatar
文章
阅读
粉丝