HarmonyOS4.0开发-TypeScript快速入门

前端工程化的发展，衍生出的TS已将运用非常广泛，Vue+TS，React+Ts,华为推出的ArkTs（Ts的超集）等一系列，都表明TS的重要性，所以在此总结一下TS的基本语法，方便大家平滑过渡。

安装Ts-node

ts-node是⼀个 TypeScript 的运⾏环境，它允许我们直接运⾏ TypeScript 代码。ts-node 的安装和运⾏依赖于Node.js环境，因此在安装ts-node之前，我们需要准备好Node.js环
境。
准备Node.js环境需要完成以下两步操作

安装Node.js
配置环境变量

为了⽅便在终端执⾏Node.js相关的命令，我们需要将Node.js的安装⽬录加⼊到path 环境变量下，具体操作如下:
⾸先查看Node.js的安装⽬录
然后打开环境变量配置⾯板，按下Win + R ，唤起运⾏窗⼝，之后运⾏命令sysdm.cpl
在这里插入图片描述
之后点击⾼级选项卡，并点击环境变量

然后在系统变量中选中 Path ，并点击编辑

之后点击新建，并填⼊Node.js的安装⽬录，完成后点击确定。

在配置完Node.js环境后，便可在终端执⾏以下命令来安装ts-node了。

npm install -g ts-node

注：完成后需要重新启动VSCode，另其重新加载环境变量和相关依赖。

语法声明

2.2.2.1.** 变量声明**
在这里插入图片描述
2.2.2.2. 常量声明
let ⽤于声明变量，⽽在赋值后便不能再修改。 const ⽤于声明常量，两者的区别是变量在赋值后可以修改，⽽常量在赋值后便不能再修改。

const b:number = 200;

2.2.2.3. 类型推断
如果⼀个变量或常量的声明包含了初始值，TS 便可以根据初始值进⾏类型推断，此时我们就可以不显式指定其类型，例如

let c = 60;
console.log(typeof c); //number

2.2.3. 常⽤数据类型
2.2.3.1. number

number表示数字，包括整数和浮点数，例如： 100 、-33 、2.5 、-3.9

let a :number = 100
let b :number = -33
let c :number = 2.5
let d :number = -3.9

2.2.3.2. string

string表示字符串，例如：你好、hello

let a:string = '你好 '
let b:string = 'hello'

2.2.3.3. boolean

表示布尔值，可选值为：true 、false

let isOpen:boolean = true
let isDone:boolean = false

2.2.3.4. 数组
数组类型定义由两部分组成，元素类型[] , 例如number [] 表示数字数组，string [] 表示字符串数组，数组类型的变量可由数组字⾯量——[item1,item2,item3] 进⾏初始化。

let a: number [] = []
let b: string [] = [ '你好 ', 'hello']

2.2.3.5. 对象
在TS中，对象（ object）是⼀种⼀系列由属性名称和属性值组成的数据结构，例如’ 张三 ', 年龄 :10, 性别 : '男 ’ 。对象类型的声明需要包含所有属性的名称及类型，例如{name: string, age: number, gender: string} ，对象类型的变量可以通过对象字⾯量——{name: '张三 ', age:10, gender: '男 '} 进⾏初始化。

let person: {name:string, age:number, gender:string} = {name: '张三 ', age:10, g ender: '男 '};

2.2.4. 函数
2.2.4.1. 函数声明语法
声明函数的基础语法如下
在这里插入图片描述
2.2.4.2. 参数详解
2.2.4.2.1. 特殊语法
● 可选参数
可选参数通过参数名后的?进⾏标识，如以下案例中的gender?参数。

function getPersonInfo(name: string, age: number, gender?: string): string {
	if (gender === undefined) {
		gender = '未知 '
    }
    return `name:${name},age:${age},gender:${gender}`;
}
let p1 = getPersonInfo( 'zhagnsan', 10, '男 '); 
let p2 = getPersonInfo( 'lisi', 15);
console.log(p1);
console.log(p2);

注：调⽤函数时，未传递可选参数，则该参数的值为undefined

默认参数
可在函数的参数列表为参数指定默认值，如以下案例中的数。

