1、变量及数据类型

// string：字符串，单引号或双引号
let msg : string = 'hello wprld'
console.log('msg:'+msg)// number：数值、整数、浮点let num :number = 21console.log('num:'+num)//boolean：布尔let finished:  boolean = trueconsole.log('finished:'+finished)// any：不确定 可以是任意 （函数用）
let ay : any = "fake"
console.log('ay:'+ay)// union : 联合类型、可以是多个类型中的一个
let un : string|number|boolean = "rose"
console.log('un:'+un)
un = 18
console.log('un:'+un)// Object :对象
let p = {mame:'jack',age:28}
console.log(p.mame)
console.log(p.age)// Array :数组,元素可以是任意类型
let names : Array<string> = ['Jack','Rose']
let ages  : number[]  = [26,28]
console.log(names[0])
console.log(ages[1])

运行结果

[LOG]: "num:21" 
[LOG]: "finished:true" 
[LOG]: "ay:fake" 
[LOG]: "un:rose" 
[LOG]: "un:18" 
[LOG]: "jack" 
[LOG]: 28 
[LOG]: "Jack" 
[LOG]: 28 

2、条件控制之if-else

1、if-esle基本用法
2、if(num){
…
}else{}
num 可以直接作为判断条件判断是否有数据，空字符串、数字0、null、undefined都被认为是false，其他值为true

let num : number = 25// 判断是否为奇偶
//两个“=”会比较类型，三个“=”不会，节省内存空间
if(num%2===0){
console.log(num+"为偶数")
}else{
console.log(num+"为奇数")
}if(num){console.log("非0即为true",num+"为true")
}else{}let num1:string = " "
if(num1){console.log("空字符串为false",num1+"为false")
}else{}let data :any
//变量做判断条件直接判断数据有无
if (data){console.log("数据不存在!")
}else{console.log("数据存在!")
}

运行结果

[LOG]: "非0即为true",  "25为true" 
[LOG]: "空字符串为false",  " 为false" 
[LOG]: "数据存在" 
[LOG]: "25为正数" 

3、条件控制之switch

格式如下，需要break

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

运行结果

[LOG]: "优秀" 

4、循环迭代

1.1、for循环

//普通for
let num :number = 0
for(let i = 1;i<=10;i++){
num++
}
console.log("循环"+num+"次")

运行结果

[LOG]: "循环10次" 

1.2 改进for循环

//定义数组
let names :string[] = ["Jack","Rose"]
// for in 迭代器,遍历得到数组脚标
for (const i in names){console.log(i+":"+names[i])
}
// for of 迭代器，直接得到元素
for(const name of names){console.log(name)
}

运行结果

[LOG]: "0:Jack" 
[LOG]: "1:Rose" 
[LOG]: "Jack" 
[LOG]: "Rose" 

2、while循环

let i :number = 1
let num :number=0
while (i<=10){num++i++
}
console.log("循环了"+num+"次")

运行结果

[LOG]: "循环了10次"

5、函数 （声明、参数、函数体、调用函数）

5.1 无返回值函数，返回值void可以省略

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

运行结果

[LOG]: "你好，Jack!" 

5.2、有返回值函数

// 有返回值函数
function sum(x:number,y:number ):number {return x+y
}
let a = sum(2,3)
console.log(a)

运行结果

[LOG]: 5 

5.3、箭头函数（简化函数声明）

// 箭头函数（简化函数声明）
let sayHi = (name:string) =>{console.log("你好，"+name+'!')
}
sayHi("Jack")

运行结果

[LOG]: "你好，Jack!" 

5.4、可选参数

function sayHello(name?:string){// 判断name是否有值，如果无值则给默认name = name?name:'陌生人'console.log('你好'+name+'!')
}
// 有值调用
sayHello('Jack')
//无值调用
sayHello()

运行结果

[LOG]: "你好Jack!" 
[LOG]: "你好陌生人!" 

5.5、参数默认值

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

运行结果

[LOG]: "你好Jack!" 
[LOG]: "你好陌生人!" 

6、面向对象编程的基本语法

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

封面图