TypeScript 快速学习 ArkTs是Ts(TypeScript)的扩展

ArkTs是目前鸿蒙开发的主要语言，目前鸿蒙的主推模型Stage的新版本(3.1.0(API 9))开发不支持Java和JavaScript了，所以开发鸿蒙应用学习ArkTs是很有必要的。ArkTs是Ts(TypeScript)的扩展，所以准备了一点资料学一学typescript

TypeScript 的数据类型主要是基于 JavaScript 的动态类型系统，并增加了类型标注以提供静态类型检查。以下是 TypeScript 的一些主要数据类型：
##基本类型：
这些类型对应于 JavaScript 的基本类型，包括：

number：任何数字，包括整数和浮点数。
string：一个字符串。
boolean：true 或 false。
null：表示没有值或无值的特殊关键字。
undefined：在变量被声明后，未被赋值之前的默认值。
TypeScript 中声明变量主要有三种方式
预定义类型声明：你可以明确地声明一个变量的类型

let isDone: boolean = false;  
let age: number = 25;  
let name: string = "John Doe";

类型推断：如果你不显式地声明类型，TypeScript 将会通过赋值来推断变量的类型

let isDone = false;  
let age = 25;  
let name = "John Doe";

联合类型声明：你可以声明一个变量可能具有多种类型

let message: string | number;  
message = "Hello, World!"; // 字符串  
message = 42; // 数字

在 TypeScript 中，所有的变量都必须被声明。如果你试图使用一个未声明的变量，TypeScript 编译器将会抛出一个错误。

复合类型：这些类型对应于 JavaScript 的对象类型，包括：
array：一个数组。

// 声明一个包含字符串的数组  
let strings: string[];  
strings = ['hello', 'world'];  
  
// 声明一个包含数字的数组  
let numbers: number[];  
numbers = [1, 2, 3, 4];  
  
// 声明一个包含对象的数组，其中对象具有两个属性：name 和 age  
let people: { name: string; age: number }[];  
people = [  
  { name: 'Alice', age: 25 },  
  { name: 'Bob', age: 30 },  
  { name: 'Charlie', age: 35 }  
];

// 声明一个字典类型，其中键是字符串类型，值是数字类型  
let dictionary: { [key: string]: number };  
  
// 添加键值对到字典中  
dictionary = {  
  "apple": 1,  
  "banana": 2,  
  "orange": 3  
};  
  
// 读取字典中的值  
let appleValue = dictionary["apple"]; // 返回 1  
let bananaValue = dictionary["banana"]; // 返回 2  
  
// 修改字典中的值  
dictionary["orange"] = 4; // 将 "orange" 的值修改为 4  
  
// 检查字典中是否存在某个键  
if ("apple" in dictionary) {  
  console.log("Apple exists in the dictionary.");  
}  
  
// 遍历字典中的键值对  
for (let key in dictionary) {  
  if (dictionary.hasOwnProperty(key)) {  
    console.log("Key:", key, "Value:", dictionary[key]);  
  }  
}

object：一个普通的对象。

// 对象类型  
let person: {  
  name: string;  
  age: number;  
  greet: (msg: string) => void;  
};  
  
// 数组类型  
let numbers: number[];  
numbers = [1, 2, 3, 4];  
  
// 函数类型  
let add: (a: number, b: number) => number;  
add = (x, y) => x + y;  
  
// 泛型类型  
function identity<T>(arg: T): T {  
  return arg;  
}  
let result: string = identity('Hello, world!');

函数类型：可以用来描述函数的返回值类型。例如，一个返回 number 的函数。
泛型：通过在类型参数上使用尖括号 (<…>) 来表示。泛型允许你编写独立于特定类型的代码，可以在任何需要该类型的地方使用。例如，你可以创建一个接受任何类型的数组的函数，通过使用 Array 这样的泛型类型。

function findMaxValue<T extends number | string>(array: T[]): T {  
    if (array.length === 0) {  
        throw new Error("Array should have at least one element");  
    }  
    let maxValue = array[0];  
    for (let i = 1; i < array.length; i++) {  
        if (array[i] > maxValue) {  
            maxValue = array[i];  
        }  
    }  
    return maxValue;  
}  
  
