TypeScript--deno前置学习

时间 2019-11-20

标签 typescript deno 前置学习繁體版

原文原文链接

第一节：前言：

1.JavaScript 的发展简史图：javascript

2.关于node与deno:html

（1）Node与Deno 的区别：Node 能够工做，而 Deno 不行,Deno 只是一个原型或实验性产品。前端

（2）Deno 的目标是不兼容 Node，而是兼容浏览器。Deno 不是要取代 Node.js，也不是下一代 Node.js，也不是要放弃 npm 重建 Node 生态。deno 的目前是要拥抱浏览器生态。java

（3）使用deno就须要加载一个 TypeScript 编译器node

其实TypeScript如今用的已经很普遍了，不管你使用ng、React仍是Vue均可以使用TypeScript来实现的你JavaScript代码。程序员

3. TypeScript是什么web

typeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，TypeScript 在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程。其实TypeScript就是至关于JavaScript的加强版，可是最后运行时还要编译成JavaScript。TypeScript最大的目的是让程序员更具创造性，提升生产力，它将极大加强JavaScript编写应用的开发和调试环节，让JavaScript可以方便用于编写大型应用和进行多人协做。正则表达式

4.TypeScript和JavaScript的对比typescript

ypeScript 与JavaScript二者的特性对比，主要表现为如下几点：npm

（1）TypeScript是一个应用程序级的JavaScript开发语言。（这也表示TypeScript比较牛逼，能够开发大型应用，或者说更适合开发大型应用）

（2）TypeScript是JavaScript的超集，能够编译成纯JavaScript。这个和咱们CSS离的Less或者Sass是很像的，咱们用更好的代码编写方式来进行编写，最后仍是有好生成原生的JavaScript语言。

（3）TypeScript跨浏览器、跨操做系统、跨主机、且开源。因为最后他编译成了JavaScript因此只要能运行JS的地方，均可以运行咱们写的程序，设置在node.js里。

（4）TypeScript始于JavaScript，终于JavaScript。遵循JavaScript的语法和语义，因此对于咱们前端从业者来讲，学习前来驾轻就熟，并无太大的难度。

（5）TypeScript能够重用JavaScript代码，调用流行的JavaScript库。

（6）TypeScript提供了类、模块和接口，更易于构建组件和维护。

第二节：开发环境的安装（windows环境下）

1.安装Node.js

安装Node.js很是简单，只要到Node官网下载一个最新版本就能够了，相关安装步骤参考连接：http://www.javashuo.com/article/p-mpdcimfc-hw.html

安装好后，能够打开命令行工具，同时按下win+R，而后输入cmd就能够打开，打开后输入

node -v

npm -v

若是看到相关的版本号说明已经安装成功了，看不到版本号就说明你的node.js没有安装成功。

2.安装TypeScript包

在刚才的命令行窗口继续输入以下命令：

npm install typescript -g

而后，输入以下命令，查看相关版本号，正常显示则说明包安装成功。

tsc --version

3.编写HelloWorld程序

1.初始化项目：进入你的编程文件夹后，可使用 npm init -y来初始化项目，生成package.json文件。

2.建立tsconfig.json文件，在终端中输入tsc --init：它是一个TypeScript项目的配置文件，能够经过读取它来设置TypeScript编译器的编译参数。

3.安装@types/node,使用npm install @types/node --dev-save进行安装。这个主要是解决模块的声明文件问题。

4.编写HelloWorld.ts文件，而后进行保存，代码以下。

var a:string = "HelloWorld"
console.log(a)

5.使用webstorm 建立helloWorld.ts文件，详细可参考 http://www.javashuo.com/article/p-tbuiagsc-z.html

6.在webstorm终端中输入node helloWorld.js就能够看到结果了。

第三节：变量类型

TypeScript最大的一个特色就是变量是强类型的，也就是说，在声明变量的时候，咱们必须给他一个类型。

TypeScript中的数据类型有：

Undefined :
Number:数值类型;
string : 字符串类型;
Boolean: 布尔类型；
enum：枚举类型；
any : 任意类型，一个牛X的类型；
void：空类型；
Array : 数组类型;
Tuple : 元祖类型；
Null ：空类型。

（1）Undefined类型

在js中当你定义了一个变量，但没有给他赋予任何值的时候，他就是Undefined类型。

