博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
typscript 语法1
阅读量:6449 次
发布时间:2019-06-23

本文共 11749 字,大约阅读时间需要 39 分钟。

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, undefinedlet 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// protectedclass 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 抽象方法只能放在抽象类 里面//抽象类和抽象方法用来定义标准~~ 子类的基类 sabstract 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
= [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
(value: T): T { //定义泛型 return value;}getData
(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
{ 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
(); // 实例化类 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'));//泛型接口 写法1interface configFn1 {
(value: T): T;}let getDataFn1: configFn1 = function
(value: T): T { return value;}getDataFn1
('tong4 泛型接口');//泛型接口 写法2interface configFn2
{ (value: T): T;}function getDataFn2
(value: T): T { return value;}let myGetDataFn2: configFn2
= getDataFn2;myGetDataFn2('23');// 正确写法// myGetDataFn2(12); //与指定的类型不一致 错误写法

  

转载于:https://www.cnblogs.com/tongbiao/p/9343274.html

你可能感兴趣的文章
java 代替Python_Java总是“沉沉浮浮”,替代者会是Python?
查看>>
贪吃蛇java程序简化版_JAVA简版贪吃蛇
查看>>
poi java web_WebPOI JavaWeb 项目 导出excel表格(.xls) Develop 238万源代码下载- www.pudn.com...
查看>>
java 顶点着色_金属顶点着色器绘制纹理点
查看>>
php扩展有哪些G11,php 几个扩展(extension)的安装笔记
查看>>
ajax长连接 php,ajax怎么实现服务器与浏览器长连接
查看>>
oracle报1405,【案例】Oracle报错ORA-15054 asm diskgroup无法mount的解决办法
查看>>
php 5.4.24 win32,PHP 5.4.14 和 PHP 5.3.24 发布
查看>>
oracle top pid,Linux Top 命令解析 比较详细
查看>>
grub如何进入linux系统,Linux操作系统启动管理器-GRUB
查看>>
linux pbs 用户时间,【Linux】单计算机安装PBS系统(Torque)与运维
查看>>
linux系统可用内存减少,在Linux中检查可用内存的5种方法
查看>>
linux 脚本map,Linux Shell Map的用法详解
查看>>
如何在linux系统下配置共享文件夹,如何在windows和Linux系统之间共享文件夹.doc
查看>>
thinkpad装linux无线网卡驱动,ThinkPad E530 Fedora 20 下无线网卡驱动的安装
查看>>
linux操作系统加固软件,系统安全:教你Linux操作系统的安全加固
查看>>
linux中yum源安装dhcp,24.Linux系统下动态网络源部署方法(dhcpd)
查看>>
linux屏幕复制显示出来的,linux – stdout到gnu屏幕复制缓冲区
查看>>
一起学Shell(十)之可称植性议题与扩展
查看>>
部署Ganglia监控Hadoop&Hbase
查看>>