function getPersonInfo(name: string, age: number, gender: string= '未知 '): string {
	return `name:${name},age:${age},gender:${gender}`;
}
let p1 = getPersonInfo( 'zhagnsan', 10, '男 ') 
let p2 = getPersonInfo( 'lisi', 15);
console.log(p1);
console.log(p2);

2.2.4.2.2. 特殊类型
● 联合类型

⼀个函数可能⽤于处理不同类型的值，这种情况可以使⽤联合类型，例如以下案例中的
sage: number | string

function printNumberOrString(message: number | string) { console.log(message)
}

printNumberOrString( 'a')
printNumberOrString(1)

若函数需要处理任意类型的值，则可以使⽤any类型，例如以下案例中的message: any

function print(message:any) { console.log(message)
}

print( 'a')
print(1)
print(true)

2.2.4.3. 返回值详解
2.2.4.3.1. 特殊类型
若函数没有返回值，则可以使⽤void作为返回值类型，其含义为空。

function test(): void {   
	console.log( 'hello');
}

2.2.4.3.2. 类型推断
函数的返回值类型可根据函数内容推断出来，因此可以省略不写。

function test() {
	console.log( 'hello');
}

function sum(a: number, b: number) { 
	return a + b;
}

2.2.4.4. 函数声明特殊语法
● 匿名函数

匿名函数的语法结构简洁，特别适⽤于简单且仅需⼀次性使⽤的场景。

let numbers: number [] = [1, 2, 3, 4, 5]   
numbers.forEach(function (number) {
	console.log(number);
})

注意：匿名函数能够根据上下⽂推断出参数类型，因此参数类型可以省略。

● 箭头函数
匿名函数的语法还可以进⼀步的简化，只保留参数列表和函数体两个核⼼部分，两者用=>符号连接。

let numbers: number [] = [1, 2, 3, 4, 5]
numbers.forEach((num) => { console.log(num) })

2.2.5. 类（ class）
2.2.5.1. 概述
类（ class）是⾯向对象编程语⾔中的⼀个重要概念。
⾯向对象编程（ Object-Oriented Programming，简称OOP）是⼀种编程范式，其核⼼理念在于将程序中的数据与操作数据的⽅法有机地组织成对象，从⽽使程序结构更加模块化和易于理解。通过对象之间的协同合作，实现更为复杂的程序功能。类（ class）是对象的蓝图或模板，它定义了对象的属性（数据）和⾏为（⽅法）。通过类可以创建多个具有相似结构和⾏为的对象。例如定义⼀个Person类，其对象可以有张三、李四等等。

2.2.5.2. 语法说明
2.2.5.2.1. 类的定义
定义类的语法如下图所示
在这里插入图片描述

代码如下：

class Person {
	id: number;
	name: string;
	age: number = 18;

    constructor(id: number, name: string) {
		this.id = id;
		this.name = name; 
	}
-   introduce(): string {
		return `hello,I am ${this.name},and I am ${this.age} years old`
	}
}

2.2.5.2.2. 对象创建
● 语法
创建对象的关键字为 new ，具体语法如下

let person = new Person(1, 'zhangsan');

● 对象属性的访问

console.log(person.name); //读 person.name = 'lisi'; //写
console.log(person.name);

● 对象⽅法的调⽤
对象创建后，便可通过对象调⽤类中声明的⽅法，如下

let intro = person.introduce();
console.log(intro);

2.2.5.2.3. 静态成员
Typescript 中的类中可以包含静态成员（静态属性和静态⽅法），静态成员⾪属于类本身，⽽不属于某个对象实例。静态成员通⽤⽤于定义⼀些常量，或者⼯具⽅法。
● 声明静态成员
定义静态成员需要使⽤static关键字。

class Constants{
	static count:number=1; 
}
class Utils{
	static toLowerCase(str:string){
		return str.toLowerCase();
	}
}

console.log(Constants.count);
console.log(Utils.toLowerCase( 'Hello World'));

● 使⽤静态成员
静态成员⽆需通过对象实例访问，直接通过类本身访问即可。

console.log(Constants.count);
console.log(Utils.toLowerCase( 'Hello World'));

2.2.5.3. 继承

