鸿蒙App开发学习 - TypeScript编程语言全面开发教程（上）(1)

最新推荐文章于 2024-08-07 17:03:08 发布

不爱吃榴莲.

最新推荐文章于 2024-08-07 17:03:08 发布

阅读量1k

点赞数 24

分类专栏： 2024年程序员学习文章标签： harmonyos 学习 typescript

本文链接：https://blog.csdn.net/m0_59117112/article/details/137632472

版权

2024年程序员学习专栏收录该内容

237 篇文章 2 订阅

订阅专栏

function infiniteLoop(): never {
while (true) {
}
}

类型之间可以进行推断, 类似于 Java/C# 类型转换:

let someValue: any = “this is a string”;
// 强制
let strLength: number = (someValue).length;
// as
let strLength: number = (someValue as string).length;

2. 程序声明

TypeScript语言的程序结构包含:

变量声明 : var a = 10;
函数声明 : funtion name(){}

2.1变量声明

变量声明可以使用 var 和 let, 两种声明有一些重要的区别：

1.作用域：
2.var 声明的作用域是函数作用域或全局作用域。在函数内部声明的 var 变量在函数外部仍然是可访问的，这种行为被称为变量提升（hoisting）。
3.let 声明的作用域是块级作用域（例如 {} 内部）。在块级作用域外部无法访问块级作用域内的 let 变量，而且不存在变量提升。
4.重复声明：
5.使用 var 可以重复声明同一个变量，不会报错，而且后面的声明会覆盖前面的声明。
6.使用 let 声明同一个变量如果在同一个作用域内重复声明，会报错 SyntaxError。
7.变量提升：
8.使用 var 声明的变量会被提升到其所在作用域的顶部，即使在变量声明之前使用变量也不会报错，但其值为 undefined。
9.使用 let 声明的变量不会被提升，如果在变量声明之前使用变量会报错 ReferenceError。
10.全局对象属性：
11.使用 var 声明的变量会成为全局对象的属性，例如 window 对象（浏览器环境）。
12.使用 let 声明的变量不会成为全局对象的属性。

总的来说，推荐使用 let 来声明变量，因为它更安全、更符合块级作用域的使用方式，而且可以避免一些意外的行为。

2.2 函数声明

函数按照名称, 参数和返回值分为:

有名函数和匿名函数
无参函数和有参函数
无返回值和有返回值

有名函数与无名函数

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

可选参数和默认参数

//固定参数
function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName(“Bob”); // error, too few parameters
let result2 = buildName(“Bob”, “Adams”, “Sr.”); // error, too many parameters
let result3 = buildName(“Bob”, “Adams”); // ah, just right
//可选参数
function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName(“Bob”); // works correctly now
let result2 = buildName(“Bob”, “Adams”, “Sr.”); // error, too many parameters
let result3 = buildName(“Bob”, “Adams”); // ah, just right
//默认参数
function buildName(firstName: string, lastName = “Smith”) {
return firstName + " " + lastName;
}
let result1 = buildName(“Bob”); // works correctly now, returns “Bob Smith”
let result2 = buildName(“Bob”, undefined); // still works, also returns “Bob Smith”
let result3 = buildName(“Bob”, “Adams”, “Sr.”); // error, too many parameters
let result4 = buildName(“Bob”, “Adams”); // ah, just right

可变参数

function buildName(firstName: string, …restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName(“Joseph”, “Samuel”, “Lucas”, “MacKinzie”);

2.3 控制语句

TypeScript 中常用的控制语句与 JavaScript 中的类似，主要包括以下几种：

1.条件语句（Conditional Statements）：

if 语句：根据条件执行不同的代码块。
else if 语句：在 if 条件不满足时执行新的条件判断。
else 语句：在所有条件都不满足时执行的代码块。

let num: number = 10;
if (num > 0) { console.log(“Positive”); } else if (num < 0) { console.log(“Negative”); } else { console.log(“Zero”); }

2.循环语句（Loop Statements）：

for (let i = 0; i < 5; i++) {
console.log(i);
}
let j = 0;
while (j < 5) {
console.log(j);
j++;
}
let k = 0;
do {
console.log(k);
k++;
} while (k < 5);

for 循环：重复执行指定次数的代码块。
while 循环：在指定条件为真时重复执行代码块。
do…while 循环：先执行一次代码块，然后在指定条件为真时重复执行代码块。

switch 语句：根据表达式的值选择执行不同的代码块。

let fruit: string = “apple”;

switch (fruit) {
case “apple”:
console.log(“Apple”);
break;
case “banana”:
console.log(“Banana”);
break;
default:
console.log(“Unknown fruit”);
}

4.break 和 continue 语句：在循环中控制循环的执行流程。

break 语句用于立即退出循环。
continue 语句用于跳过当前循环的剩余代码，直接进入下一次循环的迭代。

5.for…of 语句：

let colors: string[] = [“red”, “green”, “blue”];
for (let color of colors) {
console.log(color);
}

用于遍历可迭代对象（如数组、集合等）的元素。
提供了一种简洁的方式来迭代对象的元素。

6.for…in 语句：

let obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
console.log(key); // 输出 “a”, “b”, “c”
console.log(obj[key]); // 输出 1, 2, 3
}

