【Harmony OS】TypeScrip基础

TypeScript语言简介

• TypeScript是由微软开发的自由和开源的编程语言，它是

JavaScript的一个超集。

• JavaScript从1995年问世，现在已成为最广泛使用的跨平台语

言之一。

• JS语言表达 严重不足 ，编码过程中的常见 拼写、类型 等错误等都

不能预先检查。

• TypeScript的最初目标是成为JavaScript程序的静态类型检查器，

但随着其发展，TypeScript目标更多是为了开发大型应用

• TypeScript语言为JavaScript 增加了新的特性 ，主要包括：

◼ 类型批注和编译时类型检查

◼ 类型推断和类型擦除

◼ 枚举

◼ 元组

◼ 接口

◼ 泛型编程

◼ 名字空间

◼ 类

◼ 模块

◼ Lambda函数

◼ 可选参数以及默认参数等

TypeScript包含了JavaScript（ECMAScript）的全部特性

TypeScript环境

集成在DevEco Studio中

使用TS需要安装其编译环境，DevEco Studio集成（包括NPM、NodeJS等）

使用tsc -v命令来查看版本

单独安装

• NodeJS

编译、运行TS环境(18.17)，控制台输入查看版本：node -v

• 安装TypeScript

控制台输入： npm install –g typescript

• 安装ts-node

控制台输入： npm install –g ts-node

TypeScript环境:编译、运行

• 编译成js文件

控制台输入： tsc test.ts

• 运行

控制台输入： node test.js

或将编译后生成的js文件，引入HTML文件

• 编译并运行

控制台输入： ts-node test.ts

开发工具

• https://ts.nodejs.cn/

（可以在线运行，适合新手）

VS code

在终端窗口输入命令：ts-node test.ts

简单使用

TypeScript会忽略程序中的空格、制表符和换行符。空格、制表符通常用来缩进代码，使代码易于阅读和理解

TypeScript 区分大写和小写字符，即仅大小写不同的标识符也被认为是不同的标识符

TypeScript语句后面的 分号（ ;） 是可选的，当一行只有一个语句时，其后可以使用分号，也可以不用，如果一行有多个语句则需要使用分号分隔，如：

• console.log ("Hello" ); console.log ("Wo rld" );

• TypeScript支持 两种类型的注释

• 单行注释采用 / /

• 多行注释采用 /*

                        */

基本类型和运算符

• TypeScript是强类型语言，支持的类型包括：

• 数值类型、字符串类型、布尔类型、数组类型、元组类型、枚举类型、void

类型、null类型、unde fined类型、never类型和any类型。

• 数值类型number

表示数值，64位浮点值，可表示整数和浮点数，

可采用二、八、十、十六进制。关键字是number。

• 例如：

• let x: number = 100 // 本质不是整数，是浮点数

• let y: number = 3.14 // 浮点数

• let a: number = 0b111 // 二进制

• let b: number = 0o76 // 八进制

• let c: number = 60 // 十进制

• let d: number = 0xf f0000 // 十六进制

• 字符串类型string

单引号（'），双引号（"）引起来的若干字符，

可以使用转义字符。关键字是string。例如：

• let s1: string = '张三' //单引号

• let s2: string = "李四" //双引号

• let s3: string = "I'm Wang Wu" //双引号内含有单引号可以不转义

• let s4: string = "I \'m Zhao Liu" //双引号内含有单引号也可以转义

• let s5: string = 'I \'m Sun Qian' //单引号内含有单引号必须转义

