TypeScript从不认识开始

什么是TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言,它是 JavaScript 的一个超集(js是ts的子集),扩展了 JavaScript 的语法。

为什么要用TypeScript

1. 编译时的强类型

在申明阶段定义变量的类型,那么任何其他类型的赋值将会引起编译错误;另外,能够智能提示当前变量具有哪些属性和方法。

2.模块化

用TypeScript的关键词module,可以达到类似于命名空间的效果,而export可以控制是否被外部访问。

3.容易上手和语法糖

TypeScript的一个设计亮点就是它并没有抛弃JavaScript的语法另起炉灶,而是做成了JavaScript的超集,任何合法的JavaScript的语句在TypeScript下都是合法。另外,TypeScript实现了类,接口,枚举,泛型,方法重载等,用简洁的语法丰富了JavaScript的使用。个人认为,因为ts的加入,使得js能够成为一个面向对象的编程语言。
接下来下文会通过TypeScript的属性和方法来体现这些优点

如何开始使用TypeScript

1:安装

npm install -g typescript

2:构建ts文件
3:编译代码

tsc filename.ts

正式上路

类型批注

TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的,而且可以被忽略而使用 JavaScript 常规的动态类型。对于基本类型的批注是number, bool和string。而弱或动态类型的结构则是any类型。

function Add(left: number, right: number): number {
    return left + right;
}
接口

接口可以作为一个类型批注,而在定义参数的时候直接用interface申明即可,接口一般首字母大写。其中带的参量可以在被忽略添加,而any表示任何类型;另外还有联合类型联合类型使用|分隔每个类型,对于联合类型的注意事项可以参考这里

interface Shape {
    name: string | number;
    width: number;
    height: number;
    color?: any;
}
 
function area(shape : Shape) {
    var area = shape.width * shape.height;
    return "I'm " + shape.name + " with area " + area + " cm squared";
}
 
console.log( area( {name: "rectangle", width: 30, height: 15} ) );   ok
console.log( area( {name: "square", width: 30, height: 30, color: "blue"} ) ); ok
console.log( area( {width: 30, height: 15} ) ); error
箭头函数表达式(lambda表达式)

lambda表达式()=>{something}()=>something相当于js中的函数,它的好处是可以自动将函数中的this附加到上下文中。

var shape = {
    name: "rectangle",
    popup: function() {
 
        console.log('This inside popup(): ' + this.name);
 
        setTimeout( () => {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);
 
    }
};
shape.popup();

TypeScript支持集成了可选的类型批注支持的ECMAScript 6的类。在类中可以添加对象,构造器和其他基本类型,但是需要使用 publicprivate 访问修饰符的以规定变量调用的上下文(其中Public 成员可以在任何地方访问, private 成员只允许在类中访问)。

class Shape {
 
    area: number;
    color: string;
 
    constructor ( public name: string, public width: number, height: number ) {
        this.area = width * height;
        this.color = "pink";
    };
 
    shoutout() {
        return "I'm " + this.color + " " + this.name +  " with an area of " + this.area + " cm squared.";
    }
}
 
var square = new Shape("square", 30, 30);
var thisname = square.name;
 
console.log( square.shoutout() );
console.log( 'Area of Shape: ' + square.area );
console.log( 'Name of Shape: ' + square.name );
console.log( 'Color of Shape: ' + square.color );
console.log( 'Width of Shape: ' + square.width );
console.log( 'Height of Shape: ' + thisname );
// 以上代码验证不会报错,但是不加public则会报错,但是ts的编译错误不会导致代码崩溃。
继承

继承一个已存在的类并创建一个派生类,继承使用关键字 extends

class Shape {
 
    area: number;
    color: string;
 
    constructor ( public name: string, public width: number, height: number ) {
        this.area = width * height;
        this.color = "pink";
    };
 
    shoutout() {
        return "I'm " + this.color + " " + this.name +  " with an area of " + this.area + " cm squared.";
    }

}
 
class Shape3D extends Shape {
 
    volume: number;
 
    constructor ( public name: string, width: number, height: number, length: number ) {
        super( name, width, height );
        this.volume = length * this.area;
    };
 
    shoutout() {
        return "I'm " + this.name +  " with a volume of " + this.volume + " cm cube.";
    }
 
    superShout() {
        return super.shoutout();
    }

}
 
var cube = new Shape3D("cube", 30, 30, 30);
console.log( cube.shoutout() ); // I'm cube with a volume of 27000 cm cube.
console.log( cube.superShout(); // I'm pink cube with an area of 900 cm squared.

说明:

  • Shape3D 继承了 Shape 类, 也继承了 Shape 类的 color 属性。
  • 构造函数中,super 方法调用了基类 Shape 的构造函数 Shape,传递了参数 name, width, 和 height 值。 继承允许我们复用 Shape 类的代码,所以我们可以通过继承 area 属性来计算 this.volume。
  • Shape3D 的 shoutout() 方法重写基类的实现。superShout() 方法通过使用 super 关键字直接返回了基类的 shoutout() 方法。

在继承中的construct中,必须需要使用super方法才能将父类的属性继承到子类的this中,而且super可以传递参数,但是父类的的方法只能通过super调用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容