TypeScript 基本语法

TypeScript 官网：https://www.typescriptlang.org,
在官网的Playground中可以直接运行ts代码

1. 变量声明

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

// string 字符串，可以用单引号或双引号，也可以使用反引号，反引号中可以解析变量
let msg: string = 'hello world'
let str: string = `提示信息：${msg}`

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

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

// 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])

2. 条件控制

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

if-else 语句：

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

//判断是否是偶数
if(num % 2 === 0){
  console.log(num + '是偶数')
}else {
  console.log(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中，空字符串，数字0，null，underfind都被认为是false，其他值则为true。

3. 循环迭代

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 name: stirng[] = ['Jack', 'Rose']
// for in 迭代器，遍历得到数组角标
for (const i in names){
  console.log(i + ':' + names[i])
}

// for of 迭代器，直接得到元素
for (const name of names){
  console.log(name)
}

4. 函数

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

定义函数：

// 无返回值函数，返回值void可以省略
function sayHello(name: string): void{
  console.log('你好' + name + '!')
}
// 有返回值函数
function sum(x: number, y:number): number{
  return x + y
}
// 调用函数
let result = sum(21, 18)
console.log(result)

// 箭头函数, 没有function关键字，简化写法
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()

5. 类和接口

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

// 初始化对象
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) {
    // 调用父类构造
    supre(side, side)
  }
}

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

6. 模块开发

应用复杂时，我们可以把通用功能抽取到单独的ts文件中，每个文件都是一个模块（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 funciton 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))