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