HarmonyOS 快速入门TypeScript

这篇具有很好参考价值的文章主要介绍了HarmonyOS 快速入门TypeScript。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.什么是TypeScript,它和JavaScript,ArkTs有什么区别

ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript(简称TS)的基础上,匹配ArkUI框架,扩展了声明式UI、状态管理等相应的能力,让开发者以更简洁、更自然的方式开发跨端应用。要了解什么是ArkTS,我们首先要了解下ArkTS、TypeScript和JavaScript之间的关系:

  • JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
  • TypeScript 是 JavaScript 的一个超集,它扩展了 JavaScript 的语法,通过在JavaScript的基础上添加静态类型定义构建而成,是一个开源的编程语言。
  • ArkTS兼容TypeScript语言,拓展了声明式UI、状态管理、并发任务等能力。

由此可知,TypeScript是JavaScript的超集,ArkTS则是TypeScript的超集,他们的关系如下图所示:

HarmonyOS 快速入门TypeScript,鸿蒙HarmonyOS,typescript,javascript,前端,华为

简单来说,ArkTs扩展了TS,而TS在JS的基础也得到了扩展,经过了解,下面我们学习一下Type Script的基础语法

2.Type Script基础语法

基本类型

1.布尔类型boolean

let isDone:boolean = true

2.数字number

let n:number = 1

3.字符串string

let s:string = "string"

4.数组number[]或Array<number>

let arr :number[] = [1,2,3]
let list: Array<number> = [1,2,3,4,5]

5.元祖[number,string]

let tuple:[string,number] = ['name',12]

6.枚举 enum 

enum Color{
  Red,Green,Blue
}
let e:Color = Color.Red

7.unkown

let no:unknown = 4
no = false
no = "unkown"

8.void

function test():void{

}

9.undefine和null

let u:undefined = undefined

let emtry = null

10.联合类型,比如 let x = string|number ,x可以赋值为'str'和1

let b :string|number = 1
b = 'str'
b = 4

条件语句

1.if语句

let  x = 1

if(x==1){
  console.log("666")
}

2.if...else....语句

if(x==1){
  console.log('是1')
}else{
  console.log("不是1")
}

3.if...else if...if...语句

if(x==1){
  console.log('是1')
}else if(x==2){
  console.log("是2")
}else{
  console.log("不是1也不是2")
}

4.switch...case....语句(default,break)

switch (x){
  case 1:
    console.log("是1")
  break;
  case 2:
    console.log("是2")
  break;
  default :
    console.log("不是1也不是2")
  break;
}

函数

函数声明包含函数名,参数,返回类型

1.有名函数

function add(x:number,y:number):number{
   return x+y;
}

2.匿名函数

let n = function(x:number,y:number){
  return x+y;
};

3.函数的可选参数

我们在参数值后跟?,表示该参数是可选的,即传与不传都不影响函数的执行

function getInfo(firstName:string,lastName?:string){
  Console.log(getInfo)
}

4.函数的剩余参数

我们在参数值前跟...,表示该参数是一个剩余参数,即可以不传,也可以传多个

function printName(firstName:string,...lastName:string[]){

}

5.箭头函数

在ES6版本,Type Script 提供了箭头函数,即function可以被省略,以箭头的形式表示一个函数,还可以将整个代码块赋值给变量

let x =(firstName:string,lastName:string)=>{

//代码块
}

类是一种面向对象思想的编程用法,包含变量的声明,构造函数,以及普通函数的使用

1.类的基础用法

class Person{
  private name:string
  private age:number

  constructor(name:string,age:number) {
    this.name = name
    this.age = age
  }

  public getInfo():string{
    //return "name:"+this.name+",age:"+this.age;
	  return `name is ${this.name},age is ${this.age}`//反引号
  }
}

let p  = new Person("sun",14)

console.log(p.getInfo())

2.继承

class Employee extends  Person{
  
}

模块 

一个文件的B类想要访问另外一个文件的A类,在TS里需要使用export导出A类,在B类里通过import 导入进来

任何声明(比如变量,函数,类,类型别名或接口)都能够通过添加export关键字来导出

模块A

export class Person{

...

}

 模块B


import {Person} from '../../../../../entry/src/main/ets/entryability/Person'

class test{
    x = new Person("name",12)

    constructor() {
        
    }
}


 let test1 = new test();
 console.log(test1.x.getInfo());

模块 | TypeScript Handbook

迭代器

