Typescript入门学习笔记

TS学习笔记

入门篇：Typescript安装

1.环境搭建步骤

1. 安装node.js
2. 使用npm全局安装typescript(npm node.js的包管理工具)
3. Ts文件转Js

2|  npm i -g typescript

3|tsc xxx.ts

• Ts文件转Js文件

tsc 文件名

• 监视Ts文件(自动生成js)

tsc --watch 文件名

• 执行Ts文件

ts-node

编译篇：编译器配置

tsconfig.json 是ts编译器的配置文件，ts编译器可以根据他的信息对ts文件进行编译
控制台使用 tsc 执行编译

1. 简单的编译配置

• include 定义需要编译的目录
• 默认值: ["/**/*"]

"include":[
    "src/**/*","demo/**/*"
    ],//src、demo 目录下的文件将会被编译

• exclude定义不需要编译的目录

• 默认值:["mode_modules","bower_components","jspm_packages"]

• extends定义继承某个文件

"extends":"./configs/base"

• files指定要编译的文件列表

"files":[
    "user.ts",
    "sct.ts",
    "get.ts",
    "tsc.ts"
]

2. compilerOptions

compilerOptions 中包含多个子选项，用来完成对编译的配置

• target 设置TS编译的目标版本

"files": [
    "./diro1/1.ts"
  ],
"compilerOptions": {
    "target": "ES6"
  }

• module 模块化的规范(amd,system,umd,es6,es2015,es2020,esnext)
• lib 指定项目中用到的库(dom库)

"lib":["dom","webwork",...]

• outdir 指定编译后的js 文件存放的位置

"compilerOptions": {
    "target": "ES6",
    "outDir": "./dir02"
  }

• outfile 编译的文件合并到某个文件
• 注：所有全局作用域中的文件会合并到一个文件中

"allooutfile":"app.js" 

• allowJs 是否编译js 文件
• 默认: false

"allowJs":false

• checkJs 是否检查js代码

• 默认: false

• noEmit 不生成编译文件

• 默认: false

• noEmitOnError 当有错时不生成编译文件

• 默认: false

• alwaysStrict 严格模式

• 默认: false

• noImplicitAny 是否允许隐式any类型

• 默认：false

//"noImplicitAny":true  当为true 时 编译会有报错提示
function fn(a,b){

}

• noImplicitThis 是否允许类型不明确的this
• 默认: false

//"noImplicitThis": true  此时一下代码会有报错提示
function(){
     console.log(this);
}

• strict 严格检查总开关
• 默认:false

"strict": true  //开启所有严格检查

• strictNullChecks 是否严格检查空值
• 默认: false

//"strictNullChecks": false
let btn = document.querySelector('#btn1');
btn.addEventListener('click',function () {
    alert(123);
})

//"strictNullChecks": true  为true 编译器 检查到btn1 课程会为空 出现报错提示
let btn1 = document.querySelector('#btn1');
btn?.addEventListener('click',function () {
    alert(123);
})

一、变量类型

1. 数据类型

• 原始类型（基本数据类型）

类型	关键字	描述
数字	number
字符串	string
布尔	boolean
undefined	undefined	声明但未赋值的变量值
null	null	空值
字面量	其本身	限制变量的值就是该变量的值
任意类型	any	任意类型(变量设置为该类型,相当于关闭TS类型检测)
unknow	*	类型安全的any
对象	object	{name:‘小明’}
数组	array	[1,2,3]
元组	tuple	TS新增类型,固定长度的数组
枚举	enum	TS新增类型

// 0. undefined/null 类型 都只有一个值
    let dog_1:undefined = undefined;
    let cat_1:null      = null;
    console.log(dog_1,cat_1); // undefined null

// 1. 字面量赋值（变量只能是规定好的值，否则报错）
    let gender:'男'|'女';
    gender = '女';

//2. any
    let misc:any;
    misc = 22;
    misc = '菜刀';
    let num:number;
    //此时misc 的实际类型是string 赋值给number类型【没有报错】
    num  = misc;

// 3.unknow
    let dog_01:unknown;
    dog_01 = ['小明',22];
    dog_01 = '小红';

    let dog_2:string;
    // dog_2= dog; 此时无法赋值，TS会报错
    console.log(typeof dog_01); // string
    if(typeof dog=='string')dog_2 = dog;

    dog_2 = dog_01 as string;

    dog_2 = <string>dog_01;

