技术胖TypeScript图文视频教程最污的技术课

TypeScript是一个应用程序级的JavaScript开发语言。（这也表示TypeScript比较牛逼，能够开发大型应用，或者说更适合开发大型应用）
TypeScript是JavaScript的超集，能够编译成纯JavaScript。这个和咱们CSS离的Less或者Sass是很像的，咱们用更好的代码编写方式来进行编写，最后仍是有好生成原生的JavaScript语言。
TypeScript跨浏览器、跨操做系统、跨主机、且开源。因为最后他编译成了JavaScript因此只要能运行JS的地方，均可以运行咱们写的程序，设置在node.js里。
TypeScript始于JavaScript，终于JavaScript。遵循JavaScript的语法和语义，因此对于咱们前端从业者来讲，学习前来驾轻就熟，并无太大的难度。
TypeScript能够重用JavaScript代码，调用流行的JavaScript库。
TypeScript提供了类、模块和接口，更易于构建组件和维护。

第02节：开发环境的安装

已经对TypeScript有了大概的了解，个人博客全是注重实际，因此不讲那么多理论了，直接开始上手。这节咱们开始搭建TypeScript的开发环境。

点击观看免费视频

1.安装Node.js

安装Node.js很是简单，只要到Node官网下载一个最新版本就能够了：nodejs.org/zh-cn/.在win… 安装好后，能够打开命令行工具，同时按下win+R，而后输入cmd就能够打开，打开后输入

node -v
npm -v
复制代码

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

2.安装TypeScript包

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

npm install typescript -g
tsc --version
复制代码

须要注意的是：若是你是mac电脑，要使用sudo npm install typescript -g指令进行安装

3.编写HelloWorld程序

初始化项目：进入你的编程文件夹后，可使用npm init -y来初始化项目，生成package.json文件。
建立tsconfig.json文件，在终端中输入tsc --init：它是一个TypeScript项目的配置文件，能够经过读取它来设置TypeScript编译器的编译参数。
安装@types/node,使用npm install @types/node --dev-save进行安装。这个主要是解决模块的声明文件问题。
编写HelloWorld.ts文件，而后进行保存，代码以下。

var a:string = "HelloWorld"
console.log(a)
复制代码

在Vscode的任务菜单下，打开运行生成任务，而后选择tsc：构建-tsconfig.json，这时候就会生成一个helloWorld.js文件
在终端中输入node helloWorld.js就能够看到结果了。

**总结：**这节课虽然简单，可是小伙伴们必定要动手操做，若是不操做，或者开发环境配置很差，下面的课程就很差学习了。

第03节：变量类型的那些事

这个文章好久没有更新了，不少小伙伴刚开始看就放下了（我对不起大家），也有不少人认为技术胖放弃了这篇文章。我是不会放弃的，让咱们快复习一下前两节的课程后，继续学习吧。TypeScript最大的一个特色就是变量是强类型的，也就是说，在声明变量的时候，咱们必须给他一个类型。好比：字符串、数字、布尔，枚举........ 就用这节课全面了解一下typeScript的声明类型。

点击观看免费视频

TypeScript中的数据类型有：

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

Undefined类型

在js中当你定义了一个变量，但没有给他赋予任何值的时候，他就是Undefined类型。这可能和你之前学的语言稍有不一样，其余语言会有个类型的默认值。

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

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

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

写完后保存代码，进行运行任务，而后生成demo01.js，在终端中使用node demo01.js来进行查看运行结果。控制台输出了undefined,跟咱们预想的如出一辙。

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：负无穷大。

string类型

由单引号或者双引号括起来的一串字符就是字符串。好比：“技术胖”,'jspang.com'。看下面的代码：

demo01_2.ts

var jspang:string = "技术胖 jspang.com"
console.log(jspang)
复制代码

这时候控制图就会乖乖的输出技术胖 jspang.com.

boolean布尔类型

做任何业务逻辑判断都要有布尔类型的参与，经过对与错的判断是最直观的逻辑处理。boolean类型只有两种值，true和false。

var b:boolean = true
var c:boolean = false
复制代码

enum 类型

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

世界上人的类型：男人、女人、中性
一年的季节：春、夏、秋、冬，有四个结果。

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

demo01_3.ts

enum REN{ nan , nv ,yao}
console.log(REN.yao)  //返回了2，这是索引index，跟数组很想。
复制代码

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

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

复制代码

any类型