当一个对象实现Symbol.iterator属性时,我们认为它是可迭代的,一些内置的类型比如Array,Map,Set,String,Int32Array,UInt32Array都具有迭代性。

1.for...of...对值遍历

let arr =[1,2,3]

for(let x of arr){
  console.log(x.toString()) //1,2,3
}

2.for...in...对下标遍历

let arr =[1,2,3]

for (let arrKey in arr) {
  console.log(arrKey); //0,1,2
}

3.在线学习与运行

TypeScript 中文网

TypeScript 在线工具 | 菜鸟工具

TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript文章来源地址https://www.toymoban.com/news/detail-727983.html

到了这里,关于HarmonyOS 快速入门TypeScript的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 100天精通鸿蒙从入门到跳槽——第7天:TypeScript 知识储备:接口

    博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接 : 🔗 精选专栏 : 《面试题大全》 — 面试准备的宝典! 《IDEA开发秘籍》 — 提升你的IDEA技能! 《100天精通Golang》 — Go语言学习之旅! 《100天精通鸿蒙》 — 从Web/安卓到鸿蒙大师!

    2024年01月20日
    浏览(40)
  • TypeScript学习(一):快速入门

    TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 是添加了类型系统的 JavaScript,适用于任何规模的项目。 是一门静态类型、弱类型的语言。 完全兼容 JavaScript,且不会修

    2024年02月11日
    浏览(33)
  • 快速入门 TypeScript 基础

    TypeScript是一种静态类型的编程语言,它是JavaScript的超集,为JavaScript添加了静态类型检查和一些新的语言特性。下面是对TypeScript的小结: TypeScript提供了静态类型检查,可以在编译时捕获类型错误,减少运行时错误。 TypeScript可以提供更好的代码组织和维护性,特别适用于大

    2024年02月12日
    浏览(40)
  • TypeScript快速入门 - 类的使用

    1、类的声明         :class 2、类的继承         :extends 3、类与接口         :implments 4、抽象类         :abstract 5、类的成员变量修饰符         公开的:public         私有的:private         受保护的:protected         只读的:re

    2024年01月21日
    浏览(44)
  • 两小时快速入门 TypeScript 基础(二)面向对象

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,也会涉及到服务端(Node.js 等) 📃 个人状态: 2023届本科毕业生,已拿多个前端 offer(秋招) 🚀 未来打算: 为中国的工业软件事业效力 n 年 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/

    2024年02月12日
    浏览(35)
  • 两小时快速入门 TypeScript 基础(一)工作流、基本类型、高级类型

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,也会涉及到服务端(Node.js 等) 📃 个人状态: 2023届本科毕业生,已拿多个前端 offer(秋招) 🚀 未来打算: 为中国的工业软件事业效力 n 年 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/

    2024年02月11日
    浏览(43)
  • TypeScript学习笔记、鸿蒙开发学习笔记

    struct Index   自定义组件:可复用的UI单元 @Component    自定义组件 @Entry              当前组件是入口组件 @State              标记变量为状态变量,值变化会触发UI刷新  

    2024年02月02日
    浏览(44)
  • 【鸿蒙系统学习笔记】TypeScript开发语言

    HarmonyOS 应用的主要开发语言是 ArkTS,它由 TypeScript(简称TS)扩展而来,在继承TypeScript语法的基础上进行了一系列优化,使开发者能够以更简洁、更自然的方式开发应用。值得注意的是,TypeScript 本身也是由另一门语言 JavaScript 扩展而来。因此三者的关系如下图所示 2.1.1、线

    2024年02月19日
    浏览(42)
  • Typescript 5.0 发布:快速概览

    作为一种不断发展的编程语言,TypeScript 带来了大量的改进和新功能。在本文中,我们将深入探讨 TypeScript 的最新版本 5.0,并探索其最值得关注的更新。 TypeScript 5.0 引入了一个重新设计的装饰器系统,改进了类型检查和元数据生成。装饰器现在更加无缝地与类型系统配合,使

    2024年02月05日
    浏览(32)
  • TypeScript快速上手语法+结合vue3用法

            前言:             本篇内容不涉及TypeScript安装以及配置,具体安装及配置篇可以看下面目录,本篇只涉及TypeScript语法相关内容,及结合vue3的用法。不讲废话,简单直接直接开撸。 目录      TypeScript的具体安装及配置  TypeScript快速上手语法+结合vue3用法 1、

    2024年02月03日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包