// 4. void 表示为空 函数则表示没有返回值 
    function echo():void
    {
        return null;
        return undefined;
    }

// 5. never 永远不会返回结果
    function echo_2():never
    {
        throw new Error('报错了');
    }
    //echo_2();
    
// 6.object js一切皆对象
    let obj:object;
    obj = {};
    obj = function(){};
    obj = [];
    obj = null;
    // so 使用以下跟方便
        let person:{name:string,age:number}
        person = {name:'小明',age:22};

        interface Iperson {name:string,age:number,gender?:string};
        let person_2:Iperson = {name:'小红',age:18,gender:'女'};
        let person_3:Iperson = {name:'小刚',age:19};
    //规定对象中必须有一个值其他值任意
        interface Iperson_2 {name:string,[renyi:number]:any}; //此处规定 name属性必须 其他属性为数字类型，属性值任意
        let person_4:Iperson_2 = {name:'小红',1:33,2:'女'};
    // 使用 &
        let person_5:{name:string}&{age:number};
    //函数
        let func:(a:number,b:number)=>string;
        func = function (num1:number,num2:number){return '小红';}

// 7. 数组
    let arr:Array<number>;
    let arr_1:number[];
    let arr_2 = [1,2,'小红'];

// 8. 元组(固定长度的数组)
    let arr_3:[string,number];
    let arr_4:number[];

// 9. 枚举 enum
    enum hero_gender
    {
        male= '男',
        female = '女'
    };
    let hero = {
        name:'猴子',
        gender:hero_gender.male
    }
    if(hero.gender=hero_gender.male){
        console.log(hero.name+'是男的！');
    }

• 对象类型（复杂数据类型）

类型	关键字	描述

2. 创建类型

//创建一个类型
type num = 1|2|3|4;
let num1:num = 4;

二、运算符

1. + 、- 号运算符

• 加号运算符的特殊用法

console.log(1 - +'3'); //-2
console.log(3 + -'1'); //2
var num1 = -'点击'; //NaN
console.log(num); //-3

三、数组

1. 数据添加元素

• 代码

//数组
let arr:string[] = ['q','w','e','r'];
console.log(arr);
//获取长度
console.log(arr.length) // 4
//末尾添加元素
arr[arr.length] = 'rr';

• 冒泡排序取出数组中最大值

let arr:number[] = [1,4,9,12,6,7];
let max:number   = arr[0];
for (let i:number = 0;i<=arr.length-1; i++){
  if(arr[i]>max) max = arr[i];
}
console.log(max);

2. 数组对象内置函数

• push() 向数组末尾添加元素，并返回数组的新长度

let arr:number[] = [23,4];
console.log(arr.push(89,1));// 4
console.log(arr); //[23,4,89,1]

• forEach() 遍历数组(类似PHP中的foreach)

let arr1:string[] =['小明','小红','小美']; 
arr1.forEach(function (value,key) {
    console.log(key+'----'+value);
})

• some() 遍历数组,返回true即可停止遍历

let arr2:string[] = ['小明','小刚','小红'];
let bol:boolean = arr2.some(function (value) {
    let bool:boolean = value=='小'? true:false;
    return bool;
})
console.log(bol);  //false

四、函数

1. TS 函数的基本结构

//求和   形参arr
function sum(arr:number[],size:boolean=true):number {
  let sum:number = 0;
  for (let i:number = 0; i<=arr.length-1; i++){
      sum +=arr[i];
  }
  return sum;
}
console.log(sum([1,5])); //传入实参

2. 直接使用函数返回值

function echo():number{
  return 22;
}
let age:number = echo() + 1;
console.log(age); //23

五、对象

1. 对象的类型注解

• TS 中对象是结构化,使用前可以根据需求提前设计好对象的结构

//注解
let mengmeng:{
    name:string;
    age :number;
    skill:(s:number,str:string,arr:number[])=>string;
}

 mengmeng ={
    name : 'mengmeng',
    age  : 23,
    skill:function (num:number,str:string,arr:number[]) {
        return '可爱、善良！'
    }
}
console.log(mengmeng.skill(1,'字符串',[5]));//输出  可爱、善良！

• 【推荐】接口类型注解(规定以I 开头)