咱们如今来看一个例子，好比咱们要声明一个年龄的变量age,咱们要使用数值类型，也就是Number,可是咱们不给他任何的值，咱们只是在控制台给它输出，而后咱们来看结果。

新建demo01.ts文件，下入下面代码：

//声明数值类型的变量age，但不予赋值
var age:number
console.log(age)

写完后保存代码，进行运行任务，而后生成demo01.js，在终端中使用node demo01.js来进行查看运行结果。控制台输出了undefined。

（2）Number类型

在TypeScript中，全部的数字都是Number类型，这不分是整数仍是小数。好比下面咱们声明一个年龄是18岁，身高是178.5厘米。

新建一个文件demo01_1.ts文件，写入下面代码：

var age:number = 18
var stature:number = 178.5
console.log(age)
console.log(stature)

而后执行转换，查看结果，咱们能够在控制台看到结果已经顺利输出，没有任何意外。

在TypeScrip中有几种特殊的Number类型 咱们须要额外注意一下：

NaN：它是Not a Number 的简写，意思就是否是一个数值。若是一个计算结果或者函数的返回值本应该是数值，可是因为种种缘由，他不是数字。出现这种情况不会报错，而是把它的结果当作了NaN。（这就比如咱们去泰国外，找了一个大长腿、瓜子脸、水蛇腰的女神。房也开好了，澡也洗完了，发现跟咱们的性别统一，咱们只能吃个哑吧亏，你毫不会声张）
Infinity :正无穷大。
-Infinity：负无穷大。

（3）string类型

由单引号或者双引号括起来的一串字符就是字符串。好比："demo",'121222'

var demo:string = "demo 12121"
console.log(demo)

这时候控制图就会输出 demo 12121 。

（4）boolean布尔类型

布尔类型主要用于逻辑判断，经过对与错的判断是最直观的逻辑处理，boolean类型只有两种值，true和false。

var b:boolean = true
var c:boolean = false

（5）enum 类型

这个世界有不少值是多个而且是固定的，好比：

世界上人的类型：男人、女人。
一年的季节：春、夏、秋、冬。

这种变量的结果是固定的几个数据时，就是咱们使用枚举类型的最好时机：

demo01_3.ts

enum REN{ nan , nv }
console.log(REN.nan)  //返回了0，这是索引index。

给这些枚举赋值，能够直接使用=,来进行赋值。

enum REN{
    nan = '男',
    nv = '女',
}
console.log(REN.nan)  //返回了男 这个字

（6）any类型

TypeScript友好的为咱们提供了一种特殊的类型any，好比咱们在程序中不断变化着类型，又不想让程序报错，这时候就可使用any了。

var t:any =10 
t = "wfaceboss"
t = true
console.log(t)

（7）Null类型

与 Undefined 相似，都表明空。Null 表明是引用类型为空。

注意：剩余的数组、元组、void 会在后续学到。

第四节：TypeScript的函数

函数能够理解为：把功能相近的需求封装成一个独立的代码块，每次传入不一样的变量或参数，就能够实现不一样的结果。

1.定义函数

函数就至关于一个工具，若是你想使用这个工具，就要先制做这个工具。这就是咱们说的定义函数。在TypeScript里定义函数跟JavaScript稍微有些不一样。咱们来定义找姐姐的函数吧。

function searchXiaoJieJie(age:number):string{
    return '找到了'+age+'岁的姐姐' 
}
var age:number = 18
var result:string = searchXiaoJieJie(age)
console.log(result) //找到了18岁的姐姐

上面的程序，先用function关键字声明了一个searchXiaoJieJie的方法，而后咱们使用了他，并返回了给咱们结果。

须要注意的是：

声明（定义）函数必须加 function 关键字；
函数名与变量名同样，命名规则按照标识符规则；
函数参数无关紧要，多个参数之间用逗号隔开；
每一个参数参数由名字与类型组成，之间用分号隔开；
函数的返回值无关紧要，没有时，返回类型为 void；
大括号中是函数体。

2.形参和实参

（1）形参的使用
函数定义的时候写的参数是形参。从字面意义上咱们能够看出，形参就是形式上的参数。咱们定义了形参也就规定了此函数的参数个数和参数类型，规范了函数。

function searchXiaoJieJie(age:number):string{
    return '找到了'+age+'岁的姐姐' 
}

