TS学习笔记

一、变量与常量

//1、类型 2、面向对象

//输出语句、

//变量

//声明变量 字母数字下划线 驼峰命名

let personname = "李逍遥001";

var personname1 = "李逍遥002";

personname = "李逍遥003"

document.write(personname +"  "+ personname1);

//常量

const tmp = "haha";

const width:number = 800;

const height = 600;

var str:string = "hhfshf"

二、变量类型

//number，string，boolean,any,array

let tmp:number=777 ;

//undefine

let tmp1:number;

//null

let tmp2 =null;

//单引号和双引号都可以括起来字符串  字符串可以用+号链接起来

document.write(tmp +"");

//字符串换行 /n 是空格  想换行 就用ESC键的按键

document.write(`dfsfssff

  中国

  人

  `);

//打印数字到字符串两种办法 一个是用+号链接字符串或者空串  二是用美元符号加大括号如下

document.write(`这个数字是${tmp}

  `);

//boolean

let bTrue:boolean = true;

//any

let anyType:any = true;

anyType = "dsds";

anyType = 11111;

//数组 类型相同 含义相同

let a: number[]=[1,2,3,4,5];

let b:number = a[3];

//联合类型

let num :string | number = 1111;

num = "error"

三、枚举

//枚举  自己定义一个属于自己的类型

enum Color{

    red,

    blue,

    green

}

enum State{

    idle,

    run,

    death,

    attack

}

//注释

/*

注释

*/

let color:number = Color.green;//0白色 1黑色

let state :number = State.idle;//0 站立 1跑步 2死亡 3攻击

//类型验证  枚举的类型也是number类型

let x = 10;

document.write(typeof x)

//类型别名

type NewNumber = number

let num:NewNumber = 555;

document.write(typeof num)

四、运算符

//运算符

//算数运算符

//+ — * / % ++ --

let num = 10%3;

num = num + 1;

num++;

document.write(num + "");

//先使用在自增

document.write(num++ + "");

//先自增在使用

document.write(++num + "");

//比较运算符> < <= >= ==(可以类型不同) ===（类型和值必须相同）!=(数值不同) !==（类型和值必须不相同）

let res:boolean = 5>3;

res = num ==3;

let num2 = 3;

let num3 = "3";

let res1:boolean = num2 === num3;

document.write(res1 + "");

//逻辑运算符 && || !

res = num >2 && num <10;

res = num >10 || num <2;

res = !res1;

//赋值运算符 = += -= *= /= %=

let c :number = 9;

c += 3;

c = c+3;

五、条件控制语句

//条件控制语句 判断语句

//age > 18

let age =28;

if(age >30){

  document.write("dsdhdlll");

}else{

    document.write("fsfsdfsf");

}

//条件表达式 三目运算符

let num = 105;

num>100?100:num;

//选择语句

enum State{

    idle,

    run,

    attack,

    die

}

let state: State = State.idle;

switch(state){

    case State.idle:

    document.write("空闲");

    break;

    case State.run:

    document.write("跑步");

    break;

    case State.attack:

    document.write("攻击");

    break;

    case State.die:

    document.write("死亡");

    break;

    default:

    document.write("其他");

}

六、循环控制语句

//循环控制语句

//0+1+2+...+100

let i= 0;

let num = 0;

while(i<101){

    if(i%2 == 0){

       num +=i;  

    }    

i++;

}

document.write(num+"");

//至少执行一次

do{

document.write(" do while 循环");

}while(i<0)

let names:string []=["1","2","3"];

let index:number = 0;

while(index<3){

document.write(names[index]);

index++;

}

 

for(let j =0; j <3; j++)

{

   document.write(names[j]);

}

//of 是内容

for(let tmpName of names)

{

   document.write(tmpName);

}

//in 是索引

for(let index1 in names)

{

   document.write(index1);

}

//跳出循环 用break 跳出最近的循环

for(let j0 =0; j0 <3; j0++)

{

    for(let j1 =0; j1 <3; j1++)

    {

        if(j1>2)

      break;

    }

}

七、函数

//输入：参数 输出：返回值