interface IPersons {
    name:string;
    age :number;
    say :(num:number)=>number
}

let li:Persons = {
    name:'李强',
    age :17,
    say :function(num:number){
       console.log(this.name);
       return num;
    }
}
console.log(li.say(1)) //输出1

2. 对象类型注解深入学习

• 对象中对属性的限制

interface Iperson {name:string,age:number,gender?:string};
let person_2:Iperson = {name:'小红',age:18,gender:'女'};
let person_3:Iperson = {name:'小刚',age:19};

• 规定对象中必须有一个值其他值任意

//此处规定 name属性必须 其他属性为数字类型，属性值任意
interface Iperson_2 {name:string,[renyi:number]:any}; 
let person_4:Iperson_2 = {name:'小红',1:33,2:'女'};

• 函数

let func:(a:number,b:number)=>string;
func = function (num1:number,num2:number){return '小红';}

3. 对象存值

console.log(li.name); // 李强
li.name = '王刚';
console.log(li.name); //王刚

五、类

1. TS类属性访问控制

• readonly 只读
• static 静态
• public 公开
• protected 保护的
• private 私有的

class Cat
{
    public readonly name:string = '花花'; //只读属性无法更改值

    static readonly height:number = 30 //静态只读属性

    private another_name:string = '小肥猫';

    protected age:number = 5;

    public color:string  = '白色';

    public sayHello():string {
        console.log(this.name+'说喵喵！');
        return '22';
    }
    private action(){
        
        console.log(this.name+'爱睡觉！');
    }

}
let c = new Cat();
c.sayHello();

2. 构造函数 constructor

/**
 * 构造函数
 */
class Dog {
    private name:string|number;

    protected color:string;

    constructor(name:string,color:string) {
        this.name = name;
        this.color= color;
    }
}
let dog = new Dog('小黑','黑色');
let red_dog = new Dog('小红','红色');
console.log(dog);

3. super 关键字

 class Monkey extends Animal {
     num = 11;
     constructor() {
         super();
         console.log(super());
     }
 }

4. 抽象类

• 抽象类不能创建对象
• 抽象类是用来被继承的
• 抽象类中可以添加抽像方法

abstract class Person {
    protected abstract name:string;
    constructor(){
        console.log('抽象类');
    }
    /**
     * 1.抽像方法只能在抽象类中
     * 2.子类必须实现抽象类
     */
    protected abstract echo():string;
    
}

class Changren extends Person {
    public name = 's';

   public echo():string
   {
       return 'changren 继承 person';
    
   }

5.TS中的属性存取

• TS中提供set、get 关键字可以对类的属性进行存取
• 使用set、get 的方法，调用方法和属性一样

class Zhukai
{
    private age:number = 22;
    private height:number = 140;

    //Ts关键字获取属性
    get zhuAge ():number
    {
        return this.age;
    }

    //Ts关键字 设置值
    set zhuAge (age)
    {
        this.age = age;
    }
}
//设置
zhukai.zhuAge = 45;
//获取
console.log(zhukai.zhuAge);

六、接口

1. 接口的定义

  1. 接口可以在定义的时候限制类的结构
  2. 接口中的所有属性都不能实现实际的值
  3. 接口定义对象的结构，而不考虑实际的值(接口中定义对象的方法，都是必须实现的抽像方法)
  4. 事件接口使用implements

2. TS接口在类和对象中的使用

interface Ipen
{
    name:string;
    length:number;
    color:string;
    action():string;
}

//类中
class Hero_pen implements Ipen{
    public length = 15;
    name  = '英雄001钢笔';
    color = '红色';
    
    size  = 12;
    action(){
        return '123';
    }
}

//对象中
let qq_pen:Ipen = {
    length:15,
    name:'英雄001钢笔',
    color:'红色',
    action(){
        return '123';
    }
}

console.log(qq_pen.color)  //红色

七、泛型

• 在定义函数或类时若遇到类型不明确可以使用泛型
• 使用方法: function 方法名<泛型1,泛型2, …>(参数)返会类型{}

1. 函数中使用泛型

 function goAction<T,A>(name:T,time:A):A
 { 
    return time;
 }

 // 2. 调用方法
 let action_1  = goAction('看书',200)  //直接调用
 let action_2  = goAction<string,string>('吃饭','2020-09'); //调用时指定类型
 console.log(action_2);

2. 类中使用

class Action<T,B>
{
    public name:T

