解析ts
全局安装：npm i -g typescript (实现ts到js的转化
安装后执行命令：tsc index.ts (文件夹中会自动转化出一个index.js文件
node 直接执行ts文件
全局安装：npm i -g ts-node
安装后执行命令：ts-node index.ts
数据类型：
基本类型：number，string，boolean,undefined,null
复杂类型：object，function
算术运算符
除+号外，算术运算符只能和number用
+“1”：表示string1转换成number1（js也这样，前提string的内容是数字）
赋值
let a:number=1
a=a+1 => a+=1 => a++
比较运算符（对比js没有==）：比较数据的值
逻辑运算符：boolean值的运算，结果也是boolean
三元运算符：判断条件？(true)值1：(false)值2
循环.png
for(let i:number=0;i<3;i++){
console.log(i)
}
//0,1,2
数组
有序集合，用来存储多个数据。
末尾添加一个新元素：数组[数组长度]
let nums:number[]=[1,2,3]
let breakfast:string[]=['milk','egg','bread']
forEach((value,index)=>{}) ：遍历数组，不会停止循环
some：遍历数组，查找是否有一个元素满足条件，如果满足就停止循环（根据返回值）
let nums:number[]=[1,10,9,6]
nums.some((value)=>{
if(value>10){
return true
}
})
forEach和some的区别就是value大于10，return true之后，some停止循环，forEach不会，虽然结果都一样。
函数
声明一次可以调用任意多次的代码（代码的复用）
形参：声明函数时指定的参数，放在声明函数的小括号中
实参：调用函数时传入的参数，放在调用函数的小括号中
function sayAge(age:number){
console.log(age)
}
let jacksAge:number=18
sayAge( jacksAge)
function getSum(nums:number[]){
let sum:number=0
for(let i:number=0;i<nums.length;i++){
sum+=nums[i]
}
return sum
}
let num1:number[]=[123,4567,90]
console.log(getSum(num1))
//指定函数返回值类型
function fn():number{
return 18
}
实参必须符合形参类型要求
函数没有返回值，默认返回值的类型是void
return后面的代码不会执行
对象
一组相关属性和方法的集合，并且是无序的。
对象的类型注解:约束对象的结构
let person={
name:string;
age:nuber;
sayHi:()=>void
}//分号可省略
person={
name:'cc',
age:18,
sayHi:()=>{
console.log('hi')
}
}
接口：为对象的类型注解命名，建立契约来约束对象的结构
复用类型注解
interface person={
name:string;
age:number
}
let p1={
name:'jack',
age:18
}
let p2={
name:'tom',
age:17
}
内置对象
ts自带的基础对象
类型推论
let a=18
//推出a的类型是number，以后a只能是number，所以类型注解可以不用写
let a
//没有指定类型，也没有类型推论，所以a后面
在浏览器中使用ts
1.在vscode中安装live-server插件
找到index.html文件，右键选择open with live server
2.终端中运行 tsc --watch 被转换的ts文件
类型断言
let img=document.querySelector("#image")
//只能够得到img的类型是element，不能修改元素的属性等
let img=document.querySelector("#image") as HTMLIamgeElement
//类型断言后，img的类型就是HTMLIamgeElement，可以改src等属性了
//HTMLIamgeElement可以通过console.dir(img)来得知
操作class
dom.classList.add(a,b,c...)
dom.classList.remove(a,b,c...)
dom.classList.contains(a/b/c...) 返回boolean
添加事件
dom.addEventListener(事件名称，事件处理函数)
事件对象，事件处理函数的参数
dom1.addEventListener('click',function(event){
console.log(event.type) //click
console.log(event.target) //dom1 要改变dom1属性，也要进行类型断言
//比如dom1为button
let btndom= event.target as HTMLButtonElement
btndom.style.fontSize='13px'
})
移除事件
dom.removeEventListener(事件名称，事件处理函数)
注意：此处的事件处理函数不能是匿名函数，只能是具名函数
ps：添加事件和移出事件中要使用具名函数，要指定事件对象的类型，不然事件对象不可用
dom.addEventListener('click'，fn1)
function fn1(event:MouseEvent){
console.log(event.target)
}
//如何知道事件对象的类型——可以先使用匿名函数查看
dom.addEventListener('click'，function(event){
console.log(event)
})
如果事件只使用一次，可用once
dom.addEventListener(事件名称，事件处理函数，{once:true})
网友评论