好比这个函数，就定义了一个形参，它的类型是数值类型。

（2）实参的使用

调用函数时传递的具体值就是实参。一样从字面理解，实参就是真实的参数，咱们在使用的时候，具体真实传递过去的就是实参，好比18，20，22，这些具体的参数就是实参。

var age:number=18
var result:string = searchXiaoJieJie(age)

此时传递的age就是实参。

注意：

在函数调用的时候，咱们须要按照形参的规则传递实参，有几个形参就要传递几个实参，而且每个实参的类型要与对应的形参类型一致。

3. TypeScript语言中的函数参数

TypeScript的函数参数是比较灵活的，它不像那些早起出现的传统语言那么死板。在TypeScript语言中，函数的形参分为：可选形参、默认形参、剩余参数形参等。

（1）有可选参数的函数

可选参数，就是咱们定义形参的时候，能够定义一个可传可不传的参数。这种参数，在定义函数的时候经过 ?标注。

好比咱们继续做找姐姐的函数，这回不只能够传递年龄，还能够选择性的传递身材。咱们来看如何编写。

function searchXiaoJieJie2(age:number,stature?:string):string{
    let yy:string = ''
    yy = '找到了'+age+'岁'
    if(stature !=undefined){
        yy = yy + stature
    }
    return yy+'的小姐姐'
}
var result:string  =  searchXiaoJieJie2(22,'大长腿')
console.log(result) //找到了22岁大长腿的小姐姐

var result1=string=searchXiaoJieJie2(22)
console.log(result1)//找到了22岁的小姐姐

（2）有默认参数的函数

有默认参数就更好理解了，就是咱们不传递的时候，他会给咱们一个默认值，而不是undefined了。咱们改造上边的函数，也是两个参数，可是咱们把年龄和身材都设置默认值。

function searchXiaoJieJie2(age:number=18,stature:string='大胸'):string{
    let yy:string = ''
    yy = '找到了'+age+'岁'
    if(stature !=undefined){
        yy = yy + stature
    }
    return yy+'的小姐姐'
}
var result:string  =  searchXiaoJieJie2()
console.log(result)//找到了18岁大胸的小姐姐

（3）有剩余参数的函数

有时候咱们有这样的需求，我传递给函数的参数个数不肯定。

剩余参数就是形参是一个数组，传递几个实参过来均可以直接存在形参的数组中。

function searchXiaoJieJie3(...xuqiu:string[]):string{
    let  yy:string = '找到了'
    for (let i =0;i<xuqiu.length;i++){
        yy = yy + xuqiu[i]
        if(i<xuqiu.length){
            yy=yy+'、'
        }
    }
    yy=yy+'的小姐姐'
    return yy
}
var result:string  =  searchXiaoJieJie3('22岁','大长腿','瓜子脸','水蛇腰')
console.log(result)//找到了22岁、大长腿、瓜子脸、水蛇腰、的小姐姐

第五节：三种函数的定义方式

1.函数声明法

函数声明法建立函数是最经常使用的函数定义法。使用function关键字和函数名去定义一个函数。

function add(n1:number,n2:number):number{
    return n1+n2
}

2.函数表达式法

函数表达式法是将一个函数赋值给一个变量，这个变量名就是函数名。经过变量名就能够调用函数了。这种方式定义的函数，必须在定义以后，调用函数。下面例子中等号右边的函数没有函数名，称为匿名函数。

var add = function(n1:number,n2:number):number{
    return n1+n2
}
console.log(add(1,4))

3.箭头函数

箭头函数是 ES6 中新增的函数定义的新方式，咱们的 TypeScript 语言是彻底支持 ES6 语法的。箭头函数定义的函数通常都用于回调函数中。

var add = (n1:number,n2:number):number=>{
    return n1+n2
}
console.log(add(1,4))

第六节：函数中变量的做用域

定义在函数内部的变量与定义在函数外部的变量是不同的，做用的范围也不同。

每一个变量都有一个起做用的范围，这个范围就是变量的做用域。在TypeScript语言中变量做用域划分是以函数为标准的。

1.函数做用域演示

咱们来举个例子，如今要制做一个整形的方法，而后在函数里用var定义一个shape的变量,咱们再函数的外部读取这个变量，你会发现是读取不到的。

