Слияние кода завершено, страница обновится автоматически
ArkTS — это предпочтительный язык разработки приложений для OpenHarmony. Язык ArkTS расширяет экосистему TypeScript (сокращенно TS) и сохраняет её базовый стиль, одновременно усиливая статический анализ и проверку во время разработки за счёт определённых норм, что повышает стабильность и производительность выполняемых программ.
JavaScript — это объектно-ориентированный язык программирования, который широко используется для создания веб-приложений. TypeScript — это строго типизированный язык программирования, который расширяет возможности JavaScript, добавляя такие функции, как типизация, модули и декларативное программирование. ArkTS — это язык программирования, который расширяет экосистему TypeScript и добавляет специфические возможности для разработки приложений на платформе HarmonyOS.- JavaScript — это высокоуровневый скриптовый язык, предназначенный для работы в сети, который широко используется в разработке веб-приложений. Он часто применяется для добавления различных динамических функций на веб-страницы, что обеспечивает пользователям более плавное и эстетически приятное взаимодействие.
var, let и const, как и в ES6. Формат определения переменной выглядит так: var/let/const идентификатор: тип данных = значение;
var message2: string = 'сообщение';
let message3: string = 'сообщение';
const message1: string = 'сообщение';
let message: string = 'сообщение';
let num: number = 20;
let boo: boolean = true;
const arr: number[] = [1, 2, 3, 4, 5];
const arr1: Array<number> = [1, 2, 3, 4, 5]; // Array<number> - определение типа данных
const obj: {name: string; age: number} = {
name: "Иван",
age: 18
};
type objType = {
name: string,
age: number
};
const obj1: objType = {
name: "Иван",
age: 18
};
any. Когда вы не хотите, чтобы определенное значение вызывало ошибки проверки типов, вы можете использовать его.any — это очень специфический тип, предоставляемый TypeScript. Если вы впервые сталкиваетесь с механизмом проверки типов или только начинаете работать с TypeScript, и вам незнаком синтаксис определения типов, вы можете временно использовать any вместо конкретного типа. Однако использование any не рекомендуется, так как это делает проверку типов бессмысленной.any по умолчанию.any, она может принимать значения любого типа, то есть почти любой тип будет допустимым.### Базовое использованиеlet str: any = "123";
let num: any = 123;
let boo: any = true;
let arr: any = [0, 1, 2];
let obj: any = {
name: "张三",
age: 18,
};
Это простой пример использования TypeScript для написания функции, которая выполняет вычисление. В данном случае list: Array<number> — это параметр типа, который представляет собой массив чисел, а возвращаемое значение должно быть числом.
function funAndCalculation(list: Array<number>): number {
let count = 0;
list.forEach((item) => {
count += item;
});
return count;
}
console.log(funAndCalculation([1, 2, 3]));
number, либо string. В этом случае вы можете использовать оператор | для объединения типов.function getUserInfo(id: number | string) {
console.log(id);
}
getUserInfo("123");
getUserInfo(123);
toUpperCase() не существует.function getUserInfo(id: number | string) {
console.log(id.toUpperCase());
}
getUserInfo("1");
name: "张三"
```- Решение: Механизм уменьшения типа (более подробно будет рассмотрено позже), где мы используем `typeof` для проверки типа переданного параметра и выполняем соответствующие действия.```js
function getUserInfo(id: number | string) {
if (typeof id === 'string') {
console.log(id.toUpperCase());
} else {
console.log(id);
}
}``````js
getUserInfo('a')
getUserInfo(1)
function printPoint(point: {x: number, y: number, z?: number}) {
console.log(point.x)
console.log(point.y)
console.log(point.z)
}
printPoint({x: 123, y: 321})
printPoint({x: 123, y: 321, z: 111})
// message? -> undefined | string
function printMessageLength(message?: string) {
console.log(message!.length)
}
printMessageLength("aaaa")
printMessageLength("hello world")
string и number, мы можем использовать конкретные строки и числа в качестве типов."Hello World" может быть использован как тип. Этот тип называется литеральным типом. Официально: сам по себе литеральный тип не очень ценен.const message: "Hello World" = "Hello World"
let num: 123 = 123
// num = 321 // Ошибка: невозможно присвоить тип "321" типу "123"
// Литеральные типы имеют смысл при использовании вместе с объединенными типами
type Alignment = 'left' | 'right' | 'center'
let align: Alignment = 'left'
align = 'right'
align = 'center'
// align = 'Hellow' // Ошибка: невозможно присвоить тип "Hellow" типу 'left' | 'right' | 'center'
handleRequest() принимает два параметра: строку url и объединённый тип GET | POST для method. Однако даже если мы передаём GET, TypeScript всё равно выдаёт ошибку, так как он считает тип req.method равным string, что не соответствует требуемому типу handleRequest.const req = { url: "https://example.com", method: "GET" };
handleRequest(req.url, req.method);
function handleRequest(url: string, method: "GET" | "POST") {
console.log('object :>> ', url, method);
}
Решение 1: Использование типа as "GET | POST"
const req = { url: "https://example.com", method: "GET" as "GET | POST" };
handleRequest(req.url, req.method);
function handleRequest(url: string, method: "GET | POST") {
console.log('object :>> ', url, method);
}
Решение 2: Использование типа as const
const req = { url: "https://example.com", method: "GET" } as const;
handleRequest(req.url, req.method);
function handleRequest(url: string, method: "GET | POST") {
console.log('object :>> ', url, method);
}
as
document.getElementById, TypeScript знает, что этот метод вернёт объект типа HTMLElement, но не знает его конкретного типа.const el = document.getElementById("why") as HTMLImageElement;
el.src = "url адрес";
const name = "Hello World" as number; // это вызовет ошибку
const name = ("Hello World" as unknown) as number; // это будет работать
Сверху вниз описывается роль каждого из папок.
.hvigor: хранит конфигурационные данные сборки.
.idea: хранит конфигурационные данные проекта.
AppScope: содержит общие ресурсы проекта.
entry: основной модуль HarmonyOS проекта, который после компиляции создаёт HAP пакет. HAP файлы также находятся здесь.
hvigor: конфигурационные данные сборки, это новый инструмент для управления задачами сборки, реализованный на TypeScript. Он сочетается с npm менеджером пакетов и предоставляет механизмы управления задачами, регистрации задач, моделирования проектов, управления конфигурациями и другими ключевыми возможностями, которые лучше всего подходят для разработчиков ArkTS/JS.
oh_modules: используется для хранения информации о зависимостях сторонних библиотек..gitignore: конфигурация фильтрации для git.
build-profile.json5: конфигурационные данные приложения, включая информацию о подписях и конфигурации продуктов.
hvikorfile.ts: скрипт задач сборки приложения.
hvikorw и hvikorw.bat: инструменты сборки ohpm.
local.properties: файл, содержащий локальные свойства.
oh-package.json5: конфигурация зависимостей, где можно указать зависимости сторонних пакетов.
Задача: указывает входной компонент, который является точкой входа для компонента. Каждый компонент может иметь только один входной компонент.
Пример: по умолчанию созданный проект содержит @Entry.
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
Задача: указывает, что текущий struct является компонентом, который можно использовать отдельно или экспортировать для использования другими компонентами.
Пример: использование import/export для экспорта и импорта компонента.
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
}
Задача: предоставляет быстрый способ просмотра отдельных страниц или компонентов с помощью предварительного просмотра DevEco.Использование:
@Preview
@Entry // Использование @Preview делает @Entry необязательным
@Component
struct TaskPage {
// ...
}
Задача: используется в примерах новостной рассылки, где NewsViewModel работает вместе с декоратором @ObjectLink, чтобы связать несколько компонентов.
Использование:
@Observed
export class CustomRefreshLoadLayoutClass {
/**
* Custom refresh load layout isVisible.
*/
isVisible: boolean;
/**
* Custom refresh load layout imageSrc.
*/
imageSrc: Resource;
/**
* Custom refresh load layout textValue.
*/
textValue: Resource;
/**
* Custom refresh load layout heightValue.
*/
heightValue: number;
}
Цель: используется для управления состоянием внутри компонента. Переменные, помеченные этим декоратором, вызывают обновление ArkUI при изменении значений.
Пример:
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Column() {
Text(this.message) // В HarmonOS концепция "this" не отвергается!
// ...
}
// ...
}
}
Цель: односторонняя синхронизация состояния от родительского компонента к дочернему компоненту.
TODO: пока в реальном проекте не встречался, если встретится — обновлю
Цель: двусторонняя синхронизация состояния между родительским и дочерним компонентами.
Использование:
Родительский компонент
// ...
@Preview
@Component
export default struct TabBar {
@State tabBarArray: NewsTypeBean[] = NewsViewModel.getDefaultTypeList();
@State currentIndex: number = 0; // Определение переменной состояния
@State currentPage: number = 1;
}
``````md
// Определение слушательской функции
changeCategory() {
this.newsModel.currentPage = 1;
NewsViewModel.getNewsList(this.newsModel.currentPage, this.newsModel.pageSize, Const.GET_NEWS_LIST)
.then((data: NewsData[]) => {
this.newsModel.pageState = PageState.Success;
if (data.length === this.newsModel.pageSize) {
this.newsModel.currentPage++;
this.newsModel.hasMore = true;
} else {
this.newsModel.hasMore = false;
}
this.newsModel.newsData = data;
})
.catch((err: string | Resource) => {
promptAction.showToast({
message: err,
duration: Const.ANIMATION_DURATION
});
this.newsModel.pageState = PageState.Fail;
});
}
aboutToAppear() {
// Запрос данных новостей
this.changeCategory();
}
Используется вместе с @Link, чтобы слушать изменения состояния.
Пример использования: см. предыдущий пример.
Задача: для межкомпонентной связи, позволяет модифицировать переменные в родительских компонентах.
Задача: для межкомпонентной связи, позволяет модифицировать переменные в дочерних компонентах.
```Используется вместе с классами, отмеченными @Observed, для конкретных действий, которые ещё предстоит изучить.
TODO: пока не понимаем конкретных действий, нет подходящих примеров, поэтому временно не предоставляем.
Использование декораторов для функций позволяет нам выделить избыточные стили и повторяющиеся логические конструкции, что снижает сложность кода.
Задача: используется для декорирования функций, чтобы быстро создавать контент разметки, избегая написания повторяющихся стилей. Можно создать переиспользуемый компонент со стилями.
Пример:
@Component
export default struct TodoItem {
@State isComplete: boolean = false;
@Builder labelIcon(url) {
Image(url)
.objectFit(ImageFit.Contain)
.width(24)
.height(24)
.margin({
right: 15,
top: 5
})
}
build() {
Row() {
if (this.isComplete) {
this.labelIcon($r("app.media.select"))
} else {
this.labelIcon($r("app.media.unselect"))
}
// ..
}
}
}
Задача: используется для декорирования функций, чтобы сохранять стили и предоставлять их компонентам.
Синтаксис:
// Общие стили для карточки
@Styles function card() {
.width('95%')
.padding(20)
.backgroundColor(0xffffff)
.borderRadius(15)
.shadow({ radius: 6, color: 0x1F000000, offsetX: 2, offsetY: 4})
}
Задача: наследует встроенный компонент и позволяет разработчику расширять его другими часто используемыми свойствами.
Синтаксис:```js @Extend(Text) function finishedTask() { .decoration({ type: TextDecorationType.LineThrough }) .fontColor(0xB1B2B1) }
Пример:
```js
// ...
Row() {
Text(item.name)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.finishedTask()
}
// ...
// Этот код должен быть вне структуры файла
@Extend(Text) function finishedTask() {
.decoration({ type: TextDecorationType.LineThrough })
.fontColor(0xB1B2B1)
}
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )