1、变量及数据类型
// string:字符串,单引号或双引号
let msg : string = 'hello wprld'
console.log('msg:'+msg)
// number:数值、整数、浮点
let num :number = 21
console.log('num:'+num)
//boolean:布尔
let finished: boolean = true
console.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等。也具备封装、继承、多态等面向对象的基本特征。
封面图