1、安装nodejs和vscode:

nodejs : https://nodejs.org/en/

Visual Studio Code :  https://www.visualstudio.com/en-us/products/code-vs.aspx

安装是很简单的,一路next就行,此处不详细描述。

检验node是否安装成功,打开命令行,输入node -v, 显示如下图,说明安装成功。

PS: TypeScript毕竟是微软发明的,用微软的编辑器更省心,当然不是必须的,否则得根据你的编辑器找typescript插件,你懂的。

2、上面的步骤完成后,安装typescript,找开命令行,输入指令:npm install -g typescript

安装完成,命令行输入tsc -v进行检验,显示版本号说明安装成功,如下图

 3、完成了typescript环境的配置,接下来我们可以开始写代码了。

新建一个文件夹demo, 在它下面创建oop.ts

oop.ts代码如下:

/**
* 声明抽象类Shape
* */
abstract class Shape {
//声明受保护的属性edge, 是的,你没看错,protected只能用于父类和子类
protected edge: number;
//声明构造函数,入参类型为number
constructor(edge: number) {
this.edge = edge;
}
//声明类实例方法,方法名后面的number是限制方法的返回类型
getEdge(): number {
return this.edge;
}
//声明抽象方法
abstract getArea(): number;
} /**
* 声明类Triangle, 继承自抽象类Shape,必须实现抽象方法getArea()
* */
class Triangle extends Shape {
//声明类私有属性,其他类不能访问,包括父类
private width: number;
private height: number; //声明构造函数,必须显式调用父类构造函数,用super()
constructor(width: number, height: number) {
super(3);
this.width = width;
this.height = height;
} //实例方法,重写父类同名方法
getArea(): number {
return this.width * this.height / 2;
}
} /**
* 声明类Rectangle, 继承自抽象类Shape,必须实现抽象方法getArea()
* */
class Rectangle extends Shape {
//声明类私有属性,其他类不能访问,包括父类
private width: number;
private height: number; //声明构造函数,必须显式调用父类构造函数,用super()
constructor(width: number, height: number) {
super(4);
this.width = width;
this.height = height;
} //实例方法,重写父类同名方法
getArea(): number {
return this.width * this.height;
}
} //模拟入参数类型限制为Shape抽象类实例
function outputShape(shape: Shape) {
console.log(shape.getEdge());
console.log(shape.getArea());
} //模拟程序主入口函数
function main() {
outputShape(new Triangle(4, 5));
outputShape(new Rectangle(4, 5));
} main();

4.选中oop.ts文件, 右键选择“在命令提示符中打开”

在命令行中,输入tsc oop.ts,执行后会在相同目录下生成oop.js文件

oop.js文件内容如下:

var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* 声明抽象类Shape
* */
var Shape = (function () {
//声明构造函数,入参类型为number
function Shape(edge) {
this.edge = edge;
}
//声明类实例方法,方法名后面的number是限制方法的返回类型
Shape.prototype.getEdge = function () {
return this.edge;
};
return Shape;
}());
/**
* 声明类Triangle, 继承自抽象类Shape,必须实现抽象方法getArea()
* */
var Triangle = (function (_super) {
__extends(Triangle, _super);
//声明构造函数,必须显式调用父类构造函数,用super()
function Triangle(width, height) {
_super.call(this, 3);
this.width = width;
this.height = height;
}
//实例方法,重写父类同名方法
Triangle.prototype.getArea = function () {
return this.width * this.height / 2;
};
return Triangle;
}(Shape));
/**
* 声明类Rectangle, 继承自抽象类Shape,必须实现抽象方法getArea()
* */
var Rectangle = (function (_super) {
__extends(Rectangle, _super);
//声明构造函数,必须显式调用父类构造函数,用super()
function Rectangle(width, height) {
_super.call(this, 4);
this.width = width;
this.height = height;
}
//实例方法,重写父类同名方法
Rectangle.prototype.getArea = function () {
return this.width * this.height;
};
return Rectangle;
}(Shape));
//模拟入参数类型限制为Shape抽象类实例
function outputShape(shape) {
console.log(shape.getEdge());
console.log(shape.getArea());
}
//模拟程序主入口函数
function main() {
outputShape(new Triangle(4, 5));
outputShape(new Rectangle(4, 5));
}
main();

5.执行oop.js文件,校验结果是否正确,在命令行中输入node oop.js

输出如下内容,说明执行成功:

