想在自己电脑上快速演示下方代码?点击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: numberprivate length: number//构造函数 (没有函数名)constructor(width: number, length: number){this.width = widththis.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: numberpublic length: number//构造函数constructor(width: number,length: number) {this.width = widththis.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))