继承是⾯向对象编程中的重要机制，允许⼀个类（⼦类或派⽣类）继承另⼀个类（⽗类或基类）的属性和⽅法。⼦类可以直接使⽤⽗类的特性，并根据需要添加新的特性或覆盖现有的特性。这种机制赋予⾯向对象程序良好的扩展性。
下⾯通过⼀个例⼦演示继承的特性

class Student extends Person {
	classNumber: string;
    constructor(id: number, name: string, classNumber: string) {
		super(id, name);
		this.classNumber = classNumber;
	}
	introduce(): string {
		return super.introduce()+`, and I am a student`;
	}
}
let student = new Student(1, 'xiaoming', '三年⼆班 '); console.log(student.introduce());

注意：

类的继承需要使⽤关键字extends

⼦类构造器中需使⽤super() 调⽤⽗类构造器对继承⾃⽗类的属性进⾏初始化。

在⼦类中可以使⽤this 关键字访问继承⾃⽗类的属性和⽅法。

在⼦类中可以使⽤super 关键字访问⽗类定义的⽅法。

2.2.5.4. 访问修饰符
访问修饰符（Access Modifiers）⽤于控制类成员（属性、⽅法等）的可访问性。TypeScript提供了三种访问修饰符，分别是private 、protected和public。

class Person {
	private id: number;
	protected name: string;
	public age: number;
	constructor(id: number, name: string, age: number) {
		this.id = id;
		this.name = name; this.age = age;
	}
}
class Student extends Person { }

说明：

private 修饰的属性或⽅法是私有的，只能在声明它的类中的被访问。

protected 修饰的属性或⽅法是受保护的，只能在声明它的类和其⼦类中被访问。

public 修饰的属性或⽅法是公有的，可以在任何地⽅被访问到，默认所有的属性和⽅法都是 public 的。

2.2.6. 接⼝（ interface）
2.2.6.1. 概述
接⼝（ interface）是⾯向对象编程中的另⼀个重要概念。接⼝通常会作为⼀种契约或规范让类（class）去遵守，确保类实现某些特定的⾏为或功能。
2.2.6.2. 语法说明
● 接⼝定义
接⼝使⽤interface关键字定义，通常情况下，接⼝中只会包含属性和⽅法的声明，⽽不包含具体的实现细节，具体的细节由其实现类完成。

interface Person { 
	id: number;
	name: string; age: number;

	introduce(): void;
}

● 接⼝实现

接⼝的实现需要⽤到implements关键字，实现类中，需要包含接⼝属性的赋值逻辑，以

及接⼝⽅法的实现逻辑。

class Student implements Person {
	id: number;
	name: string; 
	age: number;

    constructor(id: number, name: string, age: number) {
		this.id = id;
		this.name = name; this.age = age;
	}

    introduce(): void {
		console.log( 'Hello,I am a student');
	}
}

2.2.6.3. 多态
多态是⾯相对象编程中的⼀个重要概念，它可以使同⼀类型的对象具有不同的⾏为。下⾯我们通过⼀个具体的案例来体会多态这⼀概念.
⾸先，再创建⼀个Person接⼝的实现类Teacher, 如下

class Teacher implements Person {
	id: number;
	name: string; 
	age: number;
	
	constructor(id: number, name: string, age: number) {
		this.id = id;
		this.name = name; this.age = age;
	}
	introduce(): void {
		console.log( 'Hello,I am a teacher');
	}
}

然后分别创建⼀个Student对象和⼀个Teacher对象，注意两个对象的类型均可以设置Person

let p1: Person = new Student(1, 'zhangsan', 17);
let p2: Person = new Teacher(2, 'lisi', 35);

最后分别调⽤introduce() ⽅法，你会发现，同样是Person类型的两个对象，调⽤同⼀个introduce() ⽅法时，表现出了不同的⾏为，这就是多态。

p1.introduce();//Hello,I am a student
p2.introduce();//Hello,I am a teacher

2.2.6.4. 接⼝的作⽤
在传统的⾯向对象编程的场景中，接⼝主要⽤于设计和组织代码，使代码更加容易扩展和维护。下⾯举例说明。
假如现在需要实现⼀个订单⽀付系统，按照⾯向对象编程的习惯，⾸先需要定义⼀个订单类（Order），如下

class Order {
	totalAmount: number;

    constructor(totalAmount: number) {
		this.totalAmount = totalAmount; }
    pay() {
		console.log(`AliPay:${this.totalAmount}`);
	}
}

