TypeScript

最新推荐文章于 2022-06-20 08:25:39 发布

奈斯兔米鱿

最新推荐文章于 2022-06-20 08:25:39 发布

阅读量342

点赞数 1

文章标签： typescript 开发语言

本文链接：https://blog.csdn.net/qq_47132211/article/details/123254219

版权

一、变量类型

与 js 不同的是变量类型多了any ，any 可以存储任何类型的值。

let tmp:number = 1;
document.write(`这个数字是${tmp}.`);
let a: number[] = [1,2,3,4,5,6,7,8,9,10];
let b: number[] = a[2];
document.write(`这个数字是${b}`);
// 联合类型
let c: number|string = 0;
c = "hd";
document.write(`这个值是${c}.`);

二、枚举类型验证

// 枚举 自己定义一个属于自己的类型
enum Color {
    red,
    blue,
    green
}
enum State {
    idle = 2,
    run,
    death = 10,
    attack
}

let color: Color = Color.green;
let state: State = State.idle;

// 类型验证typeof
let x = 10;
// document.write (typeof color);  // 枚举最后的实现类型是number
document.write(State.idle + "");

// 类型别名
type NewNumber = number;
let num: NewNumber = 3;
document.write(typeof num);

三、条件控制语句

// 条件控制语句   判断语句
let age = 20;
if (age > 18) {
    document.write("成年人");
}else {
    document.write("未成年人");
}

let score = 80;
if (score >= 0 && score <60) {
    document.write("不合格");
} else if (score >= 60 && score < 80) {
    document.write("合格");
} else if (score >=80 && score <= 100) {
    document.write("优秀");
} else {
    document.write("出错");
}

let num = 105;
if (num > 100) {
    num = 100;
}

// 三目运算符    条件?值1:值2；
num = 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;
    default:
    document.write("其他状态");

}

五、循环控制语句

// 循环控制语句
let names: string[] = ["王小虎","李逍遥","赵灵儿"];
let i: number = 0;
while (i < 3) {
    document.write(names[i]);
    i++;
}

for (let j = 0;j < 3; j++) {
    document.write(names[j]);
}

for (let tmpName of names) {  // 从数组里面遍历赋值给tmpName
    document.write(tmpName);
}

// 遍历的是索引
for (let index in names) {
    document.write(index);
}

for (let i = 0; i < 10; i++){
    if (i>5) {
        break;   // break 找到最近的一个for循环，退出该循环
    }
}

六、函数

let arr: string[] = ['a','b','c','d','e'];
let char: string = 'b';
for (let i = 0;i < 5;i++) {
    if (char == arr[i]) {
        document.write("当前是第"+ i +"个字符。");
    }
}

let char2: string = 'c';
for (let i = 0;i < 5;i++) {
    if (char2 == arr[i]) {
        document.write("当前是第"+ i +"个字符。");
    }
}

// 函数
function func(char:string) {
    let arr:string[] = ['a','b','c','d','e'];
    for (let i = 0; i < 5; i++){
        if (char == arr[i]) {
            document.write("当前是第"+ i +"个字符。");
        }
    }
}
func('a');
func('b');

// 普通函数
function add(num1: number,num2: number): number {
    let num =num1 + num2;
    if (num > 100) {
        return 100;
    } else {
        return num;
    }
}
let test = add(3, 4);

// 函数2
let add2 = function(num1, num2):void {

}
add2();

// 函数3
let add3 = (num1,num2): void => {
    
}

七、面向过程对象

// 面向过程   改成面向对象好些

// 说话
function say(name:string,age :number ) {
    document.write ("我叫"+ name +",岁数"+ age);
}

//跑步
function run(name: string) {
    document.write(name + "正在跑步");
}

let aName:string = "令狐冲";
let aAge:number = 20;
let aScore: number =80;
say(aName, aAge);
run(aName);

八、构造与静态

// 面向对象
// 类：人           对象：令狐冲
class Person{
    static des: string = "这是一个Person类。";  // 静态属性
    name: string = "默认";
    age :number = 0;

    // 构造函数
    constructor (name1: string,age1: number ) {
        this.name = name1;
        this.age = age1;
    }

    static test() {   // 静态方法

    }

    say() {
        document.write(this.name);
    }
}

Person.des = "a";
Person.test();

// 实例化对象
let a = new Person("令狐冲",20);
a.say();

// a.name = "令狐冲";
// a.age = 20;
// a.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 = "aaa";
a.say();

// 抽象类  本身不能被实例化为对象，可以被继承
abstract class Person{
    name: string = "";

    run() {

    }

    abstract say();
}
class Student extends Person{
    say() {

    }
}

let a: Person = new Student();
a.say();

十、接口与属性扩展

// 接口
 class Person{
     name: string;
 }
 interface IWolf{  // 设置接口
     attack();
 }

 class wolfMan extends Person implements IWolf{   // 接上接口
    attack() {

    }
 }

// 属性寄存器
class Person{
    _hp:number = 100;   // 真属性