function zhengXing():void{
    var  shape = '刘德华'
    console.log( shape)
}
zhengXing()
console.log(shape)//报错，shape is not defined

2.认识全局变量和局部变量

局部变量：函数体内定义的变量就是局部变量。
全局变量: 函数体外定义的变量就是全局变量。

咱们改造上边的程序，把shape办理移动到全局，而后再进行输出。

var shape= '刘德华'
function zhengXing():void{
    console.log('你被整造成了'+shape+'的样子')
}
zhengXing()//你被整成了刘德华的样子
console.log(shape)//刘德华

这时候shape变量是全局的，因此在函数内也能够调用，在函数外也能够调用。

3.局部变量和全局变量重名

当局部变量与全局变量重名的时候，在函数体内是局部变量起做用；若是重名，就有变量提高。

仍是上边整形的例子，你是想整造成刘德华，可是函数体内部声明了一个马德华。虽然一字之差，可是样子但是彻底不一样的。咱们来看代码如何实现：

var shape:string = '刘德华'
function zhengXing():void{
    var shape:string = '马德华'
    console.log('你被整造成了'+shape+'的样子')
}
zhengXing()//你被整造成了马德华的样子

console.log(shape)//刘德华

这回你会发现，你并无变成刘德华而是变成了马德华。那你说我我想变成刘德华，我在函数没声明新变量前打印到控制台行不行？

var shape:string = '刘德华'
function zhengXing():void{
    console.log('你整造成了'+shape+'的样子')
    var shape:string = '马德华'
    console.log('技术胖整造成了'+shape+'的样子')
}
zhengXing()
console.log(shape)

代码改形成了这样，可是你会发现，咱们输出的结果以下：

你被整造成了undefined的样子

产生这个结果的缘由就是变量提高，他的真实代码是这样的。

var shape:string = '刘德华'
function zhengXing():void{
    var  yangzi:string
    console.log('技术胖整造成了'+shape+'的样子')
    shape = '马德华'
    console.log('技术胖整造成了'+shape+'的样子')
}
zhengXing()
console.log(shape)

也就是当内部声明了和全局的变量同名时，就会出现变量提高的效果，声明语句会提高到函数的第一句。这就是变量提高的含有。

4.let关键字变量的做用域

在早期javascript的变量做用域只有全局和局部，而且是以函数划分的，但在其余语言中，做用域的划分是以一对大括号做为界限的。

因此，JavaScript就遭到了无数开发者的吐槽，甚至说javascript不适合开发大型语言，容易内存溢出。JavaScript团队意识到了这一点，在ES6中推出了let关键字。

使用let关键字的变量就是一个块级做用域变量。实际工做中多使用let来声明你的变量，让程序更有条例。来看一段程序：

function zhengXing():void{
    var shape_a:string = '刘德华'
    {
        let  shape_b:string = '小沈阳'
        console.log('技术胖整造成了'+shape_b+'的样子')
    }
    console.log('你被整造成了'+shape_a+'的样子')
    console.log('你被整造成了'+shape_b+'的样子')
}
zhengXing()

注意：这时候编译后，咱们运行，你会发现是能够执行的，而且打印到了控制台正确的结果。这是由于ts编译成js，他自动给咱们加了ES5的处理，ES5里是没有let关键字的，如今咱们再改一下编译好的程序，你会发现shape_b

这个关键字就找不到了。

第七节：引用类型-数组

TypeScript中的数据分为值类型和引用类型。引用类型中封装了不少对属性，每一对属性都有属性名和属性值。

在TypeScript中也给咱们提供了一些引用类型，例如：Array（数组）、String（字符串）、Date（日期对象）、RegExp（正则表达式）等

1.初始化数组的两种方法

建立数组时能够指定数组的容量，也能够直接向数组中存储数据。

声明数组的方法

声明数组跟声明一个普通变量是同样的，都是经过 var let 关键字实现的，只不过数组的类型说明符比较复杂而已。

let arr1:number[ ]     //声明一个数值类型的数组


let arr2:Array<string>  //声明一个字符串类型的数组

2.给数组赋值：

数组是存储大量数据的集合，声明数组以后，须要给数组存储数据。这时候有两种方法：

字面量赋值法：直接使用“[ ]”对数组进行赋值。
构造函数赋值法：

（1）字面量赋值法

