TypeScript基本语法

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

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

TypeScript基本语法_第1张图片

//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 = ['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))

你可能感兴趣的:(typescript,javascript,前端)