一个写惯了前端的人，有时候不自觉的就分不清类型了。这是个很差的习惯，也是前端的痛，就由于这个缘由，JavaScript也屡次被人诟病说大型项目不适合用JavaScript。可是习惯一旦养成，改是须要时间和磨练的。TypeScript友好的为咱们提供了一种特殊的类型any，好比咱们在程序中不断变化着类型，又不想让程序报错，这时候就可使用any了。

var t:any =10 
t = "jspang"
t = true
console.log(t)
复制代码

Null类型：

与 Undefined 相似，都表明空。Null 表明是引用类型为空。意义不大，可是有用。后续学习中会使用到。

注意：剩余的数组、元组、void 会在后续的章节中讲解。

第04节：TypeScript的函数

好比如今咱们有个找小姐姐的需求：

找18岁的小姐姐
找28岁的小姐姐
找38岁的小姐姐

这个时候你会怎么做？难道要把代码写3遍吗？也许新手会这样做的，可是做为一个有多年开车经验的老司机，技术胖确定会创建一个找小姐姐的机器，这就是函数。

点击观看免费视频

正经点说是：

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

定义函数

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

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

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

须要注意的是：

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

形参和实参

形参的使用

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

function searchXiaoJieJie(age:number):string{
    return '找到了'+age+'岁的小姐姐' 
}
复制代码

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

实参的使用

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

打个比方，咱们去按摩，须要找技师，当咱们尚未找的时候，这时候就是形参。当一个个技师站好了，让你选。你最终选择了一个，这就是实参。实参在真实使用时才传递。

var result:string = searchXiaoJieJie(age)
复制代码

注意

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

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)

复制代码

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)
复制代码

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)
复制代码

有了这个参数形式，咱们好像无所不能了，我爱编程，编程让我幸福。好吧，这节课咱们就先到这里，下节课咱们继续找小姐姐去。不是，不是，是继续学习。

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

上节课用参数的形式来区分了TypeScript里函数的定义方法，但这并不能彻底包含全部的定义方法，因此再以声明的形式，而不是参数来总结几个方法。

点击观看免费视频

函数声明法

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

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

复制代码

函数表达式法

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

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

console.log(add(1,4))

复制代码

箭头函数

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

var add = (n1:number,n2:number):number=>{
    return n1+n2
}

console.log(add(1,4))
复制代码

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

经过两节对TypeScript的学习，再加上若是你之前JavaScript的知识很扎实，你必定知道函数相似于一个封闭的盒子。盒子里面的世界和外面的世界是不同的。有点像人的外在表现和内在性格，虽然相辅相成，相生相克，可是彻底不同。定义在函数内部的变量与定义在函数外部的变量也是不同的，他们起做用的范围也不同。

点击观看免费视频

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

函数做用域演示

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

function zhengXing():void{
    var yangzi = '刘德华'
    console.log(yangzi)
}
zhengXing()
console.log(yangzi)
复制代码

认识全局变量和局部变量

如今咱们对函数的做用域有了一点了解，那么到底什么是全局变量，什么又是局部变量那？这个问题不少面试中都会提问，因此跟你的前途息息相关。

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

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

var yangzi = '刘德华'

function zhengXing():void{
    
    console.log('技术胖整造成了'+yangzi+'的样子')
}
zhengXing()
console.log(yangzi)
复制代码

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

局部变量和全局变量重名

当局部变量与全局变量重名的时候，在函数体内是局部变量起做用；若是重名，就有变量提高，这是一个坑，小伙伴们必需要注意

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

var yangzi:string = '刘德华'

function zhengXing():void{
    var yangzi:string = '马德华'

    console.log('技术胖整造成了'+yangzi+'的样子')
}
zhengXing()
console.log(yangzi)
复制代码

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

var yangzi:string = '刘德华'

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

    console.log('技术胖整造成了'+yangzi+'的样子')
}
zhengXing()
console.log(yangzi)
复制代码

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

技术胖整造成了undefined的样子
复制代码

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

var yangzi:string = '刘德华'

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

    console.log('技术胖整造成了'+yangzi+'的样子')
}
zhengXing()
console.log(yangzi)
复制代码

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

let关键字变量的做用域

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

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

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

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

    console.log('技术胖整造成了'+yangzia+'的样子')
    console.log('技术胖整造成了'+yangzib+'的样子')
}
zhengXing()

复制代码

这时候编译后，咱们运行，你会发现是能够执行的，而且打印到了控制台正确的结果。这是由于ts编译成js，他自动给咱们加了ES5的处理，ES5里是没有let关键字的，如今咱们再改一下编译好的程序，你会发现yangzib这个关键字就找不到了（详情看视频吧）。

第07节:引用类型-数组

