TypeScript基础知识

前言

这是我写的第一篇博客，对于markdown的使用也比较陌生，如果有什么地方错误欢迎指正

什么是typescript

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

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

TypeScript和JavaScript的对比

TypeScript 与JavaScript两者的特性对比，主要表现为以下几点：

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

开发环境的安装（window系统）

1.首先需要安装node（主要是使用npm去安装所需TypeScript包等其他包）
2.在命令行窗口输入以下指令:

npm install typescript -g
tsc --version

如果网络慢的可以配置一下镜像（cnpm）:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

等安装完成执行指令即可 把npm 改为 cnpm。
3.初始化项目：进入你的编程文件夹后，可以使用npm init -y来初始化项目，生成package.json文件。
4.创建tsconfig.json文件，在终端中输入tsc --init它是一个TypeScript项目的配置文件，可以通过读取它来设置TypeScript编译器的编译参数。
5.安装@types/node,使用npm install @types/node --dev-save进行安装。这个主要是解决模块的声明文件问题。
6.编写*****.ts文件，然后进行保存。
7.在Vscode的任务菜单下，打开运行生成任务，然后选择tsc：构建-tsconfig.json，这时候就会生成一个*****.js文件。
8.在终端中输入node helloWorld.js就可以看到结果了。

变量类型

TypeScript中的数据类型有：

• Undefined ；
• Number:数值类型;
• string : 字符串类型;
• Boolean: 布尔类型；
• enum：枚举类型；
• any : 任意类型，一个牛X的类型；
• void：空类型；
• Array : 数组类型;
• Tuple : 元祖类型；
• Null ：空类型
  Undefined、string、Boolean、Array、Null 在JavaScript里面已经学过就不再描述

NaN

• NaN：它是Not a Number 的简写，意思就是不是一个数值。如果一个计算结果或者函数的返回值本应该是数值，但是由于种种原因，他不是数字。出现这种状况不会报错，而是把它的结果看成了NaN。
• Infinity :正无穷大。
• -Infinity：负无穷大。

enum 类型

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

enum REN{ nan , nv ,yao}
console.log(REN.yao)  //返回了2，这是索引index，跟数组很想。
enum REN{
    nan = '男',
    nv = '女',
    yao= '妖'
}
console.log(REN.yao)  //返回了妖 这个字

any类型

看字面意思就是不断变化着类型，不确定的类型，看代码

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

TypeScript的函数

定义函数

函数就相当于一个工具，如果你想使用这个工具，就要先制作这个工具。这就是我们说的定义函数。在TypeScript里定义函数跟JavaScript稍微有些不同。例子：

function searchpeople(people:number):string{
    return '找到了'+people+'个人' 
}
var people:number = 22
var result:string = searchpeople(people)
console.log(result)

上面的程序，先用function关键字声明了一个searchpeople的方法，然后我们使用了他，并返回了给我们结果。
需要注意的是：

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

形参和实参

拿上面的代码为例子
方法中的people为形参他的类型为数值类型
实参则是调用函数时传递的具体值就是实参。
注意
在函数调用的时候，我们需要按照形参的规则传递实参，有几个形参就要传递几个实参，并且每一个实参的类型要与对应的形参类型一致。

TypeScript语言中的函数参数

有可选参数的函数
函数内参数定义类型前加上’ ?‘ 例：

function search(name?:string):string{
	return '名字是'+ name;
}

有默认参数的函数
直接看例子吧

function search(name:string='王大锤'):string{
	return '名字是'+ name;
}

有剩余参数的函数
直接看例子吧

function search(...name:string='王大锤'):string{
	return '名字是'+ name;
}

三种函数的定义方式

函数声明法

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))

箭头函数

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

函数中变量的作用域

认识全局变量和局部变量

知识点与JavaScript一样，
局部变量：函数体内定义的变量就是局部变量。
全局变量: 函数体外 定义的变量就是全局变量。

let关键字变量的作用域

let是es6的知识，使用let关键字的变量就是一个块级作用域变量。

引用类型-数组

TypeScript中的数据分为值类型和引用类型。

初识引用类型

我们把人当做一个对象，然后是使用他，具体看代码：

let person = {
    name:'张三',
    sex:'man',
    age:22,
    saySometing:function(){
        console.log('我是个帅哥.')
    }
}
console.log(person.name)
person.saySometing()

我们看到引用类型是一种复合的数据类型，引用类型中封装了很多对属性，每一对属性都有属性名和属性值。属性名是字符串，属性值是任意类型的数据。可以通过变量名和属性名获取属性的值或者调用属性的方法。
在TypeScript中也给我们提供了一些引用类型，例如：Array（数组）、String（字符串）、Date（日期对象）、RegExp（正则表达式）等。

声明数组的方法

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

给数组赋值

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

字面量赋值法

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

ps:在TypeScript中指定数据类型的数组只能存储同一类型的数组元素。

构造函数赋值法

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

let arr1:number[] = new Array()
let ara2:number[] = new Array(1,2,1)
let arr3:Array<string> = new Array('aaa','bbb','ccc')
let arr4:Array<boolean> = new Array(true,false)

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

元祖是一种特殊的数组，元祖类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

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

引用类型-字符串啊

字符串的两种类型

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

let jspang:string = 'aaa'
let jspanga:String = new String("bbb")
console.log(jspang)
console.log(jspanga)

编译结果

aaa
[String: 'bbb']

需要说明的是这两种声明字符串的方法没有什么不同。基本类型的字符串可以直接使用引用类型的属性和方法。