用于遍历对象的可枚举属性。
迭代对象的所有可枚举属性名称，包括原型链上的属性。

for…of和for…in均可迭代一个列表；但是用于迭代的值却不同：

for…in迭代的是对象的键的列表
for…of则迭代对象的键对应的值。

3. 面相对象

和别的面相对象语言一样, TypeScript：

类、接口、泛型
使用 extends 继承类
使用 implement 实现接口

3.1 修饰符

TypeScript也有相应的修饰符：

1.public：

默认的修饰符，如果没有显式地指定修饰符，默认为 public。
可以被类的实例访问，也可以被子类继承。

2.private：

私有成员，只能在定义它们的类内部访问。
不能在类的外部或子类中访问。

3.protected：

受保护的成员，可以在定义它们的类内部和该类的子类中访问。
不能在类的外部访问。

4.readonly：

只读成员，表示该属性只能在声明时或构造函数中被赋值，之后无法修改。
类似于常量，但是只对属性起作用。

3.2 Object

在 TypeScript 中，Object 是 JavaScript 中的原生对象类型，表示一个普通的 JavaScript 对象。在 TypeScript 中，Object 类型可以用来表示任意的 JavaScript 对象，它是所有对象的顶级类型。在 TypeScript 中，Object 类型可以作为任何类型的超类型，因此可以将任何值分配给 Object 类型的变量。

创建对象

let obj: Object = {};

这里我们声明了一个类型为 Object 的变量 obj，并初始化为一个空对象。这样做的好处是，obj 可以引用任何类型的对象。

对象方法

Object 类型具有许多内置的方法，可以对对象进行操作。例如：

Object.keys(obj)：返回一个数组，包含对象的所有可枚举属性的名称。
Object.values(obj)：返回一个数组，包含对象的所有可枚举属性的值。
Object.entries(obj)：返回一个数组，包含对象的所有可枚举属性的键值对。
Object.assign(target, …sources)：将一个或多个源对象的所有可枚举属性复制到目标对象，并返回目标对象。

let obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // 输出 [“a”, “b”, “c”]
console.log(Object.values(obj)); // 输出 [1, 2, 3]
console.log(Object.entries(obj)); // 输出 [[“a”, 1], [“b”, 2], [“c”, 3]]

扩展对象

可以使用对象展开运算符 … 来扩展对象。

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let mergedObj = { …obj1, …obj2 };
console.log(mergedObj); // 输出 { a: 1, b: 2, c: 3, d: 4 }

在 TypeScript 中，Object 类型通常用于表示任意的 JavaScript 对象，并且提供了一些内置的方法来操作对象。但需要注意的是，Object 类型并不包括 JavaScript 中一些特殊的对象类型，比如数组、函数、正则表达式等。

3.3 类,接口定义与实现

具体以下面代码为例:

interface PersonInfo {
name: string;
age: number;
gender: string;
id: number;
introduce(): void; // 增加一个行为函数定义
}
class Person implements PersonInfo {
public name: string;
private age: number;
protected gender: string;
readonly id: number;
constructor(name: string, age: number, gender: string, id: number) {
this.name = name;
this.age = age;
this.gender = gender;
this.id = id;
}
introduce() {
console.log(Hello, my name is ${this.name}. I am ${this.age} years old.);
}
}
class Employee extends Person {
constructor(name: string, age: number, gender: string, id: number) {
super(name, age, gender, id);
}
showInformation() {
console.log(Name: ${this.name}, Gender: ${this.gender});
}
}
const personInfo: PersonInfo = {
name: “Alice”,
age: 30,
gender: “female”,
id: 12345,