初识TypeScript

第01节：初识TypeScript

Deno都要来了，还不学TypeScript？
近日Node.js之父瑞安达尔（Ryan Dahl）发布新的开源项目 deno，从官方介绍来看，可以认为它是下一代 Node，使用 Go 语言代替 C++ 重新编写跨平台底层内核驱动，上层仍然使用 V8 引擎，最终提供一个安全的 TypeScript 运行时。

甚至Dahl在公开场合标识Node.js已经无力回天，Deno将是他的代替品。我相信前端小伙伴们一定都听说了这个消息。

Deno开始使用后用TypeScript变成了一个必会的技能，但是很多小伙伴们还不太熟悉TypeScript的用法。其实TypeScript现在用的已经很广泛了，无论你使用ng、React还是Vue都可以使用TypeScript来实现的你JavaScript代码。

小伙伴们快准备好你们的电脑，跟着技术胖一起学习吧。再不学习就被这个时代抛弃了，正如那句流行的话：

时代抛弃你时，连一声再见都不会说。

TypeScript是什么？

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，TypeScript 在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程。

其实TypeScript就是相当于JavaScript的增强版，但是最后运行时还要编译成JavaScript。TypeScript最大的目的是让程序员更具创造性，提高生产力，它将极大增强JavaScript编写应用的开发和调试环节，让JavaScript能够方便用于编写大型应用和进行多人协作。

TypeScript和JavaScript的对比

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

第02节：开发环境的安装

1.安装Node.js

安装Node.js非常简单，只要到Node官网下载一个最新版本就可以了：https://nodejs.org/zh-cn/.在windows上的安装方法和安装QQ一样。我这里就不重复描述了。 安装好后，可以打开命令行工具，同时按下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中的数据类型有：

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)

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