最后,可见TypeScript的语法已经很接近Java或C#了,而且它最主要的就是实现了编译时类型检查,还有类,抽象类,接口,泛型等OOP的实现, 这对Java或C#的开发者而言,学习成本一下就降低了。

看了上面的TypeScript语法,你会发现变量声明是这样的:edge : number, 为什么不搞成number edge呢?不然不是更象Java或C#了?

个人觉得原因可能是因为Dart,因为它就是这样声明变量的,如果TypeScript也这样实现的,语法上跟Dart太接近了,恐怕就得被谷歌告了吧。

PS: typescript只是个js预编译器,如果你想象Java或C#等静态语言一样写js代码,或许它是你不错的选择,否则你还是可以选CoffeeScript等其他js预编译器。

TypeScript之面向对象初体验的更多相关文章

  1. TypeScript札记:初体验

    1.简介 TypeScript 是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeScript是一种 ...

  2. python_92_面向对象初体验

    class dog: def __init__(self,name): self.name=name def bulk(self): print('%s汪汪汪!'%self.name) d1=dog( ...

  3. Scala 深入浅出实战经典 第66讲:Scala并发编程实战初体验

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  4. node.js 初体验

    node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...

  5. PHP初体验

    PHP初体验 提笔写初体验总不知道从何说起,直接聊PHP中的函数.PHP网络技术.数据库操作.PHP模板等感觉又不是初体验.最后还是决定从PHP的面向对象.PHP的魔术方法.PHP的反射.PHP中的异 ...

  6. junit4初体验

    OK,现在我们正式开始junit4系列的整理.前面的junit38作为4的补充知道就好了,实际编码中我们以4为主.这里先来一把junit的初体验,同时也让我们来一步一步的了解下TDD的好处. ORM大 ...

  7. SSH初体验系列--Hibernate--2--crud操作

    Ok,今天比较详细的学习一下hibernate的C(create).R(read).U(update).D(delete) 相关api... 前言 Session: 是Hibernate持久化操作的基 ...

  8. Linux内核驱动学习(三)字符型设备驱动之初体验

    Linux字符型设备驱动之初体验 文章目录 Linux字符型设备驱动之初体验 前言 框架 字符型设备 程序实现 cdev kobj owner file_operations dev_t 设备注册过程 ...

  9. go语言的初体验

    分享最近学习 Go 语言的心得和体会,适合有编程基础的人,因为这里只做经验性的总结概述,不做基础教学的入门知识讲解,如果想要学习编程语言的基础知识,请出门左转进入官方文档,查看基础教学文档. Go 概 ...

随机推荐

  1. 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频

    目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...

  2. springmvc+mybatis+spring 整合 bootstrap html5

    A 调用摄像头拍照,自定义裁剪编辑头像 [新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统]B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技 ...

  3. C# 工厂模式+虚方法(接口、抽象方法)实现多态

    面向对象语言的三大特征之一就是多态,听起来多态比较抽象,简而言之就是同一行为针对不同对象得到不同的结果,同一对象,在不同的环境下得到不同的状态. 实例说明: 业务需求:实现一个打开文件的控制台程序的d ...

  4. Javascript学习笔记

    Javascript 2016年12月19日整理 JS基础 Chapter1 JS是一门运行在浏览器客户端的脚本编程语言,前台语言 组成部分 1. ECMAscript JS标准 2. DOM 通过J ...

  5. Android中的沉浸式状态栏效果

    无意间了解到沉浸式状态栏,感觉贼拉的高大上,于是就是试着去了解一下,就有了这篇文章.下面就来了解一下啥叫沉浸式状态栏.传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别.这一样就在一定 ...

  6. Jenkins的一个bug-同时build一个项目两次导致失败

    我们有一个job A, A只是配置了一些参数,它会去触发模板job B. 我一开始点击构建A, 马上发现参数配置不对,于是撤消了构建,但是我没有发现B已经被触发,我重新配置参数,然后再次构建A,这个时 ...

  7. [Intel Edison开发板] 04、Edison开发基于nodejs和redis的服务器搭建

    一.前言 intel-iot-examples-datastore 是Intel提供用于所有Edison开发板联网存储DEMO所需要的服务器工程.该工程是基于nodejs和redis写成的一个简单的工 ...

  8. Underscore.js

    概述 Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库 ...

  9. js倒计时-倒计输入的时间

    计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...

  10. Bootstrap3系列:按钮组

    1. 基本实例 1.1 示例代码 <div class="btn-group"> <button type="button" class=&q ...