//定义一个空数组，数组容量为0
let arr1:number[] = []
//定义一个数组时，直接给数组赋值
let arr2:number[] = [1,2,3,4,5]
//定义数组 的同事给数组赋值
let arr3:Array<string> = ['a','b','c']
let arr4:Array<boolean> = [ true,false,false]

须要注意的是，在TypeScript中指定数据类型的数组只能存储同一类型的数组元素。

//报错！ 必须存储number类型的数据
let arr5:number[] = [1,2,true]

（2）构造函数赋值法

在 TypeScript 中使用 Array 这个引用类型来表示数组的，那么每个数组都是 Array 类型的实例。那么，咱们在建立数组的时候也可使用构造函数来进行赋值。

let arr1:number[] = new Array()
let ara2:number[] = new Array(1,2,3,4,5)
let arr3:Array<string> = new Array('a','b','c')
let arr4:Array<boolean> = new Array(true,false,false)

3.元组 ---特殊的数组

元组是一种特殊的数组，元组类型容许表示一个已知元素数量和类型的数组，各元素的类型没必要相同。好比，你能够定义一对值分别为string和number类型的元组。

//声明一个元祖类型
let x : [string,number]
//正确的初始化
x = ['hello',10]
//错误的初始化方法
x = [10,'hello']

第八节：引用类型--字符串

在TypeScript中存在两种类型的字符串：基本类型字符串和引用类型字符串。

字符串的两种类型：

（1）基本类型字符串：由单引号或者双引号括起来的一串字符串。

（2）引用类型字符串：用new 实例化的 String类型。

引用类型的出现给字符串增长一系列方法了。以致于能够更方便操做字符串。

须要说明的是这两种声明字符串的方法没有什么不一样。基本类型的字符串能够直接使用引用类型的属性和方法。

相关的字符串学习参考：http://www.cnblogs.com/zengfp/p/9883073.html

第九节：引用类型-日期对象

TypeScript中使用Date这个引用类型来存储日期对象，若是你要声明一个日期变量时，记得也要注明它的类型是Date。

建立日期对象

日期对象是Date的实例，可使用构造函数的方法进行建立。而且构造函数中能够传递多种类型的参数。

1.不传递任何参数

构造函数中不传递参数时，Date（）构造函数将根据当前日期和时间建立一个Date对象。咱们看下面的例子理解一下。

let d:Date = new Date()
console.log(d) //2018-12-01T02:51:24.770Z

2.传递一个整数

传递一个整数，这个整数表明的是距离1970-01-01 00:00:00的毫秒数。例如：传入参数为1000，将建立一个表示1970-01-01 00:00:01的日期对象。

咱们举个例子，传递一个整数，看一下结果。

let d:Date = new Date(1000)
let da:Date = new Date(2000)
console.log(d)  //1970-01-01T00:00:01.000Z
console.log(da) //1970-01-01T00:00:02.000Z

3.传递一个字符串

若是传递一个表示日期的字符串，就会生成相对应的日期对象。字符串的格式经常使用:yyyy/MM/dd hh:mm:ss，yyyy-MM-dd hh:mm:ss，yyyy-MM-ddThh:mm:ss等,具体能够参看下面的例子。

let d1:Date = new Date('2018/12/01 09:30:00')
let d2:Date = new Date('2018-12-01 09:30:00')
let d3:Date = new Date('2018-12-01T09:30:00')
console.log(d1)
console.log(d2)
console.log(d3)

然，他们打印出来的结果时彻底相同的（都是2018-12-01T01:30:00.000Z），因此在开发中你不用太过于纠结使用哪一种方式进行声明。

4.传递表示年月日时分秒的变量

let d:Date = new Date(year,month,day,hours,minutes,seconds,ms);

year 表示年份，4位数字。
month表示月份，数值是0(1月)~11(12月)之间的整数。
day 表示日期。数值是1~31之间的整数。
hours 表示小时，数值是0-23之间的整数。
minutes 表示分钟数，数值是0~59之间的整数。
seconds 表示秒数，数值是0~59之间的整数。
ms 表示毫秒数，数值是0~999之间的整数。

第10节:引用类型-正则表达式

用于验证最好最强大的手段目前为止就是正则表达式。TypeScript的RegExp类表示正则表达式。

认识正则表达式：

