typeScript 使用 Promise 进行网络请求
new Promise<string>((resolve, reject) => {
// ... 异步操作 ...
if (/* 某些条件满足 */) {
resolve('加载成功');
} else {
reject('加载失败');
}
}).then((result) => {
// 这里是接收 resolve 传递的结果的地方
console.log(result); // 输出: 加载成功
}).catch((error) => {
// 这里是接收 reject 传递的错误的地方
console.error(error);
});
如果你声明了一个属性但没有提供初始值，并且这个属性不是可选的（没有用问号标记），那么编译器会要求你在构造函数中对这个属性进行赋值，以确保该属性在对象创建时就有一个确定的值。
export struct ArticleItemComponent {
article: Article = new Article();
onCollectClick?: (article: Article) => void;
或者 onCollectClick: (article: Article) => void = () => {};
}
typescript里面的可选参数和带初始值的参数
这是可选参数的写法
可选参数通过在参数名后添加问号?来定义，这意味着在调用函数时这个参数是可选的，可以省略。可选参数必须位于所有必选参数之后。
function greet(name?: string) {
if (name) {
console.log(`Hello, ${name}!`);
} else {
console.log('Hello, stranger!');
}
}
greet('Alice'); // Hello, Alice!
greet(); // Hello, stranger!
参数默认值
function greet(name = 'stranger') {
console.log(`Hello, ${name}!`);
}
greet('Bob'); // Hello, Bob!
greet(); // Hello, stranger!
typeScript 箭头函数的作用有两个：
1、typescript语言 在函数类型声明中，=>用来分隔参数列表和返回类型。
// => 符号确实用于分隔函数的参数列表和返回类型
// 声明一个函数类型AddFunction，它接受两个数字作为参数，并返回一个数字
type AddFunction = (a: number, b: number) => number;
2、箭头函数
// 定义一个符合AddFunction类型的函数
const add: AddFunction = (a, b) => a + b;
使用 type 关键字定义函数类型别名
type AddFunction = (a: number, b: number) => number;
// 调用函数
console.log(add(2,3)+""); // 输出: 5
3、定义接口约定对象的特征和行为
//1、通过interface约定 对象结构类型（特征和行为）
interface Person{
name:string,
age:number,
weight:number,
sing:(name:string) => void,
dance:() =>void
}
//2、基于接口 定义对象并使用
let ym:Person = {
name:'杨幂',
age:18,
weight:90,
sing:(name:string)=>{
LogUtils.debug('123','杨幂唱首歌:'+name);
},
dance:()=>{
LogUtils.debug('123','杨幂跳支舞')
}
}
4、扩展运算符 (...)：扩展运算符可以用来展开数组或类数组对象的元素。在数组字面量中，它可以用来合并多个数组。
let dataList = [1, 2, 3];
let result = [4, 5, 6];
dataList = [...dataList, ...result]; // 合并数组
console.log(dataList); // 输出: [1, 2, 3, 4, 5, 6]
//3、获取对象的属性值
LogUtils.debug('123',`${ym.name},${ym.age}`)
LogUtils.debug('123',`${ym.sing('爱的供养')},${ym.dance()}`)
4.联合类型：变量可以存储多种类型的数据
let judge:number | string = '100'
let sex:'man'|'woman'|'secret'
sex = 'man'
5.布局方式
6.总是居中的bug
Row{}.alignItems(VerticalAlign.Top)
Colomn{}.alignItems(HorizontalAlign.Start)
7、list底部显示不全
在list的父布局添加 .layoutWeight(1)
8、组件课件和不可见
这个类似安卓的onResume 和 onPause，每个组件都有：
.onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
if (isVisible && currentRatio >= 1.0) {
[console.info](http://console.info)('tag_99 页面显示. currentRatio:' + currentRatio)
}
if (!isVisible && currentRatio <= 0.0) {
[console.info](http://console.info)('tag_99 页面暂停.')
}
})
9.放大组件的点击区域
放大到160%
Image(this.menuIcon)
.width(25)
.responseRegion({
x: '-30%',
y: '-30%',
width: '160%',
height: '160%'
})
.margin({ right: 20 })
.objectFit(ImageFit.Fill)
.onClick(() => {
if (this.onMenuClick) {
this.onMenuClick();
}
})
10、实现.9图
backgroundImageResizable 这个组件的属性，可以实现安卓.9.png 的效果，非常好用
官方处理.9.png的方法：
https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-208-V5
11、超出父布局裁剪
clip组件 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V14/ts-universal-attributes-sharp-clipping-V14?catalogVersion=V14
12、全面屏
**设置全面的三种方式：**
- 1.windowClass.setWindowLayoutFullScreen(true)
- 2.offset({x: 0,y: -30})
- 3..expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