// 使用示例：  
let numbers = [1, 5, 2, 9, 3];  
let maxNumber = findMaxValue(numbers); // 返回 9  
console.log(maxNumber)
  
let strings = ["apple", "banana", "cherry"];  
let maxString = findMaxValue(strings); // 返回 "cherry"
console.log(maxString)

在 TypeScript 中，=> 符号是箭头函数的简写形式。箭头函数是一种函数表达式，它使用简洁的语法，没有自己的 this 值，也没有 arguments 参数。
在箭头函数中，箭头符号 (=>) 左侧是函数的参数列表，右侧是函数的函数体。以下是一个简单的箭头函数示例：

let greeting: string = 'Hello';  
let sayHello: () => void = () => console.log(greeting);

在这个例子中，sayHello 是一个没有参数的箭头函数，它打印出变量 greeting 的值。

TypeScript 的类型注解 : string 指定了 greeting 的类型是 string，而 : () => void 则指定了 sayHello 函数的类型是没有返回值（void）的函数。
箭头函数还可以有返回值，例如：

let add: (a: number, b: number) => number = (a, b) => a + b;

在这个例子中，add 是一个有两个参数（a 和 b）的箭头函数，它返回它们的和。类型注解 : (a: number, b: number) => number 指定了函数的类型是接受两个 number 类型的参数并返回一个 number 类型的结果。

枚举类型：这是一种用户定义的类型，它包含固定数量的常量值。枚举在 TypeScript 中被视为数据类型，这使得你可以在 switch 语句或其他需要明确类型的上下文中使用它们。

enum Color {  
  Red,  
  Green,  
  Blue  
}  
  
let myColor = Color.Red; // myColor 的类型是 Color

enum Color {  
  Red = 1,  
  Green = 2,  
  Blue = 3  
}  
  
let colorName = Color[1]; // colorName 的值是 'Red'

enum Color {  
  Red = 1,  
  Green = 2,  
  Blue = 3  
}  
  
let color1 = Color.Red;  
let color2 = Color.Blue;  
let isEqual = color1 === color2; // isEqual 的值是 false，因为 color1 和 color2 的值不同。

接口：这是一种用户定义的类型，它描述了对象的结构。接口提供了一种方式来描述你的代码期望的对象应该具有的结构，而不需要指定一个特定的类。
这个接口定义了一个 Person 类型，它有三个属性：name、age 和一个方法：greet。name 属性的类型是 string，age 属性的类型是 number，greet 方法的参数是一个 string 类型的参数，返回值是 void。

interface Person {  
  name: string;  
  age: number;  
  greet: (msg: string) => void;  
}

这个类 Student 实现了 Person 接口，它具有与 Person 接口相同的属性和方法。在这个例子中，Student 类的构造函数需要传入 name 和 age 参数，这些参数被用来初始化 Student 对象的属性和方法。greet 方法被用来输出一个问候语和对象的名称。

class Student implements Person {  
  name: string;  
  age: number;  
  constructor(name: string, age: number) {  
    this.name = name;  
    this.age = age;  
  }  
  greet(msg: string) {  
    console.log(`${msg}, ${this.name}!`);  
  }  
}

这个函数 createPerson 接收两个参数 name 和 age，并返回一个 Person 类型的对象。这个函数的参数类型和返回类型都使用了 TypeScript 接口来定义

function createPerson(name: string, age: number): Person {  
  return { name, age, greet: (msg: string) => console.log(`${msg}, ${name}!`) };  
}

类：这是 TypeScript 中的面向对象编程的基础，可以定义属性、方法、继承等。类定义了对象的结构，并且可以实例化对象。

