TypeScript基本语法

变量声明

TypeScript在JavaScript的基础上加入了静态类型检查功能,因此每一个变量都是有固定的数据类型
TypeScript基本语法_第1张图片
类型

//string:字符串,可以用单引号或双引号
let msg:string = 'hello'
//number:数值,整数,浮点数都可以
let age:number = 21
//boolean布尔
let finished:boolean=true
//any:不确定类型,可以是任意类型
let a:any = 'jack'
a = 21
//union:联合类型,可以是指多个类型中的一种 在有限范围内选择
let u:string|number|boolean='rose'
u = 18
//object对象
let p = {name:'Jack',age:18}
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与大多数开发语言类似,支持基于if-else和switch的条件控制

let num:number=21
//判断是否是偶数
if(num % 2 ===0){
  console.log(num+'是偶数'}else{
  console.log(num+'是奇数'}
//判断是否是正数
if(num > 0){
  console.log(num+'是正数'}else if(num<0){
  console.log(num+'是负数'}else{
 console.log(num+'为0'}

在TypeScript中,空字符串,数字0,null,undefined都被认为是false,其他则为true

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基本语法_第2张图片

函数

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

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

//有返回值函数
function sum(x:number,y:number):number{
 return x+y
}
let result =sum(21,18)
console.log('21+18='+ result)
//箭头函数
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()

类和接口

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+',I am B')
  }
}

//初始化对象
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){
  //调用父类构造
  super(side,side)
  }
}
let s = new Square(10)
console.log('正方形面积'+s.area())

模块开发

应用复杂时,我们可以把通过功能抽取到单独的ts文件中,每个文件都是一个模块(module)。模块可以相互加载,提高代码复用性
TypeScript基本语法_第3张图片

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