function func(char:string) :void{

    let arr:string[]=['a','b','c','d'];

    for(let i = 0;i<arr.length;i++){

         if(char ==arr[i])

         {

            document.write("当前是第"+i+"个字符。");

         }

    }

}

func('a')

func('b')

func('c')

function add(num1:number,num2:number):number{

let num = num1+num2;

if(num >100){

return 100;

}

return num;

}

let test = add(3,4);

let add2 = function (num1:number,num2:number) : number {

    let num = num1+num2;

    if(num >100){

    return 100;

    }

    return num;

}

add2(4,5);

let add3 =  (num1:number,num2:number) : number => {

    let num = num1+num2;

    if(num >100){

    return 100;

    }

    return num;

}

八、面向对象

//面向过程编程

//说话

function say(name:String,age:number){

document.write("大家好 我叫"+name+",今年"+age);

}

//跑步

function run(name:String,age:number){

document.write(name+"正在跑步");

}

let aName = "a";

let aAge = 20;

let aScore = 80;

say(aName,aAge);

let bName = "b";

let bAge = 30;

let bScore = 90;

run(bName,bAge);

//面向对象编程

//对象

//类 对象

//类：模具，抽象

//对象真实存在的物体

//类和对象是程序员自己定义的

//类中有属性和方法

class Person{

name:string ="moren";

age:number =0;

say(){

    document.write(this.name);

}

}

//实例化对象

let a = new Person();

a.name = "a";

a.age = 15;

a.say();

let b = new Person();

b.name = "b";

b.age = 25;

b.say();

 

九、构造与静态

//类中有属性和方法

//成员属性 成员方法

//静态属性 静态方法

class Person{

    static des:string="这是一个Person类";

name:string ="moren";

age:number =0;

//构造方法

constructor(name:string,age:number){

this.name = name;

this.age = age;

}

static test(){

}

say(){

    document.write(this.name);

}

}

Person.des = "a"

Person.test();

//实例化对象

let a = new Person("a",15);

a.say();

let b = new Person("b",25);

b.say();

十、继承与抽象类

//继承

class Person{

    name:string = "";

    say(){

        document.write("我是人类，叫做"+this.name);

    }

}

class Student extends Person{

num:number = 0;

score:number = 0;

say(){

    super.say();

    document.write("我是学生，叫做"+this.name);

}

}

let a = new Student();

a.name="dddd";

a.say();

//抽象类 本身不能被实例化为对象 可以被继承

abstract class Person1{

    name:string = "";

    run()

    {}

    abstract say1():any;

}

class Student1 extends Person1{

num:number = 0;

score:number = 0;

say1(){

    document.write("我是学生1，叫做"+this.name);

}

}

let a1: Person1 = new Student1();

a1.name= "wangerxiao";

a1.say1();

十一、接口与属性扩展

//接口

class Person{

name:string;

}

interface IWolf{

attack();

}

interface IDog{

eat();

}

class WolfMan extends Person implements IWolf{

attack(){

}

eat(){

}

}

//属性寄存器

class Person1{

_hp:number = 100;

//取值

get hp()

{

return this._hp;

}

//赋值

set hp(value)

{

if(value<0){

this._hp =0;

}else{

this._hp =value;

}

}

}

十二、名称空间

namespace aa{

export class Person{

    name:string = "";

}

}

namespace bb {

  export  class Person{

    age:number = 6;

}

}

let person = new aa.Person();

let personb = new bb.Person();

十三、泛型

//

function add(num:any):any {

    if(typeof num == "number")

    {

        num++;

        return num;

    }

    return num;

}

document.write(add(3)+"");

function add1<T>(num:T):T {

    if(typeof num == "number")

    {

        num++;

        return num;

    }

    return num;

}

document.write(add1<number>(3)+"");

document.write(add1<string>("3")+"");

十四、元组数组字典

//元组

let hero:[string,number]=["chaoren",100];

hero[0] = "ffff";

document.write(hero[0]);

//数组

let array1:number []=[1,2,3];

let array2:Array<number> = new Array<number>();

//长度

document.write(array1.length+"");

//数组后面追加元素

array1.push(4);

//数组前面追加元素

array1.unshift(0);

//删除最后面的元素

