TypeScript技术分析（1）

前言

这是TypeScript初学者必看系列的第一篇文章，这个系列主要会向大家系统的介绍TypeScript语言的基础知识点，以及一些项目中使用的技巧，希望大家可以喜欢，关注。好了废话不多，让我们一起进步，奥利给。。。

目录

1. Ts语言的介绍
2. 安装Ts开发环境
3. Ts基础知识
4. 泛型
5. 枚举
6. 重载
7. 接口

1. Ts语言的介绍

在学习一门新的编程语言之前我们应该在心理问自己几个问题，即What?,Why？,How？。
what？Ts是什么？
TypeScript是微软公司开发的一款JavaScript超集的编程语言，TypeScript可以支持任意浏览器，任意环境，任意系统，最重要的它还是开源的。
why？为什么出现Ts？
随着web的飞速发展，JavaScript作为一门脚本语言设计理念简单，缺少模块化以及类的支持这些先天性疾病成为阻碍JavaScript语言发展的绊脚石，Ts的出现就是为了解决Js这些先天性疾病，Ts语言在风格更加接近Java语言，支持，泛型，接口等等定义。
How？如何使用学习Ts
学习一门语言最好的方式就是打开它的官方文档，这样你不但可以学习到最新的Api也可以增加阅读文档的能力。

2.安装Ts开发环境

• 首先要确保本机安装了Node环境没有安装的同学可以参考博主的NodeJs教程安装Node环境https://blog.csdn.net/weixin_43742274/article/details/107256505
• 全局环境安装Ts
  简单介绍一下npm npm是Node模块化提出的包管理工具，下载安装node之后会自动默认安装

npm install -g typescript

• 安装Ts编译环境
  ts-node是一个ts的编译器，因为大家都熟知的是javaScript是在浏览器V8引擎运行解析，Node环境也是基于V8搭建，所以我们需要先将Ts文件编译转换成为Node环境可以解析的Js文件

npm install -g ts-node

3.Ts基础知识（构建你的第一个Ts文件）

众所周知我们学习编程都是从helloWord开始，那么Ts我们也不例外，先从第一个HelloWord程序开始。

• 创建HelloWord.ts文件(注意我们是以ts结尾)

Function outPut（p：String）{
	return "Hello"+p
}
let user = "Lihua"
console.log(outPut(user))

使用vscode编辑器打开新建终端输入

ts-node HelloWord.ts
zh

终端打印

Hello Lihua

你是不是有很多的疑问，接下来，让我们一步一步解密Ts

• 关于类型注解
  在定义一个函数的时候我个们可以设置传入形参的类型，比如String，Number,Boolean,Null,Ts中类型和Js没有本质区别，当我们在调用这个函数传入实参的时候，如果传入的实参不符合形参的要求就会报出对应的错误，这样大大起高了编程的规范性。
• 变量的定义
  其次我们在定义一个变量的时候也可以声明它的类型，比如：

let user ：String = ‘helloWord‘   正确
let user ：Number = ‘helloWord’   错误

• 数组的定义
  在定义数组的时候，我们不仅需要声明数组的类型，还需要告诉编译器我们是定义一个数组，当然定义数组也可以使用泛型定义这个我们后面会详细介绍

let list ：Number [] = [1,2,3,4]
let arr : String [] = ["111","2222"]

4.泛型<>

泛型主要是用来提高我们代码的复用性，当然之前我认为泛型没啥用，但是当我使用了一次之后，“真香”，下面简单给大家一个案例，供大家参考

function getNumber（arg：number）{
	return arg
}
这是一个简单的Ts函数，我们限定了输入的实参必须是一个数字类型的
但是如果我们这是一个抽象出来的公共组件，或者工具函数，那么需求变更，现在实参只能是String，那么这个函数就废了。。。。

采用泛型函数

function getNumber<T>（arg：T）{
	return T
}
调用
let outPut = getNumber<String>("HelloWord");
let outPut = getNumber<Number>(1123);
这样我们只需要在调用函数的时候声明一下参数的类型，大大提高了函数的复用性，降低程序的耦合性

使用泛型定义数组

let :Array<T>  = []
Array<String> = ["1","2"]
Array<Number> = [1,2,3,4]

5.枚举

枚举类型是对Js标准数据格式的一种补充，使用枚举可以提前为数据赋予一个友好的名字，我们可以根据枚举提供的姓名去映射到对应的值。

enum orderStatus {
	start=1,
	unpaid,
	Shipping
}
当我们给第一个key赋值为1是，枚举类型会默认自增，其实计算机在运行时会这样找，
enum orderStatus {
	start=1,
	unpaid=2,
	Shipping=3
}
但是当我们的枚举变量的值是字符串的时候，枚举就失去了这个特性
enum orderStatus {
	start=“123”,
	unpaid=“unpaid2”,
	Shipping,
}
我们可以利用枚举的反向映射拿到对应的值
orderStatus [2]  对应的是 “unpaid2”

6.重载

如果有人告诉你一个函数可以接受可以有多个不同类型的参数，你一脸懵逼，那么你要好好看看这里，首先重载的意义就是一个函数可以接受多个不同类型的参数，返回不同的结果，下面给大家写一个简单的案例介绍：

function reverse (X:number):number  {}
约定函数 reverse 接受一个number类型的参数，返回值也是number类型

function reverse (X:String):String {} 
约定函数 reverse 接受一个String  类型的参数，返回值也是String  类型

重载开始
function reverse (X:number | string,Y:number | string):number |  string{
	if(typeof X === number){
	}else{
	}
	if(typeof Y === number){
	}else{
	}
	//进行一些操作
}
console.log(reverse(3))
console.log(reverse("3"))

7.接口

接口是对行为的抽象，对对象形状的简单描述，说白了就是你在定义一个对象时候的一些约束条件，规范化编码。

例如：
interface Person {
		name：String,
		age： Number
}
let Tom ：Person = {
	name："Tom",
	age： 18
}

结语：

这是TypeScript系列的第一篇文章，这个系列可能会有五片左右的文章和大家见面，主要事项Ts初学者提供一些参考，文章中有不正确的地方，当然有些地方可能自己理解的还不是很到位，比较浅显，欢迎大家在留言中批评指正，共同进步。