建立正则表达式和字符串犹如一对好基友（相似），建立正则表达式也提供了两种方法，一种是才采用new 关键字，另外一种是采用字面量的方式。

1.构造函数法

构造函数中能够传一个参数，也能够传递两个参数。一个是字符串描述，另外一个是修饰符，好比g是全局修饰符，i是忽略大小写，m是多行模式。

let reg1:RegExp = new RegExp("baidu.com")  //表示字符串规则里含有abcefg
console.log(reg1)// 结果为     /baidu.com/

let reg2:RegExp = new RegExp("baidu.com",'gi')
console.log(reg2) //结果为     /baidu.com/gi

2.字面量法

简而言之，直接写正则表达式。

let reg3:RegExp = /baidu.com/
let reg4:RegExp = /baidu.com/gi

RegExp中的经常使用方法

RegExp对象包含两个方法：test( )和exec( ),功能基本类似，用于测试字符串匹配。

test(string) ：在字符串中查找是否存在指定的正则表达式并返回布尔值，若是存在则返回 true，不存在则返回 false。
exec(string) : 用于在字符串中查找指定正则表达式，若是 exec() 方法执行成功，则返回包含该查找字符串的相关信息数组。若是执行失败，则返回 null。

看一个例子：

let reg1:RegExp =  /baidu/i
let website:string = 'baidu.com.com'
let result:boolean = reg1.test(website)
console.log(result)    //true

这时候控制台打印出来的是true，那么咱们再来看一下exec的使用方法。

let reg1:RegExp =  /baidu/i
let website:string = 'baidu.com'
console.log(reg1.exec(website))
//[ 'baidu', index: 0, input: 'baidu.com' ]

输出的结果变为了[ 'baidu', index: 0, input: 'baidu.com' ]。

相关正则能够查看一下这篇文章：http://www.runoob.com/regexp/regexp-tutorial.html

第11节: 面向对象编程-类的声明和使用

类的出现可让前端程序员抽象层次、增长维护性和复用性。固然这一系列的类的操做，咱们都叫他面向对象编程。TypeScript就是一个基于类的面向对象编程语言。

认识类与对象：

类是对象具体事务的一个抽象，对象是类的具体表现。

类的定义

认识TypeScript基于类的面向对象编程，就须要从一个简单的类开始。

咱们模拟一个小姐姐的类，小姐姐须要有年龄，有姓名，会说“小哥哥好”。

看下面的例子：

class XiaoJieJie{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name
        this.age = age 
    }
    say(){
        console.log('小哥哥好')
    }
}
let jiejie:XiaoJieJie = new XiaoJieJie('小红',18)
console.log(jiejie)
jiejie.say()

咱们先用class关键字声明了一个类，并在里边声明了name和age属性。constructor为构造函数。构造函数的主要做用是给类中封装的属性进行赋值。

第12节: 面向对象编程-修饰符

访问修饰符

TypeScript语言和Java还有C#很像（由于我只会这两个面向对象的语言），类中属性的访问能够用访问修饰符来进行限制。访问修饰符分为：public、protected、private。

public:公有修饰符，能够在类内或者类外使用public修饰的属性或者行为，默认修饰符。
protected:受保护的修饰符，能够本类和子类中使用protected修饰的属性和行为。
private : 私有修饰符，只能够在类内使用private修饰的属性和行为。

咱们仍是写一个小姐姐的类，可是咱们使用一些访问修饰符来修饰。

class XiaoJieJie2{
    public sex:string
    protected name:string
    private age:number
    public constructor(sex:string,name:string,age:number){
        this.sex=sex
        this.name=name
        this.age=age
    }
    public sayHello(){
        console.log('小哥哥好')
    }
    protected sayLove(){
        console.log('我爱你')
    }
}
var jiejie2:XiaoJieJie2 = new XiaoJieJie2('女','热巴',22)
console.log(jiejie2.sex)
console.log(jiejie2.name)   //报错
console.log(jiejie2.age)    //报错
jiejie2.sayHello()
jiejie2.sayLove()

只读属性修饰符

使用readonly修饰符将属性设置为只读，只读属性必须在生命时或者构造函数里被初始化（注意）。

咱们声明一个man的抽象类，里边只有一个属性sex，而且是只读。

class Man{
    public readonly sex:string = '男'
}
var man:Man = new Man()
man.sex='女'