    // 取值
    get hp() {
        return this._hp;
    }

    // 赋值
    set hp(value) {
        if (value < 0) {
            this._hp = 0;
        } else {
            this._hp = value;
        }
    }
}
let a = new Person();
a.hp = -180;
document.write(a.hp + "");

十一、名称空间

// A B
// 合并   名称空间
namespace aa{
    export class Person{  // 想在外面用则要加 export
        name: string;  
    }
}

namespace bb{
    export class Person{
        // ...
    }
}
let person = new aa.Person();
let person2 = new bb.Person();

十二、泛型

// 输入的是数字型则加一，否则返回本身
function add(num: any): any{
    if (typeof num == "number") {
        num++;
        return num;
    }
    return num;
}
document.write(add(3) + ""); // 返回的类型不确定

// 泛型
function add<T>(num: T): T{
        if (typeof num == "number") {
        num++;
        return num;
    }
    return num;
}
document.write(add<number>(3) + "");  // <number>定义T的类型是数字型

十三、元组数组字典

// 元组
let hero:[string,number] = ["超人",100];
hero[0] = "蝙蝠侠";
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);  // 从第0位开始删除1个元素

// 删除最前面的元素
array1.shift();

// 合并两个数组
array1 = array1.concat(array2);
document.write(array1 +"");
// 查找元素位置
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 } = {
    "name":"我",
    "name2":"你"
};
dic["name3"] = "他";
document.write(dic["name3"]);

十四、回调

// 函数传参
function func(value: Function) {  // 定义value的类型是函数
    // ...
    value("nana");
}

function test(name) {
    document.write("test");
}
func(test);

func(function(name) {
    document.write("test2");
});

func((name) => {
    document.write("test3");
});

十五、正则表达式

元字符	含义
.	匹配除换行符以外的任意字符
\w	匹配字母或数字或下划线或文字
\s	匹配任意的空白符
\d	匹配数字
\b	匹配单词的开始或结束
^	匹配字符串的开始
$	匹配字符串的结束

常用限定符：

元字符	含义
{n}	重复n次
{n,}	重复大于等于n次
{n,m}	重复n到m次
*	重复大于等于0次
+	重复大于等于1次
？	重复0次或1次

全数字：^[0-9]$
电话号：\d{3}-\d{8}|\d{4}-\d{7}
QQ号：[1-9][0-9]{4,}
账号（字母开头，5-16位，允许字母数字下划线）:^[a-zA-Z][a-zA-Z0-9_]{4,15}$

let reg = /\d{4}-\d{7}/g;   // 放在//g里面
let str = "0345-1234567";
let res = reg.exec(str);
// 是否匹配到
document.write(res.length + "");
// 匹配到的内容
res.forEach(function (value,index) {  // value匹配到的内容 index从哪一位匹配上的
    document.write(value + "" + index);
});

十六、访问修饰符

// 访问修饰符 public公开的    protected受保护的（仅自己和子类访问，外部访问不了）   private私有的(仅自己访问，子类访问不了)
class Person{
    private name: string;

    private say() {
        this.name
    }
}

class Student extends Person{
    constructor() {
        super();
        this.name
    }
}

let a = new Person();

// 访问修饰符 public公开的    protected受保护的（仅自己和子类访问，外部访问不了）   private私有的(仅自己访问，子类访问不了)
class Person{
    private _name: string;

    set name(value) {
        this._name = value;
    }

    get name() {
        return this._name;
    }
}

class Student extends Person{
    constructor() {
        super();
    }
}

let a = new Person();

十七、单例模式

// 单例模式

class SoundManager {
    static Instance = new SoundManager();

    private constructor(){}
}

// 用声音管理类     用属性调用
SoundManager.Instance

// 单例模式   

class SoundManager {
    private static instance: SoundManager;
    private constructor(){}

    static Instance() {
        // 当前单例是否产生
        // 懒加载  
        if (!SoundManager.instance) {
            SoundManager.instance = new SoundManager();
        }
        return SoundManager.instance;
    }
}

// 用声音管理类    用方法调用
SoundManager.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) {
        // 拿到num1和num2计算后的结果
        let num = this.delegate.calc(num1,num2);
        document.write(num + "");
    }
}
let person = new Person();
// 设定一个代理
person.delegate = new Npc1();
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="hahaha";

二十、工厂模式

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.Benz:
                car = new Benz();
                break; 
            case CarType.Bmw:
                car = new Bmw();
                break;
        }
        return car;
    }
}

class Bmw extends Car{}
class Audi extends Car{}
class Benz extends Car{}

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

二十一、链表

class Person{
    name: string;
    next: Person;

    constructor(name){
        this.name = name;
    }
}

let person = new Person("李");
person.next = new Person("王");
person.next.next = new Person("赵");

// 删除
person.next = person.next.next;
// 添加
let tmpPerson = new Person("赵2");
tmpPerson.next = person.next;
person.next = tmpPerson;

while (person) {
    document.write(person.name);
    // 让节点往后移
    person = person.next;
}