【TS】typescript基础知识
一、类型注解
: number就是类型注解，为变量添加类型约束的方式，约定了什么类型，就只能给变量赋什么类型的值
let age: number = 18
二、变量命名规则和规范
命名规则：变量名称只能出现数字，字母，下划线(_)，美元符号($)，并且不能以数字开头
命名规范：变量名称有意义，推荐使用驼峰命名法（首字母小学，后面每个单词首字母大写）
三、数据类型
原始类型：基本数据类型：number、string、boolean、underfiend、null
//number类型
let size: number = 18
//string类型
let food: string = 'ice cream'
//boolean类型
let isOpen: boolean = true
//underfiend类型
let u: underfiend = underfiend
//null类型
let n: null = null
对象类型：复杂数据类型
对象类型注解，ts中的对象是结构化的，在使用对象前，可以根据需求，提前设计好对象的结构
//类型注解（对象的结构化类型），建立一种契约，约束对象的结构，类型注解中键值对的值为类型
let person : {
name:string;
age: number
}
//ts中的对象
person = {
name:'llh';
age: 36
}
对象方法的类型注解：
let p1 :{
sayHi:()=>void //无参数无返回值
}
let p1 = {
sayHi:function(){
console.log(1)
}
}
let p2: {
sing:(name:string) => void //有参数无返回值
}
let p2 = {
sing:function(name: string){
console.log(2)
}
}
let p3 :{
sum: (num1:number,num2:number) => number //有参数有返回值
}
let p3 = {
sum:function(num1:number,num2:number){
return num1 + num2
}
}
数组对象
let nums: number[] = [10,20,30,40,]
let sum: number = 0
for(let i = 0,u<nums.length,i++){
sum+=nums[i]
console.log(sum) //100
}
forEanch的回调函数，是否需要为参数或返回值指定类型注解？
不需要，此处的回调函数，是作为forEach方法的实参传入，不应该指定类型注解
ts创建forEach方法的时候，就已经指定好了forEach方法的参数以及参数的类型注解
如：
function forEach(callbackfn:(value:string,index: number)=>void)
forEach(function(value,index){})
四、接口的使用
直接在对象名称后写类型注解，1代码结构不简洁 2无法复用类型注解
如：
let p1 :{
name: string,
age: number,
sayHi:()=>void
} = {
name:'llh',
age:36,
sayHi:function(){
console.log(1)
}
}
let p2 :{
name: string,
age: number,
sayHi:()=>void
} = {
name:'fdb',
age:16,
sayHi:function(){
console.log(1)
}
}
使用接口，为对象的类型注解命名，并为代码建立契约来约束对象的结构,接口名称约定以I开头
语法：
interface IUser {
name: string
age: number
}
使用：
let p1: IUser = {
name:'llh',
age:36,
sayHi:function(){
console.log(1)
}
}
let p1: IUser = {
name:'fdb',
age:16,
sayHi:function(){
console.log(1)
}
}
五、TS类型推论
在TS中，某些没有明确指出类型的地方，类型推论会帮助提供类型，类型注解可省略不写
使用场景：
1、声明变量并初始化时
interface IUser {
name: string
}
let age: number = 18
如果改成以下写法也可以
let age = 18
类型推论给出来的还是number，类型推论根据值推论出是数值类型
let person: IUser ={
name:'lilianhua'
}
等同于
let person ={
name:'lilianhua'
}
如果先声明变量后赋值，则不会类型推论，如：
let num ;
num = 12
any代表任意类型
2、决定函数返回值时
function sum (num1: number,num2: number): number{
return num1 + num2
}
sum(1,6)
等同于：
function sum (num1: number,num2: number){
return num1 + num2
}
sum(1,6)
TS会根据rerurn后面返回的内容推论出函数返回值的类型，如果return 后面的是true，那函数返回值就变成了boolean
六、TS类型断言
调用querySelector(）通过id获取DOM元素时，拿到的元素类型都是Element。因为无法根据id来确定元素的类型，所以该方法返回了一个宽泛的类型，元素类型（Element）
元素类型只包含所有元素共有的属性和方法，如id属性，但是如果是img标签，则拿不到img元素的src属性
类型断言可以手动指定更加具体的类型
语法：
值 as 更具体的类型
如：
let img = document.querySelector('#image')
改为
let img = document.querySelector('#image') as HTMLImageElement
意为：我们确定id="image"的元素是图片元素，我们将类型指定为HTMLImageElement
小技巧：通过console.dir()打印DOM元素，在属性的最后面，即可看到该元素的类型
console.dir(img)
七、TS对象枚举
ts枚举 enum 枚举名称 {成员1，成功2，…}，约定枚举名称，成员名称以大写字母开头
enum Gender {Female，Male}
枚举使用，枚举是一种类型，因此可以作为变量的类型注解
enum Gender {Female，Male}
let userGender: Gender
访问枚举Gender 中的成员，作为变量userGender的值,枚举成员只读，不可编辑
enum Gender {Female，Male}
let userGender: Gender = Gender.Famale
userGender = userGender.Famale ? Gender.Famale :Gender.Male
枚举成员是有值的，默认为从0开始自增的数值，枚举成员的值为数字的枚举，称为数字枚举
enum Gender {
Female,//0
Male,//1
a,//2
b,//3
c//4
}
枚举成员可以初始化值
enum Gender {
Female = 1,
Male = 2,
a = 44,
b = 55,
c = 66
}
枚举成员的值为字符串的枚举，称为字符串枚举，字符串枚举没有自增行为，因此每个成员必须有初始值
enum Gender {
Female = '女',
Male = '男',
}