    public getTime(time:B):B
    {
        return time;
        
    }

}
let action = new Action<string,string>()
console.log(action.getTime('2020'));

3. 泛型指定范围

//1. 泛型指定实现接口
interface Iaction{
    title:string;
    money:number;
}
function shopAction<T extends Iaction>(shop:T):number
{ 
   return shop.money;
}
let shopmoney =  shopAction({title:'去动物园玩',money:15})
console.log(shopmoney);

八、TS DOM操作

1. 类型断言（手动指定更加精确的类型）

• 查看元素的类型

let div1 = document.querySelector('#div1') as HTMLDivElement;
console.dir(div1); 

• 作用:未指定类型默认为Element 导致某些元素无法使用自己特有的属性，如img 的 src属性

2. css选择器

• 选取单个元素

document.querySelector()

• 选取多个元素

document.querySelectorAll()

3. 操作文本内容

• innerText (读取|设置元素的内容)

//  <h1 id="h1">QQ:112233</h1>
let h1 = document.querySelector('#h1') as HTMLHeadingElement;
// console.dir(h1);
console.log(h1.innerText='55'); //输出55

• 小练习

  <h1 id="h1">QQ:112233</h1>
  <h1 id="h101">QQ:112233</h1>
  <h1 id="h102">QQ:112233</h1>

let p = document.querySelectorAll('h1');
p.forEach(function (item,key) {
        let now_h = item as HTMLHeadingElement;//更换类型
        now_h.innerText = now_h.innerText+'hh';
        now_h.style.background = 'red';
})

4. 操作样式

• DOM.style属性: 行内样式（字体大小、文字颜色…）
• DOM.classList属性：类样式操作(添加类名、移除类名…)

dom.classList.add('b','c');//添加类
dom.classList.remove('b','c');//移除类
dom.classList.contains('b'); //判断类是否存在

5. 事件

1. 事件对象Event

属性	描述
target	返回触发该事件的元素
type	返回当前事件的名称
…

• 代码示例

btn.addEventListener('mouseout', function (event) {
        console.log(event);       //查看所有属性
        console.log(event.target); //<button id="btn">点击事件</button>
        console.log(event.type); //mouseout
        let h = event.target as HTMLButtonElement;
        h.style.color = 'red';
        h.style.fontSize =50+ 'px';
});

2. 事件绑定、移除

方法	说明
addEventlistener	添加事件
removeEventlistener	移除事件

<button id="btn">点击事件</button>

• 事件绑定

let btn = document.querySelector('#btn') as HTMLButtonElement;
btn.onclick = function(){ alert('鼠标点击了'); }
btn.addEventListener('click',function () {
        alert('鼠标点击了');
});
btn.addEventListener('mouseout ',function () {
        alert('鼠标移出了');
});

//添加只触发一次的事件
btn.addEventListener('mouseout ',function () {
        alert('触发一次');
},{once:true});

• 事件移除

//点击5次移出事件
let i:number = 1;
let btn = document.querySelector('#btn') as HTMLButtonElement;
function oneclick(event:MouseEvent)
{
        document.title =''+i;
        if(i>=5) btn.removeEventListener('click',oneclick);
        console.log('第'+i+'次点击');
        i++;
}
btn.addEventListener('click',oneclick)

let btn = document.querySelector('#btn') as HTMLButtonElement;
btn.onclick = function(){ alert('鼠标点击了'); }
btn.addEventListener('click',function () {
        alert('鼠标点击了');
});
btn.addEventListener('mouseout ',function () {
        alert('鼠标移出了');
});

//添加只触发一次的事件
btn.addEventListener('mouseout ',function () {
        alert('触发一次');
},{once:true});

• 事件移除

//点击5次移出事件
let i:number = 1;
let btn = document.querySelector('#btn') as HTMLButtonElement;
function oneclick(event:MouseEvent)
{
        document.title =''+i;
        if(i>=5) btn.removeEventListener('click',oneclick);
        console.log('第'+i+'次点击');
        i++;
}
btn.addEventListener('click',oneclick)

• 注：onclick、onmonseover、onmonseout、onmouseup（鼠标按键松开触发）…都属于MouseEvent对象