TS笔记

作者: 瘾_95f1 | 来源:发表于2019-04-30 13:39 被阅读0次

Typescript
TS初学笔记
TS 笔记
ts笔记
TS笔记
TS 笔记this
TS笔记
TS笔记
2019-10-16
angluar学习笔记基本操作

继承

function Person() {
    this.name = 'htf';
    this.age = 18;
    this.run = function() {
        alert(`${this.name}在运动`);
    } 
}
// 原型链上的属性会被多个实例共享，构造函数不会
Person.prototype.sex = '男';
Person.prototype.work = function() {
    alert(`${this.name}在工作`);
}
// 静态方法
Person.getInfo = function() {
    alert('我是静态方法')
}
let person = new Person()
person.run()
person.work()
Person.getInfo()
// 对象冒充继承
function Web() {
    Person.call(this)
}
let web1 = new Web()
// 对象冒充可以继承构造函数的属性和方法，但是没有办法继承原型链上的属性和方法
web1.run()
web1.work() // 报错

// 原型链实现继承 既可以继承构造函数里面的属性方法，也可以继承原型链上的属性和方法
function Pub() {}
Pub.prototype = new Person()

以上两种继承都不可以传参

一般继承使用的是两者的结合，如下

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function() {
        alert(`${this.name}在运动`)
    }
}
Person.prototype.work = function() {
    alert(`${this.name}在工作`)
}
function Web(name, age) {
    Person.call(this, name, age)
}
// Web.prototype = new Person()
Web.prototype = Person.prototype
let w = new Web("htf",18)
w.run()
w.work()

TS中定义类

class Person {
    name: string;
    age: number;
    constructor(name, age) {     //构造函数  实例化类的时候触发的方法
        this.name = name;
        this.age = age
    }
    run():void {
        alert(`${this.name}---${this.age}`)
    }
}
let p = new Person('htf',18)
p.run()

class Person {
    name: string;
    constructor(name) {     //构造函数  实例化类的时候触发的方法
        this.name = name;
    }
    getName():string {
        return this.name;
    }
    setName(name:string):void {
        this.name = name
    }
}
let p = new Person('htf')
alert(p.getName())
p.setName('lisi')
alert(p.getName())

TS中实现继承

class Person {
    public: name: string;
    constructor(name) {
        this.name = name
    }
    run(): string {
        return `${this.name}在运动`
    }
}
class Web extends Person {
    constructor(name: string) {
        super(name)          //初始化父类的构造函数
    }
}
let w = new Web('lisi')
alert(w.run())

类的修饰符 typescript里面定义属性的时候给我们提供了三种修饰符

public 公有在类里面子类类外面都可以访问
protected 保护类型在类里面。子类里面可以访问，在类外面都没法访问
private 私有在类里面可以访问子类类外部都没办法访问
属性不写修饰符，默认就是公有（punlic）

静态方法和静态属性

// es5 静态属性和静态方法
function Person() {
    this.run = function() {

    }
}
Person.name = 'htf' /**静态属性 */
Person.run1 = function() {  /**静态方法 */

}
Person.run1() /**静态方法的调用 */

在TS中定义

class Person {
    public name: string
    public age: number = 20
    static sex: string = '男'
    constructor(name: string) {
        this.name = name
    }
    run() { /**实例化方法 */
        alert(`${this.name}在工作`)
    }
    static print() {  /**静态方法没有办法直接调用类里面的属性。只能调用类里面的静态属性*/
        alert(`${this.name}的静态方法---年龄${this.sex}`)
    }
}
/**静态方法的调用 */
Person.print()
/**静态属性的调用 */
alert(Person.sex)

多态

父类定义一个方法不去实现，让继承它的子类去实现，每一个子类有不同的表现
多态也是一种继承

class Animal {
    public name: string
    constructor(name: string) {
        this.name = name
    }
    eat() {     /**具体吃什么不知道   让其继承它的子类去实现  每一个子类表现的不一样 */
        console.log('在吃的方法')
    }
}
class Dog extends Animal {
    constructor(name: string) {
        super(name)
    }
    eat() {
        console.log(`${this.name}在吃肉`)
    }
}
class Cat extends Animal {
    constructor(name: string) {
        super(name)
    }
    eat() {
        console.log(`${this.name}在吃鼠`)
    }
}

抽象类

typescript 中的抽象类，它是提供其他类继承的基类，不能直接被实例化
用abstract关键字定义的抽象类，抽象类中的方法不包含具体的实现且必须在派生类中实现
抽象方法只能放在抽象类中
抽象类和抽象方法用来定义标准

// 抽象类和抽象方法用来定义标准的      标准： Animal 这个类要求子类必须包含eat方法
abstract class Animal {
    public name: string;
    constructor(name: string) {
        this.name = name
    }
    abstract eat():any;   // 抽象方法必须在子类中实现
    run() {
        // 其他方法可以在子类中不实现
    }
}
class Dog extends Animal{
    constructor(name: string) {
        super(name)
    }
    eat() {
        console.log(`${this.name}在吃粮食`)
    }
}

