Harmony OS 应用开发 developer.Huawei - applications,好好做人,类笔记

TypeScript


前言

TypeScript

变量声明,条件控制,循环迭代,函数,类和接口,模块开发

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

Example
声明变量的关键字,const则代表常量
变量名,自定义
变量的数据类型

// string:字符串,可以用单引号或双引号
let msg: string = 'hello world'
// number:数值,整数、浮点数都可以
let age: number = 26
//
let finished: boolean = true
// any:不确定类型,可以是任意类型
let a:any = 'jerry'
a = 26
// union:联合类型,可以是多个指定类型中的一种
let u: string|number|boolean = 'Stark'
u = 26
// object:对象
let p = {name: 'Jarvis', age: 26}
console.log(p.name)
console.log(p['name'])
// Array:数组,元素可以是任意其它类型
let names: Array<string> = ['Jarvis', 'Friday']
let ages: number[] = [26, 26]
console.log(names[0])
console.log(ages[1])

string:字符串,可以用单引号或双引号
number:数值,整数、浮点数都可以
boolean:布尔
any:不确定类型,可以是任意类型
union:联合类型,可以是多个指定类型中的一种
object:对象
Array:数组,元素可以是任意其他类型

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

// 定义数字
let num:number = 26

// 判断是否是偶数
if(num % 2 === 0) {
	console.log(num + 'is even')
} else {
	console.log(num + 'is odd')
}

// 判断是否是正数
if(num > 0) {
	console.log(num + ' is positive')
} else if(num < 0) {
	console.log(num + ' is negative')
} else {
	console.log(num + ' is 0')
}

注意:==只判断值不判断类型
===既判断值也判断类型
空字符串、数字0、null、undefined都被认为是false
其他值则为true

if (num) {
	// num非空,可以执行逻辑
}

另:

let grade: string = 'A'
switch (grade) {
	case 'A': {
		console.log('Excellent')
		break
	}
	case 'B': {
		console.log('Not bad')
		break
	}
	case 'C': {
		console.log('Failed-huh')
		break
	}
	default: {
		console.log('illegal input')
		break
	}
}

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

// common for
for(let i = 1; i <= 10; i++) {
	console.log('like' + i + 'times')
}

// while
let i = 1;
while(i <= 10) {
	console.log('like' + i + 'times')
	i++;
}

// 定义数组
let names: string[] = ['Jarvis', 'Friday']

// for in 迭代器,遍历得到数组角标
for (const i in names) {
	console.log(i + ':' + names[i])
}

// for of 迭代器,直接得到元素
for (const i of names) {
	console.log(name)
}

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

// 定义参数
// 无返回值函数,返回值void可以省略
function sayHello(name: string): void {
	console.log('Hello!' + name + 'there.')
}
sayHello('Stark')

// 有返回值函数
function sum(x: number, y: number): number {
	return x + y
}
let result = sum(266, 520)
console.log('266 + 520 =' + result)

// 箭头函数
let sayHi = (name: string) => {
	console.log('Hello, ' + name + '!')
}
sayHi('Johanna')
// 函数-可选参数
// 可选参数,在参数名后加?,表示该参数是可选的
function sayHello(name?: string){
	// 判断name是否有值,如果无值则给一个默认值
	name = name ? name : 'stranger'
	console.log('Hello, ' + name + '!')
}
sayHello('66')
sayHello()
// 函数-参数默认值
// 参数默认值,在参数后面赋值,表示参数默认值
// 如果调用者没有传参,则使用默认值
function sayHello(name: string = 'stranger'){
	console.log('Hello, ' + name + '!')
}
sayHello('66')
sayHello()

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

// 定义枚举
enum Msg {
	HI = 'Hi',
	HELLO = 'Hello'
}

// 定义接口,抽象方法接收枚举参数
interface API {
	say(msg: Msg): void
}

// 实现接口
class BB implements API {
	say(msg: Msg): void {
		console.log(msg + ', I am BB')
	}
}

// 初始化对象
let a:API = new BB()

// 调用方法,传递枚举参数
a.say(Msg.HI)
// Complicated one
// 定义矩阵类
class Rectangle {
	// 成员变量
	private width: number
	private length: number
	// 构造函数(不需要函数名)
	constructor(width: number, length: number) {
		this.width = width
		this.length = length
	}
	// 成员方法(不需要方式关键字)
	public area(): number {
		return this.width * this length
	}
}

// 定义正方形类(继承矩形)
class Square extends Rectangle {
	constructor(side: number) {
		// 调用父类构造
		super(side, side)
	}
}
	
let squarehuh = new Square(26)
console.log('The size of the square is: ' + squarehuh.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(26,66)

// 调用area方法
console.log('The size is: ' + area(r))

鸿蒙应用开发工程师

一、了解ArkTS语言

首先clarification:

  • HTML控制页面元素
  • CSS控制布局和样式
  • JavaScript控制页面逻辑和数据状态

ArkTS是在TypeScript基础上的拓展,而TS又是JavaScript的超集

{ArkTS - 声明式UI,状态管理 {TypeScript - 静态类型定义 {JavaScript} } }

  • 开发效率高,开发体验好
  • 性能优越
  • 有多系统适配,接入能力

声明式UI前端
方舟编译器(统一字节码,AOT,GC机制) + UI后端引擎(布局、动效、事件,内存管理,渲染总线)
高效渲染引擎
平台适配层 & 平台桥阶层
操作系统

二、

代码如下:


总结

提示:这里对文章进行总结:
例如:

  • 7
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值