• 字符串还可以使用反引号（`）来定义多行文本和内嵌表达 式，内嵌表达式采用${变量}形式表示

• let name: string = "ZhangSan"

• let age: number = 18

• let msg: string = `基本信息，姓名：$ { name } 年龄：$ { age }`

• 布尔类型boolean

表示逻辑值，对应的关键字是boolean，布尔类型只有两个

值，分别为true和false。

• let r : boolean = true

• 数组类型 

若干个相同的类型组成的一组数据，在一种类型后面加上中 括号（[ ]）即表示该类型对应的数组类型。数组还可以使用泛型。

• let arr1: number [ ] = [1,2,3,4,5 ]

• let arr2: Array<number> = [1,2,3,4,5,6 ]

• 元组类型

元组可以理解成已知元素数量和类型的特殊数组，和数组不 同的是，元组中各元素的类型不必相同。

• let t: [string,number ] //t为二元元组

• t = [ "price",10.6 ] //赋值

• console.log ( t [1 ] ) //输出10.6

• t = [ 10.6,"price" ] //错误

• 空类型null

即null类型，表示对象值缺失，表示一个空对象引用。

当使用typeof判断检测null时，其返回是object。

• 未定义类型undefined

即undefined类型，表示未定义，当一个变量没有 设置值时就为undefined。通过typeof一个没有值的变量会返回 undefined。

• null和undefined是其他任何类型（包括void）的子类型，

可以赋值给其它类型，赋值后的类型会变成null或 undefined。

// 当启用 - - s t ri c tNullChe c ks

l e t x: s t ring;

x = "good" ; / / 编译正确

x = und e fined; // 编译错误

x = null; // 编译错误

• 无果类型never

即never类型，表示从不会出现的值，声明为 never类型的变量只能被never类型所赋值，never在函数 中通常表现为抛出异常或无法执行到终止点，如无限循环。

• never类型是其它类型的子类型，包括null和undefined。

let a: never

let b: number

a = 100 //编译错误，数值不能赋值给never类型

a = ( ( )=> { throw new Error ('er ror' ) } ) ( ) //正确，never类型赋值

b = ( ( )=> { throw new Error ('erro r' ) } ) ( ) //正确，never赋值给数值 类型

function error (msg: string ): never { //函数返回为never类型

throw new Error (msg );

}

function loop ( ): never { //函数返回为never类型，可以理解成永远不 返回

while (true ) { }

}

• 任意类型any

即any类型，是针对类型不明确的变量使用的一 种数据类型，常用于类型会动态改变的情况。

例如：

let x: any = 1

// 数字类型

x = 'I am zhangsan' // 字符串类型

x = false // 布尔类型

x.show ( ) // x是any类型，当x是一个对象时，show方法可能存在

let arr : any[ ] = [ 0, true, 'good' ]   //any类型数组

arr [1 ] = 100

• 总体来说，TypeScript语言支持的数据类型还是比较丰富

的。除了支持基本的类型外，TypeScript还支持自定义类

型，如类等。

变量

• 定义变量的一般格式为：

• 修饰符 变量名:类型名 [= 值]

• TypeScript变量使用规则：

• 1）变量名可以包含数字、字母、下划线（_）和美元（$）符号，不能包含 其他特殊字符和空格。

• 2）变量名不能以数字开头。

• 3）变量使用前必须先声明。

• 4）变量类型可以自动推定和隐式转换。

• 类型在使用的过程遵循一致性原则。

• 可以通过管道符号( | )将变量定义成多种类型 。例如：

• var val : string | number // val可以是string或number类型

• val = 6

// 可以

• val = "some"

// 可以

• console.log ("val=" + val ) // 最后一次赋值的结果

运算符

• 位运算符包括

• 位与（&）、位或（|）、取反（~）、异或（^）、左移（<<）、右移 （>>）、无符号右（>>>）

• 赋值运算符包括

• 赋值（=）、复合加赋值（+=）、复合减赋值（-=）、复合乘赋值（*=）、 复合除赋值（/=）

• 三元条件运算符

• 只有问号冒号运算符（ ? : ）

• 类型运算符包括：

typeof和instanceof

• typeof是一元运算符，返回的是操作数的数据类型

• instanceof运算符用于判断对象是否为指定的类型的实例

• 其它运算符

如：

• 负号运算符（-），其写法和减号运算符一样，作为一元运算符时表示负号；

• 字符串连接运算符（+），其写法和加法运算符一样，当有字符串参与时表 示连接；

• 分量运算符（.），用于类或对象引用其分量；

• 下标运算符（ [ ] ），用于数组或元组引用其分量。

• TypeScript运算符的使用和很多其他高级编程语言中的运 算符类似，这里限于篇幅不再详细说明。

控制语句和函数

分支语句

if语句、if...else语句、if...else if....else语句、switch...case语句

循环语句

• for语句、while语句、do...while语句

• 还支持for…of、for...in、forEach、ever y和some循环。

• forEach、ever y和some是JS循环语法，更像是可迭代对象的方法

forEach

➢ 因为forEach在迭代器中是无法返回的，所以常使用every和some来取代forEach

➢ every()方法使用指定函数检测数组中的所有元素，如果数组中检测到有一个元素不满足（以返回false判定），则剩余的元素不会再进行检测，every()的返回值也为false。如果所有元素都满足条件，则every()最终返回值也为true

➢ some()方法依次执行数组的每个元素，如果有一个元素满足条件（以返回true判断），则剩余的元素不会再执行检测，some()的返回值也为true。如果没有一个满足条件的元素，则some()的最终返回值也为false

every、true

数组中有一项符合条件，some则返回true；数组中必须所有项都符合条件,every才返回true

map

map条件筛选，返回符合条件boolean结果的数组

filter

filter条件筛选，返回符合条件结果值的数组

跳转语句

break语句

• 当在循环体内执行到b reak语句时，循环会立即终止，且程序流将继续执行紧接着循环的下一条语句。如果循环有嵌套关系，b reak语句停止的是其所在的当前层循环。

continue语句

• 当在循环体内执行到con tinue语句时，它不是终止循环，而是会跳过当前循环中的剩余代码，执行当前循环的下一轮循环。

• 对于for循环，continue语句执行后，会跳转到其第3个表达式。

• 对于while和do...while语句，continue语句执行后，会跳转到执行循环判断条件。

函数

一般函数

匿名函数

Lambda函数（箭头函数）

数值转换

字符串转数字

数字转换为字符串

类和接口

类和对象

• 对象 其实就是包含一组 键值对的实例 ，这里的值可以是标量、函数、数组、对象等。

• 除了通过类创建对象外，在 TypeScript 中，可以直接使用类似 JSON格式 方式创建对象。例如：

成员权限

• 类中的成员有 公有 （ public ）， 私有 （ p rivate ）与 保护 （ pro tec ted ）三种保护权限， 默认为 public 权限。

公有权限 的成员可以在 类外和类内 都能访问

私有权限 的成员只能在 类内访问

保护权限 的成员可以在 类内和子类 中访问。

static关键字

• 关键字 static 用于定义类的成员（属性和方法）为 静态的 ，静态成员属于类本身的，直接 通过类名调用 。

类的继承

• 类的继承使用关键字是 extends ，在 TS 中只支持 单继承 。

• 继承可以 重写方法 ，可以通过 super 访问父类中的成员

接口

• 接口 可以 继承 ，允许接口 继承 一个 或 多个 接口，继承关键字是 extends ，多继承时父接口 以逗号分隔

• 类可以实现接口，实现接口的关键字是 implements

模块

• 采用 impor t / expor t 语法。

• ES模块是在2015年被添加到JavaScript规范中的，到2020年得到了广泛的Web浏览器JavaScript运行时支持。

• TypeScript模块 的设计理念是可以替换的代码块。模块是在其自身的作用域里执行，在这样定义在模块里面的变量、函数和类等在模块外部是不可见的。

• 如果需要在模块外可见 ，则需要明确使用 expor t导出 。同时，使用时需要通过 impor t导入 所导出的模块中的变量、函数、类等。

• 两个模块之间的关系是通过在文件级别上使用impor t和expor t建立的。

• 模块使用 模块加载器 去导入其它的模块。在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。

• 常用的加载器是服务于 Node.js 的 CommonJS 和服务于Web应用的 Require.js 。

模块的导入导出

• export和export default导出的区别：

• 1）export为导出，export default为默认导出。

• 2）在一个文件或模块中，export、import可以有多个，export  default只能有一个，即默认导出只能有一个。

• 3）通过export方式导出，在导入时需要加花括号{ }，使用export default导出的，在导入时则不需要加花括号{ }。

• 使用expor t default为模块指定默认输出，可以不需要知道所要加载模块的标识符名称。例如：

装饰器