TypeScript基本语法

内容

• 变量声明
• 条件控制
• 循环迭代
• 函数
• 类和接口：因typescript有面向对象的一些特征。
• 模块开发：把一些代码做成模块做导入导出，从而提高代码的复用性、提高开发的效率。

一、变量声明

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

let msg: string = 'hello world'

右侧是给变量初始化的字面值        左侧为变量声明的语法

let为声明变量的关键字；const则代表常量

msg为变量的名称，可自定义

String为变量的数据类型，相对JavaScript多了这一块内容

        typescript支持的一些数据类型：

                //  string:字符串，可以用单引号或双引号

                //  number：数值、整数、浮点数都可以；也支持二进制、八进制、十六进制，表示的方式与其他语言类似，需要在数字前面加上相应前缀，二进制: 0b、八进制: 0、十六进制: 0x

                //  boolean：布尔：true和false

                //  any:不确定什么类型，可以是任何类型。作用就是告诉编译器不要做类型检查，定义普通变量时候慎用

                //  union:联合类型，可以是多个指定类型的一种

let u: string|number|boolean = 'rose'
u = 18

为什么Typescript有静态类型检查功能，还会出现any和union数据类型呢？

         any和union在定义函数（或一些特殊结构）的时候用的多一点，定义函数时如果把参数写死了，则导致函数扩展性变弱，如果参数用的是any或union，就可以接受多种类型的参数，方法内部做不同的处理，这样方法的拓展性变得更强。

                //  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更多语法：TypeScript: JavaScript With Syntax For Types. (typescriptlang.org) 

二、条件控制

        Typescript支持基于if-else和switch的条件控制

if-else

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

//判断是否是偶数
//为什么用===而不用==?
/*如果用==会判断两边数据类型是否一致，不一致的话会做类型转换，会导致性能上的损耗,而且可能发生一些奇怪的现象*/
if(num % 2 === 0){
  console.log(num + '是偶数')
}else{
  console.log(num + '是奇数')
}

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

注意：在TypeScript中，空字符串、数字、null、undefined都被认为 是false，其他值则为true

if (num){

      // num为空，可以执行逻辑

}

switch

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++
}

        运行结果

 for迭代器

//定义数组
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)
}

        运行结果 

四、函数

        Typescript通常利用function关键字声明函数，并且支持可选参数、默认参数、箭头函数等特殊语法。

//无返回值函数，返回值void可以省略，void前面的冒号也可省略
//sayHello为函数名
//如果是多个参数，中间用逗号隔开
function sayHello(name: string): void{
  console.log('你好,'+ name + '!')
}
sayHello('Jack')

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

//箭头函数(简写写法),let申请变量sayHi，默认类型function
let sayHi = (name: string) =>{
  console.log('你好，' + name + '!')
}
sayHi('Rose')

 可选参数函数

//可选参数，在参数名后加 ？， 表示该参数是可选的
function sayHello(name: string = '陌生人'){
  console.log('你好，' + name + '!')
}
sayHello('jack')
sayHello()

升级版

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

两者运行结果相同

 五、类和接口

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

类、接口、枚举

//定义枚举
//多个枚举项（诸如HI、HELLO为枚举项）之间用逗号隔开
//如果枚举项不赋值，它的默认值为数字，第一个为0，第二个为1，以此类推
enum Msg{
  HI = 'Hi',
  HELLO = 'hello'
}

//定义接口，抽象方法接受枚举参数
//凡是在类或者接口内定义的方法不需要加function关键字
//参数msg类型为Msg（枚举类型）,无返回值（void）
interface A {
  say(msg: Msg):void
}

//实现接口：类
//implement是实现的意思，实现了A中的抽象方法say
//类和接口也可以理解为父子关系
class B implements A {
  say(msg: Msg): void {
    console.log(msg + ', I am B')
  }
}

//初始化对象
//new 创建对象
//B实现了A,就是A的一种，相当于把子类对象赋值给父类类型
//let后可以写A，也可以写B
let a:A = new B()
//调用方法，传递枚举参数
a.say(Msg.HI)

运行结果 

继承

// 定义矩形类
class Rectangle {
  //成员变量
  private width: number
  private length: number
  //构造函数，关键字constructor
  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文件（typescript文件）中，每个文件都是一个模块（module）

模块可以相互加载，提高代码的复用率

文件rectangle.ts

//定义矩形类，并通过export到处
export class Rectangle {
  //成员变量
  private width: number
  private 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))