TypeScript入门详解

1、TypeScript是什么？

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

2、TS和JS的区别

2.1、TS的优点

1、静态输入
静态类型化是一种功能，可以在进行编写脚本时检测错误。查找并修复错误，对于编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。

2、大型的开发项目
有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。而使用TypeScript工具来进行重构更变的容易、快捷。

3、更好的协作
当发开大型项目时，进行开发的过程当中乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。

3、TS开发环境的搭建

有两种主要的方式来获取TypeScript工具：

• 通过npm（Node.js包管理器）
• 安装Visual Studio的TypeScript插件

在这里的安装基本上我们都采用node进行安装，首先我们需要下载nodeJs，之后我们直接执行命令进行安装TS。

npm install -g typescript

安装完成之后我们可以使用以下命令查看TS的版本：

tsc -v

之后我们新建一个项目，在项目当中我们新建一个ts文件，我们在ts文件当中我们先使用js的代码内容：

console.log("hello TS")

然后我们的ts文件是不能够在浏览器当中进行解析的，我们的ts文件首先需要通过编译，编译之后才能够被浏览器进行解析，我们直接使用命令

// tsc + 文件名
tsc demo.ts

编译之后我们的目录下面会产生一个和ts文件同名的js文件，之后我们就可以直接使用这个编译得到的js即可。我们安装好了node，就可以直接使用node命令对js文件进行解析了，使用node命令：

// node + 文件名
node demo.js

4、TS变量的声明和赋值

let和const是JavaScript里相对较新的变量声明方式。 像我们之前提到过的， let在很多方面与var是相似的，但是可以帮助大家避免在JavaScript里常见一些问题。 const是对let的一个增强，它能阻止对一个变量再次赋值。因为TypeScript是JavaScript的超集，所以它本身就支持let和const。在这里我们也就不对var、let、const做详细的解释了，相信了解js的小伙伴也是可以区分开来的。

// 声明一个变量a 并且a的数据类型为number
let a : number ;
// 所以对a的值赋为字符串就会出现报错
// a = "hello"
a = 10;

let b : string ;
b = "hello"
b = 3

// 可以看到我们这里的let会编译成var，在这里我们编译后的js是ES3的版本

// 声明变量直接赋值
let c : boolean = true

// 变量的声明和赋值时同时进行，会自动对变量进行制定数据类型
let d = true;
d = "123"

// js不考虑参数的数据类型和个数
function sum(a,b){
	return a+b
}

console.log(sum(41,"41"))

// 其中这里的类型也可以进行给到参数，返回值
function sum1(a:number,b:number){
	return a+b
}

console.log(sum1(41,"”47"))
// 并且对参数的个数进行限制
console.log(sum1(41,41,100))

// 返回值指定类型
function sum2(a:number,b:number):number{
	return a+"hello"
}
console.log(sum2(1,2))

5、TS类型

类型选择

类型选择

类型选择

类型	描述	number
number	1, 2, -22	任意数字，
string	“here we go”	任意字符串
boolean	true、false	布尔值tr