01.Typescript的安装和数据类型(以前的数据类型和元组)

1.Typescript起步

Typescript定义

可扩展的JavaScript。

TypeScript是JavaScript的类型化超集，可编译为纯JavaScript。

任何浏览器。任何主机。任何操作系统。开源。

Typescript特点

• 开始和结束于 的JavaScript

TypeScript从当今数百万JavaScript开发人员所知道的相同语法和语义开始。使用现有的JavaScript代码，合并流行的JavaScript库，并从JavaScript调用TypeScript代码。

TypeScript编译为干净，简单的JavaScript代码，该代码可在任何浏览器，Node.js或任何支持ECMAScript 3（或更高版本）的JavaScript引擎中运行。

• 强大的工具 大型应用

类型使JavaScript开发人员可以在开发JavaScript应用程序时使用高效的开发工具和做法，例如静态检查和代码重构。

类型是可选的，并且类型推论允许一些类型的注释对代码的静态验证产生很大的影响。类型使您可以定义软件组件之间的接口，并深入了解现有JavaScript库的行为。

• 最先进的 的JavaScript

TypeScript支持最新和不断发展的JavaScript功能，包括ECMAScript 2015中的功能以及未来的提案（例如异步功能和装饰器），以帮助构建可靠的组件。

这些功能可在开发时用于高信任度的应用程序开发，但已编译为针对ECMAScript 3（或更新版本）环境的简单JavaScript。

Typescript的安装

1.我们首先需要安装node

去官方网站下载node安装包

https://nodejs.org/zh-cn/

安装完成后按住shift+鼠标右键 打开powershell 窗口 输入命令node -v 检测

接下来我们就可以安装Typescript

npm install -g typescript

安装完成后输入tsc命令查看是否安装成功

QQ截图20200523113937.png

基本变量声明

ts的变量声明与我们的js有所不同
声明的时候指定类型
接下来我们看代码

let num:number = 1;
console.log(num)

然后打开终端在包含xxx.ts文件夹下输入 tsc 加文件名

QQ截图20200524075229.png

var num = 1;
console.log(num);

因为要考虑兼容性的问题 js会把ts编译成适应大多数浏览器的es5语法

我们继续说变量
如果一个变量声明时没有赋予数据类型

let a = 1;
//此时什么都不会报错
//但是如果要是重新赋值为其他数据类型;
a = "小明";
//这样就会报错  

QQ截图20200524080129.png

这种方式实现的变量命名有一个好处, 那就是赋值语句中等号右侧值的类型和等号左侧自行定义的值的类型必须得是完全一致的,否则会报错. 如果赋值的时候传入的是正确的数值,后期又重新赋值了错误类型的值,同样也会报错

那么如果一个变量声明了数据类型 没有赋值呢

let a:number;
//这里a给予数据类型为数字  然而没有赋值  那么他就是undefined
//这里我们把a和undefined进行比较
if(a===undefined){
  console.log(true)
}

QQ截图20200524081010.png

这里我们看见他打印出来的是true 说明a没有赋值时 默认值为undefined
接下来如果们把a在次赋予number类型时 会报错吗?

QQ截图20200524081314.png

嘿嘿 其实不会报错的 但如果这里你要是换成了其他数据类型就一定会报错

如果只是创造了变量并规定了类型, 那么这个变量默认的值就是undefined

如果只是写了一条没有确定的值的变量声明语句, 那么这个值用起来的时候就是undefined, 但是一旦后面有其他的新的赋值操作, 还是会按照变量的预设格式来的

元组类型表示一个已知元素数量和类型的数组，各元素的类型不必相同

接下来我们看实例

let a:[number,string,boolean,object,number];
//此时我们给a赋值
a = [1,"小明",false,{name:"小明"},123];
//此时不会报错  

那么如果我们不按照这个顺序来 或者多一位少一位呢
首先我们没有按照顺序来 返回的报错如图 不能把字符串类型分配给数字类型

QQ截图20200524091136.png

然后是这里 我们多加了一位 报错信息length为6 不等于5

QQ截图20200524091303.png

QQ截图20200524091613.png

这里告诉我们缺了一位

所以呢我们创建元组时 要注意每一项的数据类型 和 length ******