TypeScript中的数据分为值类型和引用类型。值类型咱们前几节课讲的都是，可是引用类型咱们在这套视频中尚未讲解。咱们先来看一个引用类型的例子，来个初步印象。

点击观看免费视频

初识引用类型

如今把“技术胖”虚拟成一个对象，而后来使用过它，具体看下面的代码：

let jspang = {
    name:'技术胖',
    website:'jspang.com',
    age:18,
    saySometing:function(){
        console.log('为了前端技术')
    }
}
console.log(jspang.name)
jspang.saySometing()
复制代码

经过上面的案例，咱们看到引用类型是一种复合的数据类型，引用类型中封装了不少对属性，每一对属性都有属性名和属性值。属性名是字符串，属性值是任意类型的数据。能够经过变量名和属性名获取属性的值或者调用属性的方法。

在TypeScript中也给咱们提供了一些引用类型，例如：Array（数组）、String（字符串）、Date（日期对象）、RegExp（正则表达式）等。咱们将用几节课的时间来学习这些用用类型，以及其中封装的经常使用方法和属性。

初始化数组的两种方法

你学习这个课程必定对js中的数组有所了解，要使用一个数组，首先要学会建立一个数组。建立数组时能够指定数组的容量，也能够直接向数组中存储数据。

声明数组的方法

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

let arr1:number[ ]     //声明一个数值类型的数组
let arr2:Array<string>  //声明一个字符串类型的数组
复制代码

给数组赋值

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

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

** 字面量赋值法**

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

复制代码

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

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

构造函数赋值法

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

let arr1:number[] = new Array()
let ara2:number[] = new Array(1,2,3,4,5)
let arr3:Array<string> = new Array('jspang','技术胖','金三胖')
let arr4:Array<boolean> = new Array(true,false,false)
复制代码

这两种方法，均可以给数组进行赋值，在实际开发中使用哪一种方法都是能够的。

认识元祖，一种特殊的数组

元祖是一种特殊的数组，元祖类型容许表示一个已知元素数量和类型的数组，各元素的类型没必要相同。好比，你能够定义一对值分别为string和number类型的元祖。元祖在实际开发中使用的很是少，你们了解一下就能够了，不作过多介绍。

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

TypeScript中其它的数组知识跟JavaScript中的同样，我再这里就不磨磨唧唧的浪费你们时间了。感兴趣的能够写一下JS中的数组方法。

在实际项目中数组的使用仍是很是很是多的，这也算是一种前端开发者的硬功夫，因此要多练习。

第08节:引用类型-字符串啊

经过上节学习你必定对引用类型有了一个很好的认识。在TypeScript中存在两种类型的字符串：基本类型字符串和引用类型字符串。

点击观看免费视频

字符串的两种类型

基本类型字符串：由单引号或者双引号括起来的一串字符串。
引用类型字符串：用new 实例化的 String类型。

那为何会出现这种状况那，有的小伙伴会认为是否是当时JavaScript的开发人员脑子进水了。其实不是的，在前端开发，操做字符串是最广泛的一种操做。JavaScript的开发人员为了你们更容易的操做字符串，有了引用类型的字符串就能够给字符串增长一系列方法了。

let jspang:string = '技术胖'
let jspanga:String = new String("jspang.com")
console.log(jspang)
console.log(jspanga)
复制代码

编译之后咱们使用node 运行这段代码，你能够看到控制台输出了的结果，这可能跟你内心想的不太同样。

技术胖
[String: 'jspang.com']
复制代码

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

字符串的长度length

使用length就能够来获取字符串的长度，固然做为一个男人知道本身的长度是很是有必要的.....很差意思，我又开始污了。那咱们来看看下面获取长度的列子。

let jspang:string = '技术胖'
let jspanga:String = new String("jspang.com")
console.log(jspang.length)
console.log(jspanga.length)
复制代码

字符串经常使用的方法

为了一些刚刚接触前端的小伙伴，我仍是讲解一下字符串的经常使用方法，若是你已经有了很好的JS的基础，下面的内容能够彻底跳过的。

查找字符串

从头部查找字符串直接使用indexOf就能够了。

基本语法：str.indexOf(subStr)

咱们来一个找小姐姐的例子：如今咱们写一段话，这段话固然是一个字符串，好比：“清早起来打开窗，心情美美的，我要出去找小姐姐，心情美美的。”而后找出“小姐姐”的位置。

let something:string = "清早起来打开窗，心情美美的，我要出去找小姐姐，心情美美的。"
let xiaoJieJie:string = "小姐姐"
console.log(something.indexOf(xiaoJieJie))   //19
复制代码

若是咱们查找的字符串没有找到，则返回-1。

