TypeScript总结笔记

上次萌芽说的学习笔记～直接放干货！安装配置萌芽之前有一篇博客有讲到可以去看看，配置好了的小伙伴可以和萌芽一起继续往下看哦！TypeScript安装配置在最后面：https://blog.csdn.net/Meng_ya_zi/article/details/100341670

数据类型
1.1 基本类型
函数类型
2.1 返回值
2.2 重载
类
3.1 修饰符
3.2 构造函数
3.3 继承
3.3 静态
3.4 多态
3.5 抽象
接口
泛型
命名空间
装饰器 (注解模式)

数据类型

普通的去定义

let str: string = '萌芽子',
    num: number = 1,
    is: boolean = false;

数组类型

let arr: number[] = [1, 2, 3, 4],
    arrList: Array<number> = [1, 2, 3],//泛型
    arrAny: any[] = ['123', 456, true];

元组类型 [不咋好用] 【如果你给他['多种类型',123]则会报错

let blend: [number, string] = [123, '多种类型']

枚举类型 (enum)

enum Flag { success = 1, error = 2 };
let res: Flag = Flag.success;//打印结果为 1

enum Color { bule, red = 3, 'orange' }
let color: Color = Color.orange;//如果有值则打印值，没有则打印下标
//这里打印结果为4，因为枚举成员每次都在前面一个的默认值+1

任意类型（any）

let box: any = document.getElementById('box');
box.style.background = 'red'
arrAny: any[] = ['123', 456, true];

其他类型：never类型。( null 和 undefined 的子类型)表示不会出现的值

 let err: never;
 err = (() => {
     throw new Error('错误')
 })()

定义 多类型

let rests: number | null | undefined;

函数的定义

function funString(str: string): string {
    return '' + str
}

//void类型（没有返回值）
function run(): void {

}

//有返回值
function runNum(age: number, name: string = '小红', sex?: string): number {
    return age
}

//三点运算符
function evaluation(num: number, ...result: number[]): number {
    return result.reduce(function (a, b) {
        return a + b
    });
}
evaluation(1, 2, 3, 4, 5, 6, 9)

//函数的重载（哭了，还是Java重载更方便）
function getInfo(name: string): string;
function getInfo(name: string, age: number): string;
function getInfo(name: any, age?: any): any {
    if (age) return '我叫' + name + '我的年龄是' + age;
    else '我叫' + name;
};

类

class Student {
    /*
       类里面的修饰符
       public：公有          在类里面，子类，类外面都可以访问
       protected：保护类型    在类里面，子类可以访问，外部无法访问
       private：私有         在类里面可以访问，子类，外部无法访问
       属性如果不加修饰符默认为公有属性
    */
    protected fullName: string;
    //构造函数
    constructor(firstName: any, is: any = '在') {
        this.fullName = firstName + is;
    }
    fun(): void {
        console.log(this.fullName)
    }
}



/*
  继承
  不写构造函数默认继承的是父类的构造函数
 */
class Robot extends Student {
    static str = '静态属性';
    constructor(name: string, is?: string, ) {
        super(name, is)//初始化他的超类
    }
    work(): void {
        console.log(this.fullName + '滑水')
    }
    static print(): void {
        console.log('这是一个可以直接调用的静态方法')
    }
}



/*
    静态方法随着类的加载而加载，对象是在类存在后才能创建的。
    静态方法优先于对象存在，所以不能在静态方法里访问成员变量
*/
Robot.print()//静态方法调用
const robot = new Robot('张三', '没有');
robot.work()



/**
 * 多态
 * 行为相同但表现不同则为多态
 */
class Animal {
    protected name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat(): string {
        return `${this.name}不想吃东西`
    }
}

class Dog extends Animal {
    eat(): string {
        return `${this.name}吃肉`
    }
}

class Cat extends Animal {
    eat(): string {
        return `${this.name}吃鱼`
    }
}



/**
 * 抽象类
 * 定义抽象方法(行为)其继承的子类 必须 实现抽象方法
 */
abstract class Food {
    abstract cooking(): any;
}
class apple extends Food {
    cooking(): string {
        return '苹果派'
    }
}

接口

/**
 * 接口
 * 约束属性函数以及类的行为与动作
 */
interface Person {
    name: string;
    sex: string;
    age?: number;//可选
}
function greeter(person: Person) {
    return `我叫${person.name}，今年${person.age}岁。
    \n是一个可爱的${person.sex}孩子`
}
let user = { name: '小明', sex: '男', age: 18 }
greeter(user);

//对json进行约束
function printLabel(labelInfo: { label: string }): void { }

用接口的形式模拟ajax

interface Config {
    type: string
    url: string
    data?: any
    dataType: string
}
function ajax(config: Config) {
    var xhr = new XMLHttpRequest();
    xhr.open(config.type, config.url, true);
    xhr.send(config.data);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if (config.dataType == 'json') {
                console.log(JSON.parse(xhr.responseText))
            } else {
                console.log(xhr.responseText)
            }
        }
    }
}
ajax({
    type: 'get',
    url: 'http://api.komavideo.com/news/list',
    dataType: 'json'
})