很容易预想到，这个系统将来可能需要⽀持其他的⽀付⽅式，为了⽅便代码⽀持新的⽀付⽅式，我们可以对代码进⾏如下改造。
⾸先定义⼀个⽀付策略的接⼝，接⼝中声明⼀个
⽅法，⽤来规范实现类必须实现⽀付逻辑。

interface PaymentStrategy {
	pay(amount: number): void;
}

然后在订单类中增加⼀个PaymentStrategy 的属性，并且在订单类中的pay ⽅法中调用PymentStrategy 的pay方法，如下

class Order {
	totalAmount: number;
	paymentStrategy: PaymentStrategy;
	
    constructor(totalAmount: number, paymentStrategy: PaymentStrategy) {
		this.totalAmount = totalAmount;
		this.paymentStrategy = paymentStrategy; 
	}
		
    pay() {
		this.paymentStrategy.pay(this.totalAmount);
	}
}

这样改造完之后，就可以很容易的在不改变现有代码的情况下，⽀持新的⽀付⽅式了。⽐如现在需要⽀持AliPay, 那我们就可以创建AliPay这个类（ class）并实现（implement）PaymentStrategy这个接⼝，如下

class AliPay implements PaymentStrategy {
    pay(amount: number): void {
		console.log(`AliPay:${amount}`);
	}
}

这样⼀来，之后创建的订单就可以使⽤AliPay这个⽀付⽅式了。

let order = new Order(1000,new AliPay());
order.pay();

2.2.6.5. TS 中的接⼝的特殊性
TypeScript 中的接⼝是⼀个⾮常灵活的概念，写过java的同学都知道（在java叫引用类型），除了⽤作类的规范之外，也常⽤于直接描述对象的类型，例如，现有⼀个变量的定义如下

let person: {name:string, age:number, gender:string} = {name: '张三 ', age:10, gender: '男 '};

可以看到变量的值为⼀个⼀般对象，变量的类型为{name:string, age:number, gender:string} ，此时就可以声明⼀个接⼝来描述该对象的类型，如下

interface Person { 
	name: string;  
	age: number;
	gender: string;
}
let person: Person = {name: '张三 ', age:10, gender: '男 '};

2.2.7. 枚举
2.2.7.1. 概述
枚举（ Enumeration）是编程语⾔中常⻅的⼀种数据类型，其主要功能是定义⼀组有限的选项，例如，⽅向（上、下、左、右）或季节（春、夏、秋、冬）等概念都可以使⽤枚举类型定义。
2.2.7.2. 语法说明
● 枚举定义
枚举的定义需使⽤ enum 关键字，如下

enum Season { 
	SPRING,
	SUMMER, 
	AUTUMN, 
	WINTER
}

枚举的使⽤记住两个原则即可

枚举值的访问：像访问对象属性⼀样访问枚举值，例如Season.SPRING

枚举值的类型：枚举值的类型为enum的名称，例Season.SPRINGSeason.SUMMER等值的类型都是Season

let spring:Season = Season.SPRING;

● 使⽤场景
现需要编写⼀个函数 move ，其功能是根据输⼊的⽅向（上、下、左、右）进⾏移动，此时就可以先使⽤枚举定义好所有可能的输⼊选项，如下

enum Direction {
	UP,
	BOTTOM,
	LEFT,
	RIGHT
}

move函数的实现如下

function move(direction: Direction) {
	if(direction===Direction.UP){ 
		console.log( '向上移动 ');
    }else if(direction===Direction.BOTTOM){
		console.log( '向下移动 ');
    }else if(direction===Direction.LEFT){
		console.log( '向左移动 ');       
	}else{
		console.log( '向右移动 '); }
}

move(Direction.UP);

2.2.7.3. 赋值
在TypeScript 中，枚举实际上是⼀个对象，⽽每个枚举值都是该对象的⼀个属性，并且每个属性都有具体的值，属性值只⽀持两种类型——数字或字符串。

默认情况下，每个属性的值都是数字，并且从开始递增，例如上述案例中的Direction枚举中，Direction.UP的值为 0 ，Direction.BOTTOM的值为 1 ，依次类推，具体如下

