TypeScript 基础语法

 前言：

为了学习HarmonyOS,对TypeScript 进行了一些了解，此篇文章是对TypeScript 语法进行了一些总结。学习更多TypeScript 查看TypeScript 官方文档：https://www.typescriptlang.org/docs/handbook/intro.html

概述：

TypeScript 基于 Javascript 基础之上的编程语言，是 JavaScript 的超集，或者叫扩展集。所谓超集就是在JavaScript 原有的基础上多了一些扩展特性，多出来的其实是一套更强大的类型系统，以及对 ECMAScript的新特性支持，它最终会编译成原始的 JavaScript。

一、变量声明

TypeScript在JavaScript的基础上加入了静态类型检查功能，因此每一个变量都有固定的数据类型。

let msg : string = 'hello world'

let：声明变量的关键字，const 则代表常量

msg：变量名，自定义

string：变量的数据类型

// string:  字符串，可以用单引号或双引号
let msg : string = 'hello world'

// number:  数值，整数，浮点数都可以
let age : number = 21

// boolean:  布尔
let finished : boolean = true

// any: 不确定类型，可以是任意类型
let a : any = 'jack!'
a = 21

// union:  联合类型，可以是多个指定类型中的一种
let u: string|number|boolean = 'rose'
u = 18

// object:对象
let p = {name: 'Jack' , age: 21}
console. log(p.name)
console. log(p['name'])

// Array: 数组，元素可以是任意其它类型
let names: Array<string> = ['Jack' , 'Rose']
let ages: number[] = [21, 18]
console.log(names[0])

二、条件控制

TypeScript与大多数开发语言类似，支持基于if-else和switch的条件控制。

// 定义数宇
let num:number = 21

//判断是否是偶数
if(num % 2 === 0){
 console.log(num + '是偶数')
}else{
 console.log(num + '是奇数')
}

// 判断是否是正数
if(num > o){
 console.log(num + '是正数')
}else if {
 console.log(num + '是负数')
}else {
 console.log(num + '为0')
}

let grade: string = 'A'

switch (grade){
   case 'A'：{
     console.log('优秀')
     break
   }
   case 'B'：{
     console.log('合格')
     break
   }
   case 'C'：{
     console.log('不合格')
     break
   }
   default：{
     console.log('非法输入')
     break
   }
}

三、循环迭代

TypeScript支持for和while循环，并且为一些内置类型如Array等提供了快捷选代语法。

// 普通for
for(let i = 1; i <= 10; i++){
   console.log('点赞'+i+'次')
}


// while
let i = 1;
while(i <= 10){
   console.log('点赞'+i+'次')
   i++
}

//定义数组
let names: string[] = ['Jack','Rose']

// for in 送代器，遍历得到数组角标
for (const i in names){
   console.log(i + ':' + names[i])
}


// for of 迭代器，直接得到元素

for (const name of names){
   console.log(name)
}

四、函数

定义函数

// 无返回值函数，返回值void可以省略
function sayHello(name: string): void{
   console.log('你好,' + name +'!')
}
sayHello('Jack')

// 有返回值函数
function sum(x: number , y: number) : number {
   return x + y
}
let result = sum(21， 18)
console.log('21 + 18 =' + result)

//箭头函数
let sayHi = (name: string) =>{
   console.log('你好，'+ name +'!')
}
sayHi('Rose')

函数-可选参数

// 可选参数，在参数名后加 ?，表示该参数是可选的
function sayHello(name?: string){
  // 判断name是否有值，如果无值则给一个默认值
  name = name ? name :'陌生人'
  console.log('你好,' + name +'!')
}
sayHello('Jack')
sayHello()

函数-参数默认值

//参数默认值，在参数后面赋值，表示参数默认值
//如果调用者没有传参，则使用默认值
function sayHello(name: string ='陌生人'){
   console.log('你好，' + name +'!')
}
sayHello('Jack')
sayHello()

五、类和接口

TypeScript具备面向对象编程的基本语法，例如interface、class、enum等。也具备封装、继承、多态等面向对象基本特征。

类、接口、枚举

//定义枚举
enum Msg{
  HI ='Hi',
  HELLO = 'Hello'
}

//定义接口，抽象方法接收枚举参数
interface A{
  say(msg: Msg) :void
}

//实现接口
class B implements A {
  say(msg: Msg) : void{
     console.log(msg + ', I am B'
 }
}

//初始化对家
let a:A = new B()

//调用方法，传递枚举参数
a.say(Msg.HI)

继承

//定义矩形类
class Rectangle {
  //成员变量
  private width: number
  private length: number
  //构造函数
  constructor(width: number, length: number){
    this.width = width
    this.length = length
  }
  //成员方法
  public area() : number{
    return this.width * this. length
 }
}

//定义正方形
class Square extends Rectangle{
  constructor(side: number){
   //调用父类构造
   super(side, side)
 }
}

let s = new Square(10)
console.log('正方形面积为:'+s.area())

六、模块开发

应用复杂时，我们可以把通用功能抽取到单独的ts文件中，每个文件都是一个模块 (module)。

模块可以相互加载，提高代码复用性。

rectangle.ts

//定义矩形类，并通过export导出
export class Rectangle{
   //成员变量
   public width: number
   public length: number
   //构造函数
   constructor(width: number, length: number) {
     this.width = width
     this.length = length 
 }
}

//定义工具方法，求钜形面积，并通过export导出
export function area(rec: Rectangle): number{
   return rec.width * rec.length
}

index.ts

//通过import语法导入，from后面写文件的地址
import {Rectangle, area} from '../rectangle'

//创建Rectangle对象
let r = new Rectangle(10, 20)

//调用area方法
console.log('面积为:' + area(r))