• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript----函数与类

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

TypeScript中的类

传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用面向对象方式的程序员来讲就有些棘手,因为他们用的是基于类的继承并且对象是由类构建出来的。从ECMAScript 2015,也就是ECMAScript 6开始,JavaScript程序员将能够使用基于类的面向对象的方式。使用TypeScript,我们允许开发者现在就使用这些特性,并且编译后的JavaScript可以在所有主流浏览器和平台上运行,而不需要等到下个JavaScript版本。

//// 我们在引用任何一个类成员的时候都用了 this。 它表示我们访问的是类的成员。
// 其实这本质上还是 ES6 的知识,只是在 ES6 的基础上多上了对 this 字段和引用参数的类型声明。
class Person {
    name: string; // 这个是对后文this.name类型的定义
    age: number;
    constructor(name: string,age: number) {
        this.name = name;
        this.age = age;
    }
    print() {
        return this.name + this.age;
    }
}

let person: Person = new Person('cd', 23);
console.log(person.print()); // cd23

// 继承
class Person2 {
    public name: string;  // public、private、static 是 typescript 中的类访问修饰符
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    tell() {
        console.log(this.name + this.age);
    }
}

class Student extends Person2 {
    gender: string;
    constructor(gender: string){
        super('cd', 23);
        this.gender = gender;
    }
    tell() {
        console.log(this.name + this.age + this.gender);
    }
}

let student: Student = new Student('male');
student.tell();  // cd23male
// 这个例子展示了 TypeScript 中继承的一些特征,可以看到其实也是 ES6 的知识上加上类型声明。
// 不过这里多了一个知识点 —— 公共,私有,以及受保护的修饰符。
// TypeScript 里,成员默认为 public ;当成员被标记成 private 时,它就不能在声明它的类的外部访问;
// protected 修饰符与private 修饰符的行为很相似,但有一点不同,protected 成员在派生类中仍然可以访问。

// 存储器
// TypeScript 支持通过 getters/setters 来截取对对象成员的访问。 它能帮助你有效的控制对对象成员的访问。
// 对于存取器有下面几点需要注意的:
// 首先,存取器要求你将编译器设置为输出 ECMAScript 5 或更高。 不支持降级到 ECMAScript 3。
// 其次,只带有 get 不带有 set 的存取器自动被推断为 readonly。
// 这在从代码生成 .d.ts 文件时是有帮助的,因为利用这个属性的用户会看到不允许够改变它的值。
class Hello {
    private _name: string;
    private _age: number;
    get name(): string {
        return this._name;
    }
    set name(value: string) {
        this._name = value;
    }
    get age(): number{
        return this._age;
    }
    set age(age: number) {
        if(age < 0 && age > 100){
            console.log('年龄在0-100之间'); // 年龄在0-100之间
            return;
        }
        this._age = age;
    }
}

let hello = new Hello();
hello.name = 'cd';
hello.age = 23
console.log(`姓名:${hello.name} 年龄:${hello.age}`); // 姓名:cd 年龄:23

TypeScript中的函数

函数是JavaScript应用程序的基础。它帮助你实现抽象层,模拟类,信息隐藏和模块。在TypeScript里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义行为的地方。TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易地使用。

// 为函数定义类型
// 我们可以给每个参数添加类型之后再为函数本身添加返回值类型。
// TypeScript能够根据返回语句自动推断出返回值类型,因此我们通常省略它。
// 下面函数 add, add2, add3 的效果是一样的。
function add(x: string, y: string): string {
    return 'hello typescript';
}
let add2 = function(x: string, y: string): string {
    return 'hello typescript';
}
let add3 = (x: string, y: string) => 'hello typescript';

// 可选参数和默认参数
// JavaScript 里,每个参数都是可选的,可传可不传。 没传参的时候,它的值就是 undefined 。 
// 在 TypeScript 里我们可以在参数名旁使用?实现可选参数的功能。 比如,我们想让 lastname 是可选的。
function buildName(firstName: string, lastname?: string){
    console.log(lastname ? firstName + '' + lastname : firstName);
}

let res1 = buildName('', ''); // 路飞
let res2 = buildName(''); //// let res3 = buildName('路', '飞', '路飞'); // error

// 如果带默认值的参数出现在必须参数前面,用户必须明确的传入 undefined 值来获得默认值
function buildName2(firstName = '', lastName?: string){
    console.log(firstName + '' + lastName);
}

let res4 = buildName2(''); // 飞undefined
let res5 = buildName2(undefined, ''); // 路飞

// 剩余参数
// 有一种情况,我们不知道要向函数传入多少个参数,这时候我们就可以使用剩余参数来定义。
// 剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

function buildName3(firstName: string, ...restOfName: string[]) {
    console.log(firstName + '' + restOfName.join(''));
}

let res6 = buildName3('', '', '', ''); // 路飞路飞

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[TypeScript]vscodeTSLint常见错误解决方案发布时间:2022-07-18
下一篇:
TypeScript类型推导及类型兼容性发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap