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

2024-04-20 09:50:36 浏览数 (2)

前言

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

变量与类型

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

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

常见的类型有:

  • string:字符串,可以用单引号或者双引号
代码语言:javascript复制
let greeting: string = "Hello, World!";  
let quote: string = 'To be or not to be, that is the question.';
  • number:数值、整数、浮点数都可以
代码语言:javascript复制
let age: number = 30;  
let price: number = 19.99;
  • any:不确定类型,可以是任意类型
代码语言:javascript复制
let notSure: any = 4;  
notSure = "maybe a string instead";  
notSure = false;

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

代码语言:javascript复制
let greet: string | number;  
greet = "Hello"; // OK  
greet = 42; // OK  
// greet = true; // Error, boolean is not string or number
  • Object:对象(注意:在TypeScript中,使用 {} 来表示一个空对象类型,而 Object 实际上指向的是非原始类型)
代码语言:javascript复制
let person: object = {  
  name: "Alice",  
  age: 25  
};
  • Array:数组、元素可以是任意其他类型
代码语言:javascript复制
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。

代码语言:javascript复制
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。

代码语言:javascript复制
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 两个属性,并且这两个属性都是字符串类型。

代码语言:javascript复制
interface Person {    
    firstName: string;  // 接口的属性  
    lastName: string;  // 接口的属性  
}

函数与接口的使用

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

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

对象的创建与函数的使用

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

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

泛型

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

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

代码语言:javascript复制
function identity<T>(arg: T): T {    
    return arg;    
}

在上面的代码中:

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

代码语言:javascript复制
let myIdentity: <T>(arg: T) => T = identity;

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

代码语言:javascript复制
console.log(myIdentity<string>("hello")); // 输出 "hello"  
console.log(myIdentity<number>(42)); // 输出 42

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

总结

今日之学习篇章已然落笔,愿诸君有所收获。

0 人点赞