TS学习笔记（类与继承，函数，枚举） 声明文件

类 声明用class 分三部分

属性

构造函数（给属性赋值）

方法

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");



// .....................
class People {
    move(distance: number) {
        console.log(`People moved ${distance}m.`)
    }
}
class King extends People {
    bark() {
        console.log("aaa")
    }
}
let xiaoming = new King()
xiaoming.bark();
xiaoming.move(20)

上面只是简单的书写了方法继承 属性继承则需要super 用来调用父类的构造函数

 

class People {
    name: string;
    constructor(fname: string, age: number) {
        this.name = fname;
    }
    move(distance: number) {
        console.log(`People moved ${distance}m.`)
    }
}

//需要注意的是 继承哪些属性 constructor里面的参数就要有哪些 父类定义的初始化赋值方法如果不变则不用再写this.*****  
//但是新增的属性赋值 虽然是新增的但是也要在super的参数中写一下(暂不明白具体原因 尝试  如果constructor的参数两个 super参数一个 会报错)
//换句话说 constructor里面的参数应该和super里面的参数是一样的 （想要继承的 和新增的函数）

class King extends People {
    age: number;
    constructor(name, tage) {
        super(name,tage)
        this.age = tage;
    }
    bark() {
        console.log("aaa")
    }
}
let xiaoming = new King("小明",18)
console.log(xiaoming.name+xiaoming.age)

public与private

//在上面代码的基础上
console.log(new King("测试一",18).name)
//可以访问   默认为 public


class King extends People {
    private age: number;
    constructor(name, tage) {
        super(name, tage)
        this.age = tage;
    }
    bark() {
        console.log("aaa")
    }
}


//将属性用private声明一下 则无论是
console.log(new King("测试一",18).age)
//还是
console.log(xiaoming.age)
//都将会报错  拒绝外部访问

类的存储器

class Employee {
    fullName: string;
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    console.log(employee.fullName);
}

在以前不用 getter  setters的时候 我们可以随意的修改fullName 很方便  但是这里我们想加一个检查（过滤或者说判断） 比如

先检查用户密码是否正确，然后再允许其修改员工信息。

let password = "start password"
class Employee {
    private _fullName: string;
    get fullName(): string {
        return this._fullName+"访问";
    }

    set fullName(newName: string ){
        if (password && password == "start password") {
            this._fullName = newName
            console.log(this._fullName+"456")
        }
        else {
            console.log("Error")
        }
    }
}

let employee=new Employee();
employee.fullName="Bob";
if(employee.fullName){
    console.log(employee.fullName)
}


//需要注意的是 当我们访问fullName这个属性的时候 get这个函数就会被触发（或者说执行）
//         当我们对fullNname这个属性进行设置的时候  set 这个函数就会被触发（执行）
//当变量password 发生改变的时候  set判断不成立 则 Erroe

书写完整函数类型

有两种写法

let add = function (a: number, b: number): string {
    return a + b + "0"
}
console.log(add(1, 1));


//另一种感觉像是箭头函数

let decrease: (a: string, b: string) => string =
    function (a: string, b: string): string {
        return a +b
    }
console.log(decrease("20", "1111"))


//需要注意的是在TS 中 减法运算左右侧必须是数字类型的变量


function add(name:string,age:number):any{
    console.log("123")
}
add("的",12)
//这样也是可以的  只不过add 不是声明的变量

可选参数

传递给一个函数的参数个数必须与函数期望的参数个数一致。（可以用默认参数或者可选参数减少传入的值  但是绝对不可以比期待传入的参数还多了）

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // ah, just right

这时候如果我们改成可选参数  传递的参数可有可无 则加上？ 即可 需要注意的是 必须参数必须在前面  可选参数必须在后面

如果 想让fistName 是可选参数  就需要 改变他们两个的顺序

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");  // ah, just right

默认参数  

与ES6类似 在传参那里 用= 赋予默认值

function abc(a:string,b="默认"):any{
    console.log(a+b)
}
abc("bbbb")

//此时 就不需要一定要传两个参数了  
//需要注意的是 此时函数没有返回值  函数类型需要注意

泛型

可以使传入的类型与返回的类型一致

一个接口函数类 传入的类型不一定的时候使用泛型 不确定是哪种类型

function abc <T>(a:T):T{
    return a
}
console.log(abc("你好啊"))

我们给identity添加了类型变量T。 T帮助我们捕获用户传入的类型（比如：number），之后我们就可以使用这个类型。 之后我们再次使用了 T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。 这允许我们跟踪函数里使用的类型的信息。  这个函数abc 就叫做泛型。

需要注意的是类型T 有可能是任何的类型变量  比如有的有.length属性 有的没有 所以就不能使用

但是 像数组 就明确有.length属性的  可以这样写

function loaa<T>(arg: T[]): T[] {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

枚举

需要注意的是  基于数字的枚举与基于字符串的枚举 使用的时候不太一样 看例子

enum Direction {
    Up,
    Down,
    Left,
    Right,
}
//默认是数字
console.log(Direction[0])     //up
console.log(Direvtion.Up)    //0
enum Direction {
    Up = "a",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}
console.log(Direction["Up"])  //a

声明文件 如 jq

 npm install @types/jquery --save-dev 

乍一用 好像没什么用  将编译出来的js  引入html 还是会报错的啊 

 实际上这条命令的作用是使ts识别jq命令  $

但是需要注意的是  即使编译成了js  因为没有引入JQ 所以 html文件还是无法识别 $ 所以 需要在html文件中引入JQ 即可

 

 

声明文件

我个人理解 就是声明了 很多的全局变量 类之类的  在.d.ts中  用全局声明以后  在.ts中直接就可以使用不用引入

//animal.d.ts

declare class Animal{
    name:string;
    constructor(name:string);
    say():string;
}

// index.ts

let cat =new Animal("小猫")
// 同时会验证cat 是否符合 Animal的结构 （需要一个参数）