array1.pop();

//从第几位删除几个

array1.splice(0,1);

//删除最前面的元素

array1.shift();

//合并两个数组

array1 = array1.concat(array2)

//查找元素位置

let index = array1.indexOf(3);

//排序

array1.sort();

array1.reverse();

document.write(array1+"");

//["a","b","c"] key value 0:"a" 1:"b" 2:"c"

//字典

let dic:{[key:string]:string}={

    "name0":"wangxiaohu",

    "name1":"wangxiaohu1"

}

dic["name3"]="dsdd";

document.write(dic["name3"]);

十五、回调

//函数传参

function func(value:Function){

value("NonNullable");

}

 

function test(name:String){

    document.write("test");

}

func(test);

func(function(name:String){

document.write("test2");

});

func((name:String)=>{

document.write("test3");

});

十六、正则表达式

 

 

 

let reg = /\d{4}-\d{7}/g;

let str = "0345-1234567";

let res = reg.exec(str);

//是否匹配到

document.write(res.length+"");

//匹配到的内容

res.forEach(function(value,index){

document.write(value+" "+index);

});

十七、访问修饰符

//访问修饰符 public 公开的 protectedprotected 受保护的 private 私有的
class Person{
    public name: string;
    public say() {
        
    }
}

class Student extends Person{
    constructor() {
        super();
        this.name;
    }
}
let a = new Person();
a.name = "";
a.say();

十八、单例模式

class SoundManager{
    static Instance = new SoundManager();

    private constructor(){}
}

SoundManager.Instance

class SoundManager1{
    private static instance :SoundManager1;

    private constructor() { }
    static Instance() {
        if (!SoundManager1.instance)
        {
            SoundManager1.instance = new SoundManager1();
        }
        return SoundManager1.instance;
    }
}

SoundManager1.Instance();

十九、代理模式

interface ICalc{
    calc(num1, num2): number;
}

class Npc1 implements ICalc{
    calc(num1, num2) {
        return num1 + num2;
    }
}

class Npc2 implements ICalc{
    calc(num1, num2) {
        return num1 - num2;
    }
}

class Person {
    //代理
    delegate: ICalc;
    Getnum(num1, num2) {
        let num = this.delegate.calc(num1, num2);
        document.write(num +"")
    }
}
let person = new Person();
person.delegate = new Npc1();
person.Getnum(3, 4);
person.delegate = new Npc2();
person.Getnum(3,4);
 

二十、观察者模式

interface IObserver{
    nameChanged(newName);
}

class Person {
    private _name: string;
    //所有观察者
    observers: Array<IObserver> = new Array<IObserver>();

    set name(value) {
        this._name = value;
        //发生变化 
        //遍历观察者数组，给所有观察者发消息
        for (let observer of this.observers){
            observer.nameChanged(this._name);
        }
    }

    get name() {
        return this._name;
    }
}
class Test implements IObserver{
    nameChanged(newName) {
        document.write("监听到变化吗，名字变为"+newName);
    }
}

let person = new Person();
let test = new Test();
//设置为监听对象
person.observers.push(test);

person.name = "haha "

二十一、工厂模式

enum CarType{

    Bmw,

    Audi,

    Benz

}

class Car{

    name:string ="";

    //工厂方法

    static Create(carType:CarType):Car{

    let car :Car;

    switch(carType) {

        case CarType.Audi:

        car = new Audi();

        break;

        case CarType.Bmw:

        car = new Bmw();

        break;

        case CarType.Benz:

        car = new Benz();

        break;

    }

    return car;

    }

}

class Bmw extends Car{}

class Audi extends Car{}

class Benz extends Car{}

let bmw = Car.Create(CarType.Audi);

二十二、链表

​​​​​​​

class Person{

    name:string;

    next:Person;

    constructor(name:string){

    this.name = name;

    }

}

let person = new Person("1111");

person.next = new Person("2222");

person.next.next = new Person("333");

//删除

person.next =person.next.next;

//添加

let tmpPerson = new Person("4444");

tmpPerson.next = person.next;

person.next = tmpPerson;

while(person)

{

document.write(person.name);

//让节点向后移

person = person.next;

}