typscript 语法1

let isDone: boolean = false;
let decLiteral: number = 0xf00d;
let names: string = 'boob';
/** 使用模版字符串 */
let name1: string = `gene`;
let age: number = 37;
let sentence = `Hello, my name is ${name1}I'll be ${age + 1} years old next month `;

function error(message: string): never {
    throw new Error(message);
}
let str: string = 'nihao';
// 元组类型
let arr1: [number, string] = [123, "aa"];
//枚举类型
enum personm {
    age = 1,
    height = 2
}
let s: personm = personm.age;
// r任意类型
let num: any = 123;
let oBox: any = document.getElementById('#oBox');
console.log(oBox);
// number 类型， null, undefined
let num1: number | null | undefined;

num = 1234;

//void类型 表示没有任何类型，一般用于 定义 没有返回值的方法
function run(): void {
    console.log('run');
}

// 必须要返回 number类型
function run1(): number {
    console.log('run');
    return 1;
}

// 任意类型
var arr2: any[] = ['123', 'asd', 123];

//3.1 TS中 函数的定义
function getInfo(name: string, age: number): string {
    return `${name}:${age}`
}
console.log(getInfo('tong', 222));
//匿名函数
let getInfo1 = function (name: string, age: number): string {
    return `${name}:${name}`
}
//没有返回值的方法
function run2(): void {
    console.log('run');
}

//3.2 TS中 可选参数
//es5的形参 和 实参 可以不一样
//注意:age?:number 可选参数 必须放到最后面

function getInfo2(name: string, age?: number): string {
    if (age) {
        return `${name} --- ${age}`;
    } else {
        return `${name} ---年龄保密`
    }
}
console.log(getInfo2('tong1'))

//3.3 默认参数
function getInfo3(name: string, age: number = 22) {
    if (age) {
        return `${name} --- ${age}`;
    } else {
        return `${name} ---年龄保密`
    }
}
console.log(getInfo3('tong2'))

//3.4 剩余参数

// function sum(a:number,b:number,c:number,d:number):number{
//     return a+b+c+d;
// }
//三点运算符接受剩余参数   ...
function sum(...result: number[]): number {
    let sum = 0;
    for (let i = 0; i < result.length; i++) {
        sum += result[i];
    }
    return sum;
}

console.log(sum(1, 2, 3, 4, 5, 6, 7, 8))

//3.5 TS 函数的重载
function getInfo4(config: string): string;
function getInfo4(age: number): number;
function getInfo4(name: string, age: number): string;

function getInfo4(str: any, age?: any): any {
    if (typeof str === 'string') {
        return '我叫：' + str;
    } else {
        return '我的年龄' + str;

    }
}
//调用
console.log(getInfo4('tong1')); //正确
console.log(getInfo4(20)); //正确
//错误用法
// console.log(getInfo4(true));

//3.6 箭头函数 this 指向的问题，上下文
setTimeout(() => {
    // console.log('箭头函数');
})

/**---------------------------es5--------------------------- */
// //es5 里面的继承
// //4.1 简单类
// function person(){
//     this.name = 'tong';
// }
// var p = new person();
// console.log(p.name);

// //4.2 构造函数和原型链里面增加方法

// function person1(){
//     this.name= 'tong1';
//     this.age = 20;
//     this.run = function(){
//         console.log('tong1在 run')
//     }
// }
// person1.prototype.sex='男';
// person1.prototype.work= function (){
//     console.log('tong1 在工作 ')
// }

// var p1 = new person1();
// p1.run();

// //4.3 类里面的静态方法
// function person2(){
//     this.name= 'tong2';
//     this.age = 20;
//     this.run = function(){
//         console.log('tong2在 run')
//     }
// }
// person2.getInfo = function(){
//     console.log('person2的静态方法');
// }
// person2.getInfo();

// //4.4 继承 原型链和对象冒充
// function webPerson(){
//     person1.call(this); /** 这就是对象冒充 使用call 函数 */
// }
// var wp = new webPerson();
// wp.run(); /** 对象冒充 只可以 继承构造函数里面的对象和方法 */

// // wp.work();/** 注意！ 对象冒充 无法 继承原型链上面的方法 */

// //4.5 原型链继承
// webPerson.prototype = new person1(); // 原型链继承
// var wp1=new webPerson();
// console.log('------------')
// wp1.work();/** 实现原型链继承的好处 既可以继承构造函数的属性方法 也可以继承原型链的方法  */

// //4.6原型链继承的问题  实例化子类的时候 无法给父类传参

