鸿蒙开发 TypeScript 基础语法

news/2024/4/27 17:30:07/文章来源:https://blog.csdn.net/2301_81915581/article/details/137086796

文章的最下面有官网链接可以进行练习!

变量声明

TypeScript 在 JavaScript 的基础上加入了静态类型检查功能,因此每一个变量都有固定的数据类型

let:声明变量的关键字,const则代表常量

示例代码:

// string:字符串,可以用单引号或双引号
let msg: string = 'hello world'
// number:数值,整数、浮点数都可以
let age: number = 21
// boolean:布尔
let finished: boolean = true
// any:不确定类型,可以是任意类型
let a:any = 'jack'
a = 21
// uniton:联合类型,可以是多个指定类型中的一种
let u: string|number|boolean = 'rose'
u = 18
// Object:对象
let p = {name: 'Jack', age: 21}
console.log(p.name)
console.log(p['name'])
// Array:数组,元素可以是任意其他类型
let names: Array<string> = ['Jack', 'Rose']
let ages: number[] = [21,18]
console.log(names[0])

条件控制

TypeScript 与大多数开发语言类似,支持基于 if - else 和 switch 的条件控制

if - else 示例代码

// 定义数字
let num:number = 21
// 判断是否是偶数
if(num % 2 === 0) {console.log(num + '是偶数')
} else {console.log(num + '是奇数')
}
// 判断是否是正数
if(num > 0) {console.log(num + '是正数')
} else if(num < 0){console.log(num + '是负数')
} else {console.log(num + '为0')
}

switch 示例代码

let grade: string = 'A'
switch (grade) {case 'A': {console.log('优秀')break}case 'B': {console.log('合格')breka}case 'C': {console.log('不合格')breka}default: {console.log('非法输入')break}
}

循环迭代

TypeScript 支持 for 和 while 循环,并且为一些内置类型如 Array 等提供了快捷迭代语法

 普通循序

// 普通 for
for(let i = 1; i <= 10; i++){console.log('点赞' + i + '次')
}
// while
let i = 1;
while(i <= 10){console.log('点赞' + i + '次')i++;
}

for 迭代器

// 定义数组
let names: string[] = ['Jack', 'Rose']
// for in 迭代器,遍历得到数组角标
for (const i in names) {console.log(i + ':' + names[i])
}
// for of 迭代器,直接得到元素
for (const name of names) {console.log(name)
}

函数

TypeScript 通常利用 function 关键字声明函数,并且支持可选参数、默认参数、箭头函数等特殊语法

定义函数

// 无返回值函数,返回值 void 可以省略
function sayHello(name: stirng): void{console.log('你好,' + name + '!')
}
sayHello('Jack')
// 有返回值函数
function sum(x: number,y: number): number {return x + y
}
let result = sum(21,18)
console.log('21 + 18 =' + result)
// 箭头函数
let sayHi = (name: string) =>{console.log('你好,' + name + "!")
}
sayHi('Rose')

函数 - 可选参数

// 可选参数,在参数名后加 ?,表示该参数是可选的
function sayHello(name?: stirng){// 判断 name 是否有值,如果无值则给一个默认值name = name ? name : '陌生人'console.log('你好,' + name + '!')
}
sayHello('Jack')
sayHello()

函数 - 参数默认值

// 参数默认值,在参数后面赋值,表示参数默认值
// 如果调用者没有传参,则使用默认值
function sayHello(naem: string = '陌生人'){console.log('你好,' + name + ':')
}
sayHello('Jack')
sayHello()

类和接口

TypeScript 具备面向对象编程的基本语法,例如 interface、class、enum 等;也具备封装、继承、多态等面向对象基本特征

类、接口、枚举

// 定义枚举
enum Msg{HI = 'Hi',HELLO = 'Hello'
}
// 定义接口,抽象方法接收枚举参数
interface A {say(msg: Msg):void
}
// 实现接口
class B implements A {say(msg: Msg): void {console.log(msg + ',I am B')}
}
// 初始化对象
let a:A = new B()
// 调用方法,传递枚举参数
a.say(Msg.HI)

继承

