初识 ts
ts与js的不同
ts相比js 首先是ts在声明时需要声明类型注解
变量的声明:
let num:number=1
let str:string='张三'
let bul:boolean=true
let un:undefined=undefined
let nul:null=null
数组的声明:
let arr:number[]=[1,2,3]
let arr:string[]=['张三','李四','王五']
对象的声明:
let obj:{
name:string;
age:number;
}
obj = {
name: '张三',
age: 18,
}
函数的声明:
//没有参数,没有返回值
function fun(): void {
console.log(2)
}
fun()
//有参数,没有返回值
let num = 1
function fun(num: number): void {
console.log(num)
}
fun(num)
//有参数,有返回值
let num = 1
function fun(num: number): number {
return num
}
console.log(fun())
//没参数,有返回值
function fun(): number {
return 1
}
console.log(fun())
直接在对象后边写类型注解的坏处 与 接口的使用
1. 代码结构不简洁
2. 无法复用类型注解
使用 interface 关键字来创建接口
interface IUser{
name:string
age:number
sayHi:()=>void
}
let p1:IUser={
name:'张三'
age:18
sayHi:function(){
console.log('你好,世界)
}
}
interface 表示接口 接口名称约定为I开头
类型推论与类型注解省略
当声明一个变量并赋值时没有注明类型,此时ts会根据 = 右边的值来推论出数据类型并赋值给变量,因此当声明变量并赋值时 类型注解可以省略
let age=18
age='张三' //此时age是number类型 赋值string会报错
如果先声明变量 后赋值 此时应该指定类型注解
let age: number
age=18
函数的返回值省略类型注解
function fun(num1:number,num2:number){
return num1+num2
}
//函数有return时 类型注解可以省略
发生类型推论(省略不写)的两种情况
1. 声明变量并赋值时
2. 决定函数返回值时
类型断言
类型断言 手动指定更加具体(精确)的类型
通过 console.dir(dom) 来查看dom的类型
let img=document.querSelector('#imge') as HtMLImageElement
如果不指定 返回的类型是Element