接口

接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里，接口起到一种限制和规范的作用，接口定义了某一批所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，他只是规定这批类里面必须提供某些方法，提供这些方法的类可以满足实际需求，typeScript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性，函数，可索引和类等。

TS中自定义方法传入参数对 json进行约束

function printLabel(labelInfo: {label:string}): void {
    console.log('printLabel')
}
printLabel({label:"2"})

接口属性

interface FullName {
    firstName: string;
    secondName: string;     //  注意以分号结束
}
function printName(name: FullName) {
    console.log(`${name.firstName}-----${name.secondName}`)
}
printName({           
    firstName: '1',
    secondName: '2'
})

接口可选属性

interface FullName {
    firstName: string;
    secondName?: string;
}
function printName(name: FullName) {
    console.log(name)
}
printName({
    firstName: '3333'
})

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

函数类型的接口

// 函数的类型接口 对方法传入的参数 以及返回值进行约束
// 加密函数接口

interface encrypt{
    (key: string, value: string): string;
}
let md5: encrypt = function(key: string, value: string): string {
    return key + value
}
md5('33','3333')

可索引接口

// 可索引接口：数组/对象的约束 （不常用）
interface UserArr {  // 对数组
    [index: number]: number
}
let arr: UserArr = [22,333]

interface UserObj {    // 对  对象
    [index:string]: string
}
let obj: UserObj = {name:'33','age':'33'}

类类型接口

// 类类型接口：对类的约束  和 抽象类有点相似
interface Animal {
    name: string;
    eat(str: string): void;
}
class Dog implements Animal {
    name: string;
    constructor(name: string) {
        this.name = name
    }
    eat(food: string) {
        console.log(`${this.name}---${food}`)
    }
}
let d = new Dog('htf')
d.eat('dacang')

接口的扩展

// 接口的扩展：接口可以继承接口
interface Animal {
    eat(): void
}
interface Person extends Animal {
    work(): void
}
class Web implements Person {
    public name: string;
    constructor(name: string) {
        this.name = name
    }
    eat() {
        console.log(1)
    }
    work() {
        console.log(2)
    }
}

class Per {
    public name: string;
    constructor(name: string) {
        this.name = name
    }
    print() {
        console.log(222)
    }
}
class Web1 extends Per implements Person {
    
    constructor(name: string) {
        super(name)
    }
    eat() {
        console.log(1)
    }
    work() {
        console.log(2)
    }
}
let c = new Web1("22")
c.print()

泛型

// T表示泛型，具体什么类型，调用这个方法的时候决定
function getData<T>(value: T): T {
    return value
}
getData<number>(222)
getData<string>('222')

泛型类

// 泛型类：比如有个最小堆算法，需要同时支持返回数字和字符串两种类型，
class MinClass<T>{
    public list:T[] = [];
    add(value: T): void{
        this.list.push(value);
    }
    min():T {
        let minNum = this.list[0]
        for(let i = 0;i < this.list.length; i++) {
            if(minNum > this.list[i]) {
                minNum = this.list[i]
            }
        }
        return minNum
    }
}
let m1 = new MinClass<number>()
m1.add(22)
m1.add(223)
m1.add(212)
alert(m1.min())

interface ConfigFn<T>{
    (value: T): T;
}
function getData<T>(value: T): T {
    return value;
}
let myGetData: ConfigFn<string>=getData;
myGetData('20')

Typescript
TypeScript（TS）部分 TypeScript学习笔记
TS初学笔记
整理之前学习ts时的一些笔记。安装或者安装 ts-node ，将以上两步合并为一步 ts-node hello...
TS 笔记
一、简介 TypeScript 是 JavaScript 的一个超集，可以编译成纯JavaScript 适用于任何...
ts笔记
教程 1.ts提供静态代码分析：检查代码结构和类型注解；
TS笔记
继承以上两种继承都不可以传参一般继承使用的是两者的结合，如下 TS中定义类 TS中实现继承类的修饰符 typ...
TS 笔记this
this 箭头函数在箭头函数创建的地方获得this；非箭头函数，在调用函数的地方获得this如图
TS笔记
TS笔记
1、类型字面量：let a: 10 ==> const a = 10 unknown：实际上是一个类型安全的...
2019-10-16
https://ts.xcatliu.com/introduction/get-typescript 学习笔记入...
angluar学习笔记基本操作
新建 typescript interface笔记app.component.ts app.component.h...

TS笔记

继承

TS中定义类

类的修饰符 typescript里面定义属性的时候给我们提供了三种修饰符

静态方法和静态属性

多态

抽象类

接口

相关文章

Typescript

TS初学笔记

TS 笔记

ts笔记

TS笔记

TS 笔记this

TS笔记

TS笔记

2019-10-16

angluar学习笔记基本操作

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

TS笔记

继承

TS中定义类

类的修饰符 typescript里面定义属性的时候给我们 提供了三种修饰符

静态方法和静态属性

多态

抽象类

接口

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

类的修饰符 typescript里面定义属性的时候给我们提供了三种修饰符