TypeScript基本语法

想在自己电脑上快速演示下方代码？点击ts官方演练场：https://www.typescriptlang.org/play

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

//string: 字符串，可以用单引号或双引号
let msg:string ='hello world'
//number: 数值，整数、浮点数都可以
let age:number = 18
//boolean: 布尔
let res:boolean = true
//any: 不确定类型，可以是任意类型
let type:any ='brynn'
//union: 联合类型，可以是多个指定类型中的一种
let many:string|number|boolean = 'brynn'
many = 18
//Object: 对象
let mes = {name:'brynn',age:18}
//Array: 数组，元素可以是任意其他类型,它有两种写法，如下：
let names:Array<string> = ['jack','brynn']  //Array<数据类型>
let ages:number[]=[16,18]  //数据类型[]

循环迭代 ：for和while循环，并且为一些内置类型如Array等提供了快捷迭代语法（例如for in和for of）。

//定义数组
let names:string[] =['brynn','jack']

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

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

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

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

//有返回值函数
function sum(x: number,y: number): number{
    return x + y
}
const res = sum(10,5)
console.log('10+5=',res)

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

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

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

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

枚举、接口、类：

//定义枚举
enum Msg{
    //这里也可以不进行赋值，因为会有默认值 0、1 以此类推
    HI = 'hi', 
    HELLO = 'hello'
}

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

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

//初始化对象
let a:A = new B()
//或者
//let a:B =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关键字调用父类构造
        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))