TypeScript基础语法练习
一、实验目的
（1）通过DevEco Studio的安装，进一步熟悉HarmonyOS所适用的软件。
（2）通过创建工程进一步了解软件为以后的学习铺垫。
二、实验设备与器件
PC机、DevEco Studio工具
三、实验内容
1、假设已经通过DevEco Studio创建了一个基于“Empty Page Ability(Java)模板的项目，改项目基于Java UI框架，被命名为MyApplication2Page,表示一个项目中包络两个Java Page。想在在改项目的entry\src\java目录的com.XX.myapplication2page包目录中单击鼠标右键，在弹出的快捷菜单中选择new-ability-empty page ability(java)命令，
//装饰器：用于装饰类、结构、方法和变量，并赋予特殊的含义。
//@Entry：装饰器，表示该自定义组件为入口组件，表示可以通过该组件显示页面
@Entry
//@Component：装饰器，表示该组件是自定义组件
@Component
//struct关键字：被@Component装饰后，具备组件化的能力
struct Index {
//@State：装饰器，表示组件的状态变量
//定义变量
@State message: string = 'Hello arkts';
//UI描述，以声明的方式来描述UI的结构
build() {
//布局方式：RelativeContainer（相对布局）- 子元素复杂的情况
// Column (线性布局) ： 表示子元素以垂直方向为对齐方式
// Row (线性布局)： 表示子元素以水平方向为对齐方式
RelativeContainer() {
//文本组件（系统内置组件）
//this.message: 通过this调用变量
Text(this.message)
.id('HelloWorld')
//字体大小（设置组件的属性）
.fontSize(50)
.fontWeight(FontWeight.Bold)
//组件的对齐规则
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
//事件方法
.onClick(()=>{
this.message = '鸿蒙应用开发'
})
}
.height('100%')
.width('100%')
}
} |
//创建全局变量，在struct外部创建变量，需要添加let/const修饰
let num: number = 1
let message: string = '河北邯郸'
//装饰器：用于装饰类、结构、方法和变量，并赋予特殊的含义。
//@Entry：装饰器，表示该自定义组件为入口组件，表示可以通过该组件显示页面
@Entry
//@Component：装饰器，表示该组件是自定义组件
@Component
//struct关键字：被@Component装饰后，具备组件化的能力
struct Index {
//@State：装饰器，表示组件的状态变量
//定义变量
//在struct内部创建的变量，是局部变量
@State message: string = 'Hello arkts';
//UI描述，以声明的方式来描述UI的结构
build() {
//布局方式：RelativeContainer（相对布局）- 子元素复杂的情况
// Column (线性布局) ： 表示子元素以垂直方向为对齐方式
// Row (线性布局)： 表示子元素以水平方向为对齐方式
RelativeContainer() {
//文本组件（系统内置组件）
//this.message: 通过this调用变量
//局部变量，必须要用this来调用
//全部变量不用this调用
Text(message)
.id('HelloWorld')
//字体大小（设置组件的属性）
.fontSize(50)
.fontWeight(FontWeight.Bold)
//组件的对齐规则
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
//事件方法
.onClick(()=>{
this.message = '鸿蒙应用开发'
})
}
.height('100%')
.width('100%')
}
} |
2.对象的创建和使用
//创建类
class Person{
//属性 - 成员变量
name: string = ''
age: number = 0
//构造方法
constructor(_name: string,_age: number) {
this.name = _name;
this.age = _age;
}
//方法
getInfo(){
console.log(this.name + "," + this.age)
}
}
@Entry
@Component
struct ObjectPage {
@State message: string = 'Hello World';
//创建对象
person: Person = new Person('鸿蒙',16);
build() {
RelativeContainer() {
//通过this调用对象的属性
Text(this.person.name)
.id('ObjectPageHelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
} |
3.类的继承
//创建父类
class Father{
name: string = '';
age: number = 0;
//构造方法
constructor(_name: string,_age: number) {
this.name = _name;
this.age = _age;
}
}
//创建子类
class son extends Father{
department: string = '';
constructor(_name: string,_age: number, _department: string) {
super(_name,_age);
this.department = _department;
}
}
@Entry
@Component
struct ExtendsPage {
@State message: string = 'Hello World';
build() {
RelativeContainer() {
Text(this.message)
.id('ExtendsPageHelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
} |
4.模块module
//创建类
//export关键字表示当前ets文件可以被其他文件引用
export class Person{
//属性 - 成员变量
name: string = ''
age: number = 0
//构造方法
constructor(_name: string,_age: number) {
this.name = _name;
this.age = _age;
}
//方法
getInfo(){
console.log(this.name + "," + this.age)
}
} |
//引入Person的ets文件
import {Person} from '../comm/Person'
// //创建类
// class Person{
// //属性 - 成员变量
// name: string = ''
// age: number = 0
//
// //构造方法
// constructor(_name: string,_age: number) {
// this.name = _name;
// this.age = _age;
// }
//
// //方法
// getInfo(){
// console.log(this.name + "," + this.age)
// }
// }
@Entry
@Component
struct ObjectPage {
@State message: string = 'Hello World';
//创建对象
person: Person = new Person('鸿蒙',16);
build() {
RelativeContainer() {
//通过this调用对象的属性
Text(this.person.name)
.id('ObjectPageHelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
} |
5.数据绑定装饰器 - @State
//创建全局变量，在struct外部创建变量，需要添加let/const修饰
let num: number = 1
let message: string = '河北邯郸'
//装饰器：用于装饰类、结构、方法和变量，并赋予特殊的含义。
//@Entry：装饰器，表示该自定义组件为入口组件，表示可以通过该组件显示页面
@Entry
//@Component：装饰器，表示该组件是自定义组件
@Component
//struct关键字：被@Component装饰后，具备组件化的能力
struct Index {
//@State：装饰器，表示组件的状态变量，能够让组件所在的UI界面刷新。
//定义变量
//在struct内部创建的变量，是局部变量
@State message: string = 'Hello arkTs';
//UI描述，以声明的方式来描述UI的结构
build() {
//布局方式：RelativeContainer（相对布局）- 子元素复杂的情况
// Column (线性布局) ： 表示子元素以垂直方向为对齐方式
// Row (线性布局)： 表示子元素以水平方向为对齐方式
RelativeContainer() {
//文本组件（系统内置组件）
//this.message: 通过this调用变量
//局部变量，必须要用this来调用
//全部变量不用this调用
Text(this.message)
.id('HelloWorld')
//字体大小（设置组件的属性）
.fontSize(50)
.fontWeight(FontWeight.Bold)
//组件的对齐规则
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
//事件方法
.onClick(()=>{
this.message = '鸿蒙应用开发'
})
}
.height('100%')
.width('100%')
}
} |