从字符串尾部开始查找字符串的位置，使用lastIndexOf( )

let something:string = "清早起来打开窗，心情美美的，我要出去找小姐姐，心情美美的。"
let xiaoJieJie:string = "小姐姐"
console.log(something.lastIndexOf(xiaoJieJie)) //19
复制代码

须要注意的是，返回的都是字符串的下标。因此返回的值是相同的。并非返回从后到前的下标位置。这个新手很容易采坑。

截取字符串

基本语法以下：

str.substring(startIndex,[endIndex])
复制代码

参数 startIndex 表示开始下标，endIndex 表示结束下标，endIndex 参数是可选的。该方法的做用是从指定的开始下标开始截取字符串，截取到 endIndex 的下标以前，若是没有 endIndex，则截取到字符串结束。

咱们仍是上面的例子，如今咱们截取不一样的字符串。

let something:string = "清早起来打开窗，心情美美的，我要出去找小姐姐，心情美美的。"
let xiaoJieJie:string = "小姐姐"
console.log(something.substring(8))
console.log(something.substring(8,14))
复制代码

替换字符串

基本语法以下：

str.replace(subStr,newstr);
复制代码

substr 表示被替换的子串，newstr 表示要替换成的子串。该方法的做用是在 str 中从头部开始找 substr 子串，找到以后，把 substr 用 newstr 替换掉。须要注意的是若是 str 中有多个 substr 子串，只有第一个 substr 子串会被替换掉。

如今咱们要把上面字符串里的小姐姐替换成小哥哥，咱们看看具体代码的实现。

let something:string = "清早起来打开窗，心情美美的，我要出去找小姐姐，心情美美的。"
let xiaoJieJie:string = "小姐姐"
console.log(something.replace(xiaoJieJie,'小哥哥'))
复制代码

就给你们讲这么多方法吧，若是你想了解更多操做，能够看javascript相关的书籍来进行学习。下节课咱们来看看引用类型的-日期相关的操做。

第09节:引用类型-日期对象

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

点击观看免费视频

建立日期对象

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

1.不传递任何参数

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

let d:Date = new Date()
console.log(d)
复制代码

这时候运行node的结果以下：

2018-09-06T06:48:12.504Z
复制代码

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/09/06 05:30:00')
let d2:Date = new Date('2018-09-06 05:30:00')
let d3:Date = new Date('2018-09-06T05:30:00')
console.log(d1)
console.log(d2)
console.log(d3)
复制代码

固然，他们打印出来的结果时彻底相同的，因此在开发中你不用太过于纠结使用哪一种方式进行声明。

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之间的整数。

至于Date类型的方法，跟JavaScript彻底同样，因此我就不在重复讲述了，要不就变成讲JavaScript了。

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

前端对用户输入的信息进行验证，好比手机号，年龄，三围（我又要开始污了）。用于验证最好最强大的手段目前为止就是正则表达式。TypeScript的RegExp类表示正则表达式。这节咱们就学习一下TypeScript里的正则表达式吧。

认识正则表达式

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

点击观看免费视频

构造函数法

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

举个例子：

let reg1:RegExp = new RegExp("jspang")  //表示字符串规则里含有jspang
console.log(reg1)
let reg2:RegExp = new RegExp("jspang",'gi')
console.log(reg2)
复制代码

其实如今打印出来的就是字面量的赋值方法。咱们能够在视频中看到输出的结果。

字面量法

其实构造函数的方法我我的用的是比较少的，我都会使用字面量法来声明正则表达式。

let reg3:RegExp = /jspang/
let reg4:RegExp = /jspang/gi
复制代码

RegExp中的经常使用方法

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

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

来看一个test的例子：

let reg1:RegExp =  /jspang/i
let website:string = 'jspang.com'
let result:boolean = reg1.test(website)
console.log(result)    //true
复制代码

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

let reg1:RegExp =  /jspang/i
let website:string = 'jspang.com'
console.log(reg1.exec(website))
//[ 'jspang', index: 0, input: 'jspang.com' ]
复制代码

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

剩下的就是正则表达式的语法了，这个好像是学程序的都要进行学习。若是你还不属性，能够查看一下这篇文章：www.runoob.com/regexp/rege…

正则在工做中的用法不少，须要你慢慢积累经验。

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

TypeScript提供了强大的类的支持，做为一个程序员必定要学会类的使用，由于只有会了类才能够new出对象来，否者可能会单身一生哦（开个玩笑）。类的出现可让前端程序员抽象层次、增长维护性和复用性。固然这一系列的类的操做，咱们都叫他面向对象编程。TypeScript就是一个基于类的面向对象编程语言。

