【HormonyOS4+NEXT】TypeScript基础语法详解

news2024/12/23 22:14:54

在这里插入图片描述

🙋‍ 一日之际在于晨
⭐本期内容：TypeScript基础语法详解
🏆系列专栏：鸿蒙HarmonyOS4+NEXT：探索未来智能生态新纪元

文章目录

前言
变量与类型
函数
类与接口
- 类（Class）
- 接口（Interface）
- 函数与接口的使用
- 对象的创建与函数的使用
泛型
总结

前言

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集，添加了静态类型、类、接口和泛型等特性。这些特性使得TypeScript在大型项目中具有更好的可维护性和可扩展性。本文将对TypeScript的基础语法进行详细讲解，帮助读者快速入门。

变量与类型

TypeScript的核心特性之一就是静态类型系统。这意味着在声明变量时，我们可以为其指定一个类型，这样TypeScript编译器就可以在编译时检查类型错误。

例如：let msg:string=‘hello world’
其中：let为声明变量的关键字，const则代表常量， msg为变量名，是自定义的 string是变量的数据类型

常见的类型有：

string：字符串，可以用单引号或者双引号

let greeting: string = "Hello, World!";  
let quote: string = 'To be or not to be, that is the question.';

number：数值、整数、浮点数都可以

let age: number = 30;  
let price: number = 19.99;

any：不确定类型，可以是任意类型

let notSure: any = 4;  
notSure = "maybe a string instead";  
notSure = false;

- union：联合类型，可以是多个指定类型中的一种

let greet: string | number;  
greet = "Hello"; // OK  
greet = 42; // OK  
// greet = true; // Error, boolean is not string or number

Object：对象（注意：在TypeScript中，使用 {} 来表示一个空对象类型，而 Object 实际上指向的是非原始类型）

let person: object = {  
  name: "Alice",  
  age: 25  
};

Array：数组、元素可以是任意其他类型

let numbers: number[] = [1, 2, 3, 4, 5];  
let strings: string[] = ["red", "green", "blue"];  
let mixed: (number | string)[] = [1, "two", 3, "four"];

注意，对于 object 类型，实际上在TypeScript中，使用 {} 来定义一个空对象类型可能更加精确，因为它不会接受原始值（如 string、number 等）。而 Object 类型在TypeScript中是一个特殊的类型，它是所有类型的超类型，包括原始类型。因此，使用 Object 类型作为变量类型时，可以为其分配任何类型的值。

在定义数组时，我们通常使用类型后跟方括号的语法，例如 number[] 表示数字数组。如果需要数组中的元素可以是多种类型，可以使用联合类型，例如 (number | string)[] 表示数组中的元素可以是数字或字符串。

函数

在TypeScript中，我们可以为函数参数和返回值指定类型。这有助于我们在编写函数时明确函数的输入和输出，从而提高代码的可读性和可维护性。
如下，我们定义了一个名为greeter的函数，它接受一个string类型的参数person，并返回一个string类型的结果。然后，我们调用这个函数并传入一个字符串变量user作为参数。
注意：在TypeScript中，空字符串、数字0、null、undefined都被认为是false，其它值则为true。

function greeter(person: string): string {  
    return "Hello, " + person;  
}  
  
let user = "Jane";  
console.log(greeter(user));

类与接口

在 TypeScript 中，类和接口是面向对象编程的两个核心概念。类（Class）是一种用户自定义的数据类型，它包含属性和方法，可以用来创建对象。接口（Interface）定义了一个对象的结构，它规定了一个对象应该有哪些属性和方法，但不提供具体的实现。

类（Class）

在这个 Animal 类中：
name 是一个属性，用来存储动物的名字。
constructor 是类的构造函数，用于创建类的实例，并初始化 name 属性。
move 是一个方法，用于描述动物移动的行为。注意，move 方法有一个默认参数 distanceInMeters，其默认值为 0。

class Animal {    
    name: string;  // 类的属性  
    
    constructor(theName: string) {  // 类的构造函数  
        this.name = theName;  // 在构造函数中初始化属性  
    }    
    
    move(distanceInMeters: number = 0) {  // 类的方法  
        console.log(`${this.name} moved ${distanceInMeters}m.`);    
    }    
}

接口（Interface）

Person 接口定义了一个对象应该具有 firstName 和 lastName 两个属性，并且这两个属性都是字符串类型。

interface Person {    
    firstName: string;  // 接口的属性  
    lastName: string;  // 接口的属性  
}

函数与接口的使用

greeter 函数接受一个参数 person，该参数的类型是 Person 接口。这意味着任何传递给 greeter 函数的对象都必须具有 firstName 和 lastName 属性。

function greeter(person: Person) {  // 函数接受一个符合Person接口的对象  
    return "Hello, " + person.firstName + " " + person.lastName;  // 使用接口的属性  
}

对象的创建与函数的使用

这里创建了一个对象 user，它符合 Person 接口的规范（即具有 firstName 和 lastName 属性）。然后，我们将 user 对象传递给 greeter 函数，并打印返回的问候字符串。

let user = { firstName: "Jane", lastName: "User" };  // 创建一个符合Person接口的对象  
console.log(greeter(user));  // 调用greeter函数并打印结果

泛型

在 TypeScript 中，泛型（Generics）是一种创建可重用组件的方式，这些组件可以处理多种数据类型，而不是单一的数据类型。泛型允许我们定义函数、接口或类，其中的类型参数可以在使用这些组件时指定。这使得代码更加灵活和可维护，因为我们可以编写一次代码，然后在多种数据类型上重复使用。

如下例子：identity 函数是一个泛型函数，它接受一个类型为 T 的参数，并返回相同类型的值。这里的 T 是一个类型参数，它代表了在函数被调用时可以指定的任意类型。
让我们详细分析一下这个代码：

function identity<T>(arg: T): T {    
    return arg;    
}

在上面的代码中：

< T>：定义了类型参数 T。这告诉 TypeScript，我们打算在函数中使用一个或多个类型作为参数。
arg: T：函数参数 arg 的类型被指定为 T，意味着它可以是任何类型。
return arg;：函数返回与参数相同的值，其类型也是 T。
接着，创建了一个 myIdentity 变量，并将 identity 函数赋值给它。这里使用了另一种语法来指定泛型类型参数。

let myIdentity: <T>(arg: T) => T = identity;

这里，myIdentity 的类型被定义为接受一个类型为 T 的参数并返回相同类型的函数。它实际上是对 identity 函数的一个引用，因此我们可以通过 myIdentity 来调用 identity 函数。
最后使用 myIdentity 函数来处理不同类型的值：

console.log(myIdentity<string>("hello")); // 输出 "hello"  
console.log(myIdentity<number>(42)); // 输出 42

myIdentity< string>(“hello”)：在这里，显式地指定了 T 为 string 类型，并传递了一个字符串 “hello” 作为参数。函数返回这个字符串，并输出到控制台。
myIdentity< number>(42)：类似地，指定了 T 为 number 类型，并传递了一个数字 42。函数返回这个数字，并输出到控制台。