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])