console.log(Direction.UP) //0
console.log(Direction.BOTTOM) //1
console.log(Direction.LEFT) //2
console.log(Direction.RIGHT) //3

除了使⽤默认的数字作为属性的值，我们还能⼿动为每个属性赋值，例如

enum Direction
	UP = 1,
	BOTTOM = 2
	LEFT = 3,	
	RIGHT = 4
}

console.log(Direction.UP) //1
console.log(Direction.BOTTOM) //2
console.log(Direction.LEFT) //3
console.log(Direction.RIGHT) //4

再例如

enum Direction { 
	UP = 'up',
	BOTTOM = 'bottom'
	LEFT = 'left',	,
	RIGHT = 'right'
}

console.log(Direction.UP) //up
console.log(Direction.BOTTOM) //bottom
console.log(Direction.LEFT) //left
console.log(Direction.RIGHT) //right

通过为枚举属性赋值，可以赋予枚举属性—些更有意义的信息，例如以下枚举

enum Color {
	Red = 0xFF0000,
	Green = 0x00FF00,
	Blue = 0x0000FF
}

enum FontSize {
	Small = 12,
	Medium = 16,
	Large = 20,
	ExtraLarge = 24
}

2.2.8. 模块化
2.2.8.1. 概述

模块化是指将复杂的程序拆解为多个独⽴的⽂件单元，每个⽂件被称为⼀个模块。在TypeScript 中，默认情况下，每个模块都拥有⾃⼰的作⽤域，这意味着在⼀个模块中声明的任何内容（如变量、函数、类等）在该模块外部是不可⻅的。为了在⼀个模块中使⽤其他模块的内容，必须对这些内容进⾏导⼊、导出。
在这里插入图片描述

2.2.8.2. 语法说明
●导出
导出须使⽤export关键字，语法如下

export function hello() {	
	console.log( 'hello module A'	);
}	
export const str = 'hello world' 
const num = 1;	;

●导⼊
导⼊须使⽤import关键字，语法如下

import { hello, str } from './moduleA';

hello();
console.log(str);

2.2.8.3. 避免命名冲突

若多个模块中具有命名相同的变量、函数等内容，将这些内容导⼊到同⼀模块下就会出现命名冲突。例如，在上述案例的基础上，⼜增加了⼀个 moduleC，内容如下

export function hello() {
	console.log( 'hello module C');
}
export const str = 'module C';

moduleB 同时引⼊ moduleA 和 moduleC 的内容，如下，显然就会出命名冲突

import { hello, str } from "./moduleA";
import { hello, str } from "./moduleC";

hello() //?
console.log(str); //？

有多种⽅式可以⽤来解决命名冲突，下⾯逐⼀介绍
● 导⼊重命名语法如下

import { hello as helloFromA,str as strFromA } from "./moduleA";
import { hello as helloFromC,str as strFromC } from "./moduleC";

helloFromA();
console.log(strFromA);

helloFromC();
console.log(strFromC);

● 创建模块对象
上述导⼊重命名的⽅式能够很好的解决命名冲突的问题，但是当冲突内容较多时，这种写法会⽐较冗⻓。除了导⼊重命名外，还可以将某个模块的内容统⼀导⼊到⼀个模块对象上，这样就能简洁有效的解决命名冲突的问题了，具体语法如下

import * as A from "./moduleA";
import * as C from "./moduleC";

A.hello();
console.log(A.str);

C.hello();
console.log(C.str);

2.2.8.4. 默认导⼊导出
除了上述导⼊导出的语法之外，还有⼀种语法，叫做默认导⼊导出，这种语法相对简洁⼀些。
● 默认导出
默认导出允许⼀个模块指定⼀个（最多⼀个）默认的导出项，语法如下

export default function hello(){ 
  	console.log( 'moduleA');
}

● 默认导⼊
由于每个模块最多有⼀个默认导出，因此默认导⼊⽆需关注导⼊项的原始名称，并且⽆需使{} 。

import helloFromA from	"./moduleA";

由于默认导⼊时⽆需关注导⼊项的名称，所以默认导出⽀持匿名内容，⽐如匿名函数，语法如下

export default function () { 
	console.log( 'moduleB');
}

安装Ts-node

语法声明

相关推荐

最近更新

热门阅读