// //4.7 ！！重点 组合继承的方式  原型链加构造函数的
// function person3(name,age){
//     this.name= name;
//     this.age = age;
//     this.run = function(){
//         console.log(this.name + ' 在 run : 原型链加构造函数');
//     }
// }
// person3.prototype.sex='男';
// person3.prototype.work= function (){
//     console.log('tong1 在工作 ')
// }
// function person3C(name,age){
//     person3.call(this,name,age); // 对象冒充继承 实例化子类可以给父类传参
// }
// person3C.prototype = new person3();

// var newP3= new person3C('tong3C',22);
// newP3.run();
/**---------------------------es5 end--------------------------- */

// 5.ts 中定义类
class person4 {
    name: string; // 属性 前面省略了publick关键词
    constructor(n: string) {// 构造函数 实例化出发的方法
        this.name = n;
    }
    run(): void {
        console.log(this.name);
    }

}
//实例化
var p4 = new person4('tong4');
p4.run();

//5.1 ts 中关于继承的探讨  父类的方法和子类的方法一致
class Web5 extends person4 {
    constructor(name: string) {
        super(name);// 初始化 父类的构造函数
    }
    work() {
        console.log(`${this.name} 在work`)
    }
    run() {
        console.log(`${this.name} :子类的run`)
    }
}
var w1 = new Web5('tong5 class extents继承');
w1.run();
w1.work();
//类的 三种 修饰符
/**
 * public : 公有  在当前类里面，子类，类外面都可以访问
 * protected : 保护类 在当前类里面/子类里面可以访问，在类外部无法访问
 * private ： 私有 找类里面可以访问， 子类，类外面都无法访问
 */
// public
// protected
class person6 { // 如果不加修饰符 默认就是公有
    public name: string; // 属性 前面省略了publick关键词
    protected name2: string; // 保护类型
    private name3: string; // 保护类型
    constructor(n: string, m: string, o: string) {// 构造函数 实例化出发的方法
        this.name = n;
        this.name2 = m;
        this.name3 = o;
    }
    run(): void {
        console.log(this.name);
        console.log(this.name2);
        console.log(this.name3);
    }
}
class web6 extends person6 {
    constructor(n: string, m: string, o: string) {
        super(n, m, o);
    }
    work() {
        console.log(`${this.name}:${this.name2}`);
        // console.log(`${this.name}:${this.name2}:${this.name3}`); // private 无法访问私有属性
    }
}
let w2 = new web6('t1', 't2', 't3');
w2.work();
console.log(w2.name);
// console.log(w2.name2);
class person7 {
    public name7: string;
    constructor(name: string) {
        this.name7 = name;
    };
    run() {

    };
    work() {

    }
}

//6.0 多态 定义一个方法不去实现，让继承他的子类去继承，每个子类的表现不一样

class person8 {
    name: string;
    constructor(name: string) {
        this.name = name;
    };
    eat() {
        console.log('多态： 定义的空方法');
    }
}
class person8a extends person8 {
    constructor(name: string) {
        super(name)
    };
    eat() {
        console.log('多态： person8a的方法')
    }
}
let per8a = new person8a('person8a');
per8a.eat();

// 6.1 抽象方法 抽象类 ：他是提供其他类继承的基类，不能被直接实例化
// 用 abstract 关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体的实现并 必须在派生类中实现
// abstract 抽象方法只能放在抽象类 里面
//抽象类和抽象方法用来定义标准~~ 子类的基类 s

abstract class person9 {
    public name: any;
    constructor(name: any) {
        this.name = name;
    };
    abstract eat(): any;
}
class person9a extends person9 {
    //抽象类的子类必须继承 抽象类的方法
    constructor(name: any) {
        super(name);
    }
    eat() {
        console.log(this.name);
    }
}
let p9 = new person9a('抽象类的子类');
p9.eat();

//7.1属性接口
// ts 中定义方法
function printLabel(label: string): void {
    console.log('printLabel:' + label);
}

// 对JSON进行约束
function printLabel1(labelJson: { label: string }): void {
    console.log('printLabel:' + labelJson);
}
printLabel1({ label: 'a' }); // 正确写法

// 对批量方法传入参数进行约束  接口
//ts 接口
//通过 interface 来定义接口

interface fullName {
    firstName: string;
    secondName: string;
}

function printName(name: fullName) {
    // 必须传入对象
    console.log(name.firstName + '...' + name.secondName)
}

let obj = {
    firstName: 'tong1',
    secondName: 'tong2',
    age: '111',
}
printName(obj);

//7.2 接口 可选属性  参数数据可以不一样

interface fullName1 {
    firstName: string;
    secondName?: string; // 增加 ？号 实现可传可不传
}
function printName1(name: fullName1) {
    // 必须传入对象
    console.log(name.firstName + '...' + name.secondName)
}
let obj1 = {
    firstName: 'tong1',
    age: '111',
}
printName1(obj1);