class Person {  
  private name: string; // 私有属性 name，类型为 string  
  private age: number; // 私有属性 age，类型为 number  
  constructor(name: string, age: number) { // 构造函数，用于初始化 Person 对象的 name 和 age 属性  
    this.name = name;  
    this.age = age;  
  }  
  greet(message: string): void { // 方法 greet，用于输出问候语和当前对象的名称和年龄信息到控制台  
    console.log(`${message}, ${this.name}! Your age is ${this.age}.`);  
  }  
}  
// 使用 Person 类创建一个对象并调用其 greet 方法输出问候语和对象信息到控制台  
const person = new Person("Alice", 25); // 创建 Person 对象并初始化其 name 和 age 属性为 "Alice" 和 25  
person.greet("Hello"); // 调用 Person 对象的 greet 方法输出问候语和对象信息到控制台

类的继承说明

class Animal {  
  constructor(public name: string) { }  
  
  eat() {  
    console.log(`${this.name} is eating.`);  
  }  
}  
  
class Dog extends Animal {  
  constructor(name: string, public breed: string) {  
    super(name); // 调用父类的构造函数  
  }  
  
  bark() {  
    console.log(`${this.name} is barking.`);  
  }  
}
const dog = new Dog("Bobby", "Golden Retriever");  
dog.eat(); // 输出 "Bobby is eating."  
dog.bark(); // 输出 "Bobby is barking."

模块：模块允许你组织你的代码，并且可以引入其他模块的声明和导出内容。这使得 TypeScript 支持模块化编程。

// math.ts  
export function add(a: number, b: number): number {  
  return a + b;  
}  
  
export function subtract(a: number, b: number): number {  
  return a - b;  
}

// app.ts  
import { add, subtract } from './math';  
const result1 = add(10, 5); // 输出 15  
const result2 = subtract(10, 5); // 输出 5  
console.log(result1, result2);

在上面的例子中，我们使用 import 关键字引入了 math.ts 模块中的 add 和 subtract 函数。然后，我们使用这些函数计算数值，并将结果输出到控制台。注意到我们使用的是相对路径 ‘./math’ 来引入模块。

元组类型：这是一种包含固定数量元素的数组，每个元素可以有不同的类型。例如，你可以有一个包含一个字符串和一个数字的元组。

// 声明一个元组类型，包含一个数字和一个字符串  
type Person = [number, string];  
  
// 使用元组类型声明一个变量  
let person: Person = [10, "John"];  
  
// 访问元组中的元素  
console.log(person[0]); // 输出: 10  
console.log(person[1]); // 输出: John  
  
// 修改元组中的元素  
person[0] = 20;  
person[1] = "Doe";  
console.log(person[0]); // 输出: 20  
console.log(person[1]); // 输出: Doe

可空类型：这是一种特殊的类型，表示一个值可以是任何类型，或者没有值（null 或 undefined）。例如，string | null 表示一个可能是字符串或 null 的值。

只读属性：这是 TypeScript 中对 getter 的特殊支持，它允许你定义一个属性，这个属性的值只能被设置一次，之后就不能再改变。

class Person {  
  readonly name: string;  
  
  constructor(name: string) {  
    this.name = name;  
  }  
}  
  
let person = new Person("John");  
console.log(person.name); // 输出: John  
person.name = "Jane"; // 报错: 'Person' object is not extensible. ts(2322)

class Person {  
  name: string;  
  
  constructor(name: string) {  
    Object.defineProperty(this, "name", {  
      value: name,  
      writable: false,  
      enumerable: true,  
      configurable: true  
    });  
  }  
}  
  
let person = new Person("John");  
console.log(person.name); // 输出: John  
person.name = "Jane"; // 报错: Cannot assign to 'name' because it is a read-only property. ts(2322)

索引签名：这是一种特殊的签名，允许你定义一个对象，这个对象的键可以是任何类型，而值的类型是特定的。例如，你可以定义一个对象，它的键可以是任何字符串，而值的类型是一个特定的类。

type Person {  
  name: string;  
  age: number;  
}  
  
type People = {  
  [index: string]: Person;  
};  
  
const people: People = {  
  "1": { name: "Alice", age: 25 },  
  "2": { name: "Bob", age: 30 },  
};  
  
console.log(people["1"]); // 输出: { name: 'Alice', age: 25 }  
console.log(people["3"]); // 报错：Element implicitly has an 'any' type because expression of type '"3"' can't be used to index type 'People'. No index signature with a parameter of type 'string' was found on type 'People'.