之前学习typescript的一些笔记

记录一下之前学习typescript时写的一点笔记

//变量名区分大小写
let num:number=-20.9;
let str:string='hello';
let sentence: string = `Hello, my name is ${ str }.
I'll be ${ num + 1 } years old next month.`;
console.log(sentence);
let bool:boolean=false;
let und:undefined=undefined;//表明声明但未赋值的变量值
let nul:null=null;//表明声明了变量并赋值null

//将字符串类型转换为数字类型(在字符串前面添加+号)
console.log(2-+'1');

//循环语句
for(let i:number=1;i<=3;i++){
    console.log(i);
}

//数组
let food:string[]=['a','b'];  //推荐写法
let foods:string[]=new Array();//不推荐
food.push('c');
food.forEach(function (item, index) {
    console.log(index,item)
});
console.log(food);

//元组 Tuple
let x:[string,number];
x=['hello',10];

//枚举
enum Color {Red=1,Green,Blue}     //默认从0开始为元素编号，可手动指定编号
let c:Color=Color.Blue;
let colorName:string=Color[2];
console.log(colorName);

//函数
function getSum(nums:number[]):number{
    let sum:number=0;
    for(let i:number=0;i<nums.length;i++){
        sum+=nums[i];
    }
    return sum;
}

let result:number=getSum([1,3,5]);
console.log(result);

//对象
let person:{    //对象的类型注解
    name:string
    age:number
    sayHi:()=>void
    sing:(name:string)=>void
    sum:(num1:number,num2:number)=>number
};

person={
    name:'丽丽',
    age:18,
    sayHi:function () {
        console.log('sayHi')
    },
    sing:function (name:string) {
        console.log(name)
    },
    sum:function (a:number,b:number) {
        return a+b;
    }
};

//接口,接口名称约定以I开头
interface IUser{   //创建一个接口
    name:string
    age:number
    sayHi:()=>void
}

let p1:IUser={
    name:'李四',
    age:88,
    sayHi:function () {
        console.log('hi')
    }
};

/*
发生类型推论的场景，可以不写类型注解
    1、声明变量并初始化时
    2、决定函数返回值时
*/
let age=18;
let songName='晴天';
let boy={
    name:'jack'
};
function f(n1: number, n2: number) {
    return n1+n2
}
f(1,2);


//类型断言（手动指定更加具体的类型，如不指定，querySelector返回类型为Element,无法访问元素特有的属性及方法）
let img=document.querySelector('#image') as HTMLImageElement;
img.classList.add('b','c','d');     //给dom元素添加类名
img.classList.remove('c','d');      //移除元素类名
let has=img.classList.contains('a');    //判断某类名是否存在
console.log(has);

//以对象的形式打印dom元素
console.dir(img);
let list=document.querySelectorAll('.a');
console.dir(list);
list.forEach(function (item, index) {
    let p=item as HTMLParagraphElement;
    p.innerText='['+index+']'+p.innerText;
});

let btn=document.querySelector('#btn');
btn.addEventListener('click',function (event) {
    console.log(event.type);
    console.log(event.target);
    let target=event.target as HTMLButtonElement;
    target.style.fontSize='30px';
});

//添加和移除事件时，事件处理程序必须是同一个
function handleClick(event:MouseEvent) {
    console.log(event.target);
}
btn.addEventListener('click',handleClick);
// btn.removeEventListener('click',handleClick);

//如果事件只需要执行一次，加参数once:true,自动移除
btn.addEventListener('click',function () {},{once:true});