在编辑器里你就会发现报错了，咱们就不强行编译了。

第13节: 面向对象编程-继承和重写

类的继承

继承：容许咱们建立一个类（子类），从已有的类（父类）上继承全部的属性和方法，子类能够新建父类中没有的属性和方法。

（1）先来建立一个父类。

class Jspang{
    public name:string
    public age : number
    public skill: string
    constructor(name:string,age:number,skill:string){
        this.name = name
        this.age = age
        this.skill = skill
    }
    public interest(){
        console.log('玩')
    }
}
let jspangObj:Jspang = new Jspang('大头爸爸',18,'web')
jspangObj.interest()

做了一个的抽象类，有姓名，有年龄，有技能，而后还有一个函数是兴趣。类建立好以后咱们就进行了实例化。

（2）继承父类

class JsShuai extends Jspang{
    public xingxiang:string = '帅气'
    public zhuangQian(){
        console.log('一天赚了一个亿')
    }
}
let shuai = new JsShuai("小头儿子",15,'领导力')
shuai.interest()
shuai.zhuangQian()

extends关键字就是继承的重点，是关键词。TypeScript不支持多重继承。

类方法的重写

重写就是在子类中重写父类的方法。

好比：在子类中重写父类中的interest方法。

class JsShuai extends Jspang{
    public xingxiang:string = '帅气'
    public interest(){
        super.interest()
        console.log('创建电商平台')
    }
    public zhuangQian(){
        console.log('一天赚了一个亿')
    }
}

先是继承了父类的方法，而后经过super关键字调用了父类的方法，实现了技能的增长。

第14节:面向对象编程-接口

在一般状况下，接口是用来定义一些规范，使用这些接口，就必须实现按照接口中的规范来走。

认识接口

定义接口的关键字是interface。咱们如今就来定义一个接口，这个接口是用来规范丈夫的。

interface Husband {
    sex:string
    interest:string
}
let myhusband:Husband ={ sex:'男',interest:'看书、运动'}
console.log(myhusband)

咱们经过接口，定义了一个找老公的接口，而且给他了两个必选项：性别和兴趣爱好.

可选参数的接口

对老公的标准若是咱们有一些可选项，这些并非都须要显示出来的，在有些状况下，咱们只须要传入部分参数。咱们可使用问号?的形式来设置可选参数。

好比:如今咱们还但愿老公的标准，有一条是给我“买包包”，可是这个是隐喻的，不是直接显示出来的。咱们修改咱们的接口。

interface Husband {
    sex:string
    interest:string
    maiBaoBao?:Boolean
}
let myhusband:Husband ={ sex:'男',interest:'看书、运动',maiBaoBao:true}
console.log(myhusband)

上面的代码maiBaoBao选项就是可选的，能够写也能够不写。

规范函数类型接口

咱们还可使用接口来规范函数类型的接口，好比如今要找老公这件事，咱们规定有一些资源，而后咱们须要哪些资源，在函数中进行匹配，最后返回是否匹配成功。

interface  SearchMan{
    (source:string,subString:string):boolean
}
let mySearch:SearchMan

mySearch = function(source:string,subString:string):boolean{
    let flag =source.search(subString)
    return (flag != -1)
} 
console.log(mySearch('高、富、帅、德','胖')) //false

第15节:面向对象编程-命名空间

在制做大型应用的时候，为了让程序更加有层次感和变量之间不互相干扰，咱们可使用命名空间来构建程序。

举个小例子：好比“德华”这件事，帅哥也有叫德华的，二师兄也有叫德华的。那咱们要如何区分呢？。

命名空间的使用

固然命名空间就是解决这个问题的，命名空间，又称内部模块，被用于组织有些具备内在联系的特性和对象。咱们来看一个例子：

namespace shuaiGe{
    export class Dehua{
        public name:string = '刘德华'
        talk(){
            console.log('我是帅哥刘德华')
        }
    }
}
namespace bajie{
    export class Dehua{
        public name:string = '马德华'
        talk(){
            console.log('我是二师兄马德华')
        }
    }
}
let dehua1:shuaiGe.Dehua   = new shuaiGe.Dehua()
let dehua2:shuaiGe.Dehua   = new bajie.Dehua()
dehua1.talk()

经过命名空间咱们很好的把程序变的清晰了。