点击观看免费视频

认识类与对象

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

举个例子，好比说，有人给你介绍对象，会问你的要求。那么，你的要求是：身高165以上，体型偏瘦，长头发，大眼睛。从事正当稳定的工做，会作饭等等。这些要求就是对你心中理想伴侣的一个抽象，就是类。介绍人按照你的要求给你找的这些女生，就是类的实例，就是对象。

类的定义

认识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为咱们准备了丰富的修饰符，小伙伴们能够和我一块儿学习一下修饰符。

点击观看免费视频

访问修饰符

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节: 面向对象编程-继承和重写

我录这节课的时候，炎热的夏天正好退去，秋高气爽，天蓝云白，又到了人类繁衍生息的季节(污是必须的)。那咱们就讲讲繁衍的事情......继承和重写。

点击观看免费视频

类的继承

在使用TypeScript这门语言时，一个最重要基本功就是面向对象编程，那对类的扩展就变的格外重要，扩展常用的手段就是继承。

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

咱们先来建立一个父类，这个父类彻底抽象了技术胖的特色。

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()
复制代码

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

如今技术胖要繁衍生息了，跟准备生个儿子（也就是咱们说的子类）。那个人儿子必定要比我强啊，他不只彻底继承了个人基因，还增长了帅气的属性和赚钱的本领。

咱们看看如何用程序实现。

class JsShuai extends Jspang{
    public xingxiang:string = '帅气'
    public zhuangQian(){
        console.log('一天赚了一个亿')
    }
}

let shuai = new JsShuai("技术帅",5,'演讲')
shuai.interest()
shuai.zhuangQian()
复制代码

extends关键字就是继承的重点，它至关于咱们扑倒女神，小蝌蚪从身体内迸发的一瞬间，因此咱们必定要牢记这种感觉.....不，是关键词.

可是有一点须要咱们注意，TypeScript不支持多重继承。

类方法的重写

重写就是在子类中重写父类的方法。例如，个人儿子“技术帅”发现兴趣爱好是找小姐姐，完成不了“”一天赚一个亿“”的目标，它须要多个兴趣，开平台网站。这时候咱们就用到了重写。看下面的列子代码：

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

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

这节课就到这里，但愿小伙伴们听过以后都锻炼一下生孩子的技能。不是,是写代码的技能，实际写两遍。

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

做为一个前端，和后端最多的交流就是向后端要接口，而这些接口是如何定义的，有时候咱们好像不闻不问。其实前端也有接口的定义，特别若是你要靠着前端技术做一个全栈，那接口的编写也是必不可少的一项技能。

点击观看免费视频

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

在面向对象的语言中，术语interface常常被用来定义一个不包含数据和逻辑代码可是用来签名定义了行为的抽象类型。

认识接口

定义接口的关键字是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()
复制代码

程序我会在视频中详细讲解，经过命名空间咱们很好的把程序变的清晰了，各位小姐姐也不再会刘德华和马德华傻傻分不清了。

若是你已经学到了这里，我建议你也学一下ES6的语法，由于Typescript的语法和ES6的有不少都同样，好比说promise，async/await因此我就不在这里讲述了。有兴趣的小伙伴能够学一下。好的，咱们下套课程见了。

技术胖TypeScript图文视频教程 最污的技术课

视频目录

第01节：初识TypeScript

Deno都要来了，还不学TypeScript？

TypeScript和JavaScript的对比

第02节：开发环境的安装

1.安装Node.js

2.安装TypeScript包

3.编写HelloWorld程序

第03节：变量类型的那些事

Undefined类型

Number类型

string类型

boolean布尔类型

enum 类型

any类型

第04节：TypeScript的函数

定义函数

形参和实参

TypeScript语言中的函数参数

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

函数声明法

函数表达式法

箭头函数

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

函数做用域演示

认识全局变量和局部变量

局部变量和全局变量重名

let关键字变量的做用域

第07节:引用类型-数组

初识引用类型

初始化数组的两种方法

认识元祖，一种特殊的数组

第08节:引用类型-字符串啊

字符串的两种类型

字符串的长度length

字符串经常使用的方法

第09节:引用类型-日期对象

1.不传递任何参数

2.传递一个整数

3.传递一个字符串

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

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

认识正则表达式

RegExp中的经常使用方法

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

认识类与对象

类的定义

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

访问修饰符

只读属性修饰符

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

类的继承

类方法的重写

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

认识接口

可选参数的接口

规范函数类型接口

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

命名空间的使用

技术胖TypeScript图文视频教程最污的技术课