// 7.3 案例 ajax 原生 无兼容
interface configData {
    type: string;
    url: string;
    data?: string;
    dataType: string;
};

function ajax(config: configData) {
    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) {
            console.log('seccess')
            if (config.dataType == 'json') {
                console.log(xhr.responseText);
            } else {
                console.log(xhr.responseText);
            }
        }
    }
}
ajax({
    type: 'GET',
    url: 'http://a.itying.com/api/productlist',
    dataType: 'json',
    data: ''
});

// 7.4 函数类型接口 对函数的传入值和返回值进行约束

interface encrypt {
    (key: string, value: string): string;
}
let md5: encrypt = function (key: string, value: string): string {
    //模拟操作

    return key + value;
}

console.log(md5('tongmd', 'bb MD5 函数类型接口'));

let sha11: encrypt = function (key: string, value: string): string {
    return key + value;
}

// 7.5 可索引接口 通常对数组对象的约束

let arr = ['asd', 123];
let arra1: number[] = [123, 123];
let arra2: Array<number> = [123, 123];

interface userArr { // 对数组约束的接口
    [index: number]: string;
}
let arra3: userArr = ['asd', '123']; // 可索引接口

console.log(arra3[0]);

// 7.6 可索引接口 对 对象的约束

interface userObj {
    [index: string]: string
}

let userObj: userObj = {
    name: 'tong1'
}
// 7.7 可索引接口 对 对类的约束 和抽象类相似

interface Animal1 {
    name: string

    eat(str: string): void;
}

class dog implements Animal1 {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat() {
        console.log(this.name + '的方法执行');
    }
}

let doga1 = new dog('牛牛');
doga1.eat();

// 约束方法的 参数

class cat implements Animal1 {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat(food: string) {
        console.log(this.name + '吃' + food);
    }
}

let cat1 = new cat('小猫');
cat1.eat('鱼');

// 8.0 接口的扩展

interface Animal2 {
    eat(): void;
}

//实现接口的继承
interface person2 extends Animal2 {
    work(): void;
}

class programmer {
    public name: string;
    constructor(name: string) {
        this.name = name;
    }
    coding(code: string) {
        console.log(this.name + code);
    }
}

//继承沿用  多个接口
class web2 extends programmer implements person2 {
    // public name: string;
    constructor(name: string) {
        super(name); // 继承 programmer 这个接口
        // this.name = name;
    }
    eat() {
        console.log(this.name + 'eat 方法执行');
    }
    work() {
        console.log(this.name + 'work 方法执行');
    }
}

let newWeb2 = new web2('接口继承实现');
newWeb2.eat();
newWeb2.work();
newWeb2.coding('写ts code');

//9.0 泛型  一个组件中 可以支持 未来未知的数据类型
// 同时返回多种类型数据 string 和number
// 可以使用any 来实现 多种数据类型的返回 但是放弃了类型检查
function getData<T>(value: T): T { //定义泛型
    return value;
}

getData<number>(123); //使用泛型 可以限定输入与输出的  数据类型一致
//9.1 泛型类
class minClass {

    public list: number[] = [];

    add(num: number) {
        this.list.push(num);
    }

    min(): number {
        var minNum = this.list[0];

        for (let i = 0; i < this.list.length; i++) {
            if (minNum > this.list[i]) {
                minNum = this.list[i];
            }
        }

        return minNum;
    }
}

var minN = new minClass();
minN.add(9);
minN.add(2);
minN.add(1);
minN.add(10);
console.log(minN.min());

// 类的泛型
class minClass1<T> {

    public list: T[] = [];

    add(num: T) {
        this.list.push(num);
    }

    min(): T {
        var 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 minN1 = new minClass1<number>();  // 实例化类
minN1.add(11);
minN1.add(13);
minN1.add(2);
console.log(minN1.min());

//9.3 泛型接口

interface configFn {
    (value1: string, value2: string): string;
}
let getDataFn: configFn = function (value1: string, value2: string): string {
    return value1 + value2;
}

console.log(getDataFn('tong3', 'basd'));
//泛型接口 写法1

interface configFn1 {
    <T>(value: T): T;
}
let getDataFn1: configFn1 = function <T>(value: T): T {
    return value;
}
getDataFn1<string>('tong4 泛型接口');

//泛型接口 写法2

interface configFn2<T> {
    (value: T): T;
}
function getDataFn2<T>(value: T): T {
    return value;
}

let myGetDataFn2: configFn2<string> = getDataFn2;

myGetDataFn2('23');// 正确写法
// myGetDataFn2(12); //与指定的类型不一致 错误写法