其他定义接口的方式

//加密函数类型接口
interface encrypt {
    (key: string, value: string): string
}
const md5: encrypt = function (key: string, value: string): string {
    //可以在这里写加密的东西
    return key + value
}

//定义数组索引的接口
interface userArr {
    [index: number]: string
}
const arrUser = ['萌芽', '萌芽子']

//类类型接口，接口可以继承接口
interface Name {
    name: string;
}
interface Ani extends Name {
    eat(str: string): void
}
class Do implements Ani {
    name: string;
    constructor(name: string) {
        this.name = name
    }
    eat() { console.log(this.name + '吃狗粮') }
}

泛型

/**
 * 泛型
 * 可以支持不特定的数据类型，传入的参数可返回的参数类型一致
 */
function getData<T>(value: T): T {
    return value
}
getData<number>(123);
getData<string>('123');

//类中的泛型
class MinNum<T> {
    public list: T[] = [];
    add(num: T) {
        this.list.push(num)
    }
    min(): T {
        let min = this.list[0];
        for (let i = 0; i < this.list.length; i++) {
            if (min > this.list[i]) min = this.list[i]
        }
        return min;
    }
}
let numList = new MinNum<string|number>();//实例化类
numList.add('10')
numList.add(2)
numList.add('3')
numList.add('4')
//返回为2
console.log(numList.min()) 

/**
 * 泛型接口
 */
/*
第一种
interface ConfigFn {
    <T>(value: T): T;
}
const getConfig: ConfigFn = function <T>(value: T): T {
    return value
}
getConfig<string>('张三')
*/


//第二种
interface ConfigFn<T> {
    (value: T): T;
}
function getConfig<T>(value: T): T {
    return value
}
const myGetConfig: ConfigFn<string> = getData
getConfig<string>('张三')

命名空间

/**
 * 命名空间(默认为私有)
 * 如果想要在外部调用方法则需要将该方法暴漏出去
 * 也可以将命名空间作为一个模块直接使用 export 暴漏出去
 */
export namespace CRUD {
    interface Dao<T> {
        add(info: T): boolean;
        update(info: T, id: number): boolean;
        delete(id: number): boolean;
        get(id: number): any[];
    }

    export class DaoImplements<T> implements Dao<T>{
        add(info: T): boolean {
            throw new Error("Method not implemented.");
        } update(info: T, id: number): boolean {
            throw new Error("Method not implemented.");
        }
        delete(id: number): boolean {
            throw new Error("Method not implemented.");
        }
        get(id: number): any[] {
            throw new Error("Method not implemented.");
        }
    }
    export class User {
        protected name: string | undefined;
        protected pwd: string | undefined;
        constructor(name: string, pwd: string) {
            this.name = name
            this.pwd = pwd
        }
    }
}
new CRUD.DaoImplements<CRUD.User>().add(new CRUD.User('萌芽子', 'myz'))

装饰器（注解模式）

//普通的装饰器
function logClass(params: any) {
    console.log(params)
    params.prototype.apiUrl = '动态扩展属性'
    params.prototype.run =  function(){
        console.log('执行类run方法')
    }
}

@logClass
class HttpClient {
    constructor() {

    }
    getData() {

    }
}
let http:any = new HttpClient();
console.log(http.run())

//带参数的装饰器
function logClass(params: string) {
    return function (target: any) {
        console.log(params + '函数', target)
        target.prototype.apiUrl = params
    }
}
@logClass('www.baidu.com')
class HttpClient {
    constructor() {

    }
    getData() {

    }
}
let http: any = new HttpClient();
console.log(http.apiUrl)

//装饰器的重载
function logClass(target: any) {
    console.log(target)
    return class extends target {
        apiUrl: any = '我是修改后的数据'
        getData() { }
    }
}
@logClass
class HttpClient {
    public apiUrl: string | undefined;
    constructor() {
        this.apiUrl = '我是构造函数里面的apiUrl'
    }
    getData() {
        console.log(this.apiUrl)
    }
}
let http = new HttpClient();
http.getData()

/**
 * 属性装饰器
 * 属性装饰器表达式会在运行时当作函数被调用，传入2个参数
 * 1.对静态成员来说是构造函数，对于实例成员是类的原型对象
 * 2.成员的名字
 */
//类装饰器
function logClass(params: string) {
    return function (target: any) {
        // console.log(params + '函数', target)
        target.prototype.apiUrl = params
    }
}
// //属性装饰器
function logProperty(params: string) {
    return function (target: any, attr: any) {
        console.log(target, attr)
        target[attr] = params
    }
}

@logClass('xxx')
class HttpClient {
    @logProperty('www.baidu.com')
    public url: any | undefined
    constructor() {

    }
    getData() {
        console.log(this.url);
    }
}
new HttpClient().getData()

萌芽子

发布了46 篇原创文章 · 获赞 43 · 访问量 2万+

私信关注

TypeScript总结笔记

TypeScript总结笔记

数据类型

函数的定义

类

接口

泛型

命名空间

装饰器（注解模式）

猜你喜欢