// 定义矩形类
class Rectangle {// 成员变量private width: numberprivate length: number// 构造函数constructor(width: number, length: number) {this.width = widththis.length = length}// 成员方法public area(): nuber{return this.width * this.length}
}
// 定义正方形
class Square extends Rectangle{constructor(side: number) {// 调用父类构造super(side, side)}
}let s =new Square(10)
console.log('正方形面积为:' + s.area())

模块开发

应用复杂时,我们可以把通用功能抽取到单独的ts文件中,每个文件都是一个模块(module);模块可以相互加载,提供代码复用性

rectangle.ts

// 定义矩形类,并通过 export 导出
export class Rectangle {// 成员变量public width: numberpublic length: number// 构造函数constructor(width: number, length: number) {this.width = widththis.length = length}
}
// 定义工具方法,求矩形面积,并通过 export 导出
export function area(rec: Rectangle): number{return rec.width * rec.length
}

index.ts

// 通过 import 语法导入,from 后面写文件的地址
import {Rectangle, area} from './rectangle'
// 创建 Rectangle 对象
let r = new Rectangle(10, 20)
// 调用 area 方法
console.log('面积为:' + area(r))

我们可以通过链接进入官网:TypeScript: TS Playground - 用于探索 TypeScript 和 JavaScript 的在线编辑器 (typescriptlang.org) 进行练习 

如想了解更多 TypeScript 语言可以通过官网:TypeScript: The starting point for learning TypeScript (typescriptlang.org)了解更多

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1026455.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二叉树|654.最大二叉树

力扣题目地址 class Solution { public:TreeNode* constructMaximumBinaryTree(vector<int>& nums) {TreeNode* node new TreeNode(0);if (nums.size() 1) {node->val nums[0];return node;}// 找到数组中最大的值和对应的下标int maxValue 0;int maxValueIn…

Kubernetes生产集群部署指南

部署生产就绪的Kubernetes集群需要考虑到管理、负载均衡、安全、存储等很多细节&#xff0c;本文给出了一个生产就绪Kubernetes集群的完整部署流程&#xff0c;可以作为生产部署的有效参考。原文: Deploying a Production Kubernetes Cluster in 2023 — A Complete Guide Grow…

万兆车载以太网转换器 10G/2.5G多速车载以太网转换器-MC10GM

MC10GM转换器 一、产品简要分析 2.5G,5G,10G可切换万兆/多速车载以太网转换器。采用罗森博格H-MTD标准接口类型。实现将车载以太网标准2.5/5/10G BASE-T1转换为工业级2.5/5/10G 标准以太网&#xff0c;进而接入电脑或工控机. 产品实现2.5/5/10G Base-T1 和2.5/5/10G Base-R之间…

android Fragment 生命周期 方法调用顺序

文章目录 Introlog 及结论代码 Intro 界面设计&#xff1a;点击左侧按钮&#xff0c;会将右侧 青色的RightFragment 替换成 黄色的AnotherRightFragment&#xff0c;而这两个 Fragment 的生命周期方法都会打印日志。 所以只要看执行结果中的日志&#xff0c;就可以知道 Fragme…

CSS时钟案例

文章目录 1. 演示效果2. 分析思路3. 代码实现 1. 演示效果 2. 分析思路 背景是表盘&#xff0c;不用自己制作然后用CSS的定位做时针&#xff0c;分针和秒针黑点用伪元素::after生成转动用animation实现 3. 代码实现 <!DOCTYPE html> <html lang"en">&…

【详细讲解React 快速入门教程】

&#x1f525;博主&#xff1a;程序员不想YY啊&#x1f525; &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家&#x1f4ab; &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 &#x1f308;希望本文对您有所裨益&#xff0c;如有…

Python中的变量与常量

变量&#xff1a;在程序运行过程中&#xff0c;值会发生变化的量&#xff0c; 常量&#xff1a;在程序运行过程中&#xff0c;值不会发生变化的量。 无论是变量还是常量&#xff0c;在创建时都会在内存中开辟一块空间&#xff0c;用于保存它的值。 Python 中的变量不需要声明…

数据链路层协议之以太网协议

以太网协议是通过网线/光纤进行通信。这和通过wifi&#xff08;无线&#xff09;&#xff0c;通过移动流量&#xff08;4G/5G&#xff09;通信不一样。以太网&#xff0c;横跨数据链路层和物理层 一.以太网数据帧格式 包括了帧头载荷(IP数据报)帧尾。 1.目的地址 源地址 分别…

初探Flink集群【持续更新】

周末下雨&#xff0c;倒杯茶&#xff0c;在家练习Flink相关。 开发工具&#xff1a;IntelliJ Idea 第一步、创建项目 打开Idea&#xff0c;新建Maven项目&#xff0c;包和项目命名 在pom.xml 文件中添加依赖 <properties><flink.version>1.13.0</flink.vers…

【Redis主从架构。主从工作原理psync、bgsave、部分数据复制、主从复制风暴解决方案】【Redis哨兵高可用架构。sentinel】

Redis主从架构 Redis主从工作原理数据部分复制 Redis哨兵高可用架构client连接哨兵规则主节点挂了&#xff0c;集群从新选择主节点&#xff0c;并且同步给sentinel 转自图灵课堂 redis主从架构搭建&#xff0c;配置从节点步骤&#xff1a; 1、复制一份redis.conf文件2、将相关…

六大原则与设计模式

1. 六大原则 1.1 单一原则&#xff08;SRP&#xff09; 应该有且仅有一个原因引起类的变更 1. 复杂性降低&#xff0c;可读性高&#xff0c;可维护性提高 2. 变更引起的风险降低&#xff0c;变更是必不可少的&#xff0c;如果接口的单一职责做得好&#xff0c;一个接口修改…

基于单片机多功能智能台灯设计

**单片机设计介绍&#xff0c;基于单片机多功能智能台灯设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的多功能智能台灯设计是一个集硬件与软件于一体的综合性项目&#xff0c;旨在为用户提供更加便捷、舒适和节…

如何借用 NTFS 交换数据流 实现隐藏文件?如何使用【文件包含】PHP伪协议?不同操作系统如何实现文件隐藏和木马伪装?

如何借用 NTFS 交换数据流 实现隐藏文件?如何使用【文件包含】PHP伪协议?不同操作系统如何实现文件隐藏和木马伪装? NTFS交换数据流(Alternate Data Streams, ADS)是NTFS文件系统特有的一种功能,它允许在同一个文件名下存储多个数据流。除了默认的数据流(通常用于存储文…

day3-QT

1>使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函。将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是…

Java SPI 机制

SPI 机制的定义 在Java中&#xff0c;SPI&#xff08;Service Provider Interface&#xff09;机制是一种用于实现软件组件之间松耦合的方式。它允许在应用程序中定义服务接口&#xff0c;并通过在类路径中发现和加载提供该服务的实现来扩展应用程序功能。 SPI 机制通常涉及三…

DBA工作经验总结

目录 一、MySQL8.0创建一张规范的表 1.表、字段全采用小写 2.int类型不再加上最大显示宽度 3.每张表必须显式定义自增int类型的主键 4.建表时增加comment来描述字段和表的含义&#xff08;防止以后忘记&#xff09; 5.建议包含create_time和update_time字段 6.核心业务增…

asp程序之“会话Cookie中缺少HttpOnly属性”

先在URL重新模块添加服务器变量&#xff1a; 添加变量名&#xff1a;Add HttpOnly 网站根目录web.config添加如下规则&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <configuration><system.webServer><rewrite><out…

第1篇:Mysql数据库表结构导出字段到Excel(一个sheet中)

package com.xx.util;import org.apache.poi.ss.usermodel.*; import org.apache.poi.xssf.usermodel.XSSFWorkbook;import java.sql.*; import java.io.*;public class DatabaseToExcel {public static void main(String[] args) throws Exception {// 数据库连接配置String u…

SQLyog图形化工具安装教程

日常开发中&#xff0c;当需要输入的命令较长时&#xff0c;使用命令行客户端工具输入命令很不方便&#xff0c;此时可以使用相对方便的图形化管理工具来操作MySQL&#xff0c;从而提高效率。 SQLyog的特点 1.基于MySQL程序接口开发 2.方便快捷的数据库同步与数据库结构同步 …

【检索稳定|火爆征稿中】2024年企业管理与数字化经济国际学术会议(ICBMDE 2024)

【检索稳定|火爆征稿中】2024年企业管理与数字化经济国际学术会议&#xff08;ICBMDE 2024&#xff09; 2024 International Conference on Business Management and Digital Economy&#xff08;ICBMDE 2024&#xff09; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~…