TypeScript 5分钟快速上手

TypeScript 5分钟快速上手

---

前言

TypeScript（以下简称ts）作为JavaScript(以下简称js)的超集（可以理解为升级版），他的出现主要是为了弥补js作为动态类型语言的一些缺陷。

TypeScript 的主要优点是它可以突出显示代码中的意外行为，从而降低出错的几率。所以比较适合团队开发。

安装

windows电脑

在桌面按住win+R（win键就是你键盘左侧CTRL和alt中间的按键），输入框中输入cmd。调出命令行工具，在命令行中输入

npm install -g typescript  //全局安装

进行全局安装

注意：由于国内网络原因，安装过程或许可能会有点长。

输入

tsc -v  //版本查看

检查是否安装成功

mac电脑

sudo npm install typescript -g  //全局安装
tsc --version   //查看是否安装

Linux系统

npm install -g typescript

不会真的有人把Linux当主要生产力吧！

TypeScript中的类型

为了能够更好的阅读下面的文章先来简单了解一下ts的类型，在js本来就存在的number、string、Boolean等的基础上又增加了一些新的类型。

1.number类型

number也就是数字类型，但好像ts好像没有int和float之分，所以数字尽可能使用number类型。

var  a: number = 1;
var b: float = 2.1;//error:找不到名称“float”。

2.string类型

string也就是字符串类型，用来表示这个变量或者值是 ‘ 字符串类型 ’

var c: string = "hello";

3.对象

// 对象
var obj:object = {
    name: '张三',
    123:123,//属性名可以是数字
    '456'//但并不支持简写，就是键名与键值一样，只写一个。
}

4.数组类型

数组没有关键词（不是:arr），甚至能在一个数组中存储多个类型的值。

当然你也可以规定数组中值的类型，达到统一效果。

//数组
var arr = [1, 2, '3',true];
//规定数组中的值都为number类型
var arr1: number[] = [1, 2, '3', true];//会报错，提示无法将字符串和布尔分配给number类型

5.元组

虽然上面的数组中在不规定类型的情况下，可以一个数组中存储多个类型的值，但为了能更加好的区分，增加了元组类型。

元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。

//元组
var arr2: [number, string] = [1, '2'];
//错误示范，错误示范，错误示范，错误示范
var arr3: [number, string] = ['3',4];//顺序不能乱
var arr2: [number, string] = [1, '2',3,'4'];//数量也不能多

6.boolean类型

boolean类型只有两个值：true和false

//boolean类型
var t:boolean= true;
var f:boolean= false;

7.void类型

void表示没有任何类型。

声明为void类型的变量，只能赋予undefined和null

当一个函数没有返回值的时候，其返回值的类型为void。

//void类型
function alertName():void{
    alert('张三');
}
var a:void=undefined;
var b:void=null;

8.never类型

如果说never是有值，但值是空或者值不存在，那never就是什么都没有，一个不可能存在的值。

//never类型
function error(message:string):never{
    throw new Error(message);
}

主要应用于检查程序是否正常运行的判断，说白了就是，如果一段代码运行正常，他是不存在错误的。

有错误但错误是undefined和null，跟不存在错误这是两个概念，这也就是never和void的区别。

9.any类型

在一些情况下，如果我们无法确定变量的类型时（或者无需确定类型时），我们可以将其指定为any类型。也就是任意类型，但不要建议在ts中频繁的你的使用any类型，不然就会anyScript。

//any类型
var any1:any = '123';//可以是字符串
var any1: any = 123;//可以是number
var any1: any = true;//可以是布尔

10.枚举

enum Color {
    Red,//默认是0
    Green,//后续的+1
}
//使用方法
Color.Red;//0
Color.Green;//1

//枚举赋值
enum Color1 {
    Red = 1,
    Green = '2',
}

当然这些只是对类型的简单介绍。

类型检查

静态检查指在不运行代码的前提下，仅仅根据代码的静态解析发现错误的做法。也就是说，静态检查是编**译时的检查，**而不是运行时的检查。

的通俗易懂点就是**：即便没运行代码也能检测代码中的错误。

1.1 类型检查

​ 首先新建一个01.ts文件

var a: number = 10;   //声明一个类型为：number的变量a,他的值是10
console.log(a);      //控制台输出
a = '10';           //在ts文件中会报红，提示你a只能赋值number类型的数据
a = 20;            //类型符合就不会报错

​

当然你即便在02.ts文件中声明变量a也会提示你a已经声明过了。

将ts文件编译成js文件

​ 由于浏览器不识别ts文件所以需要将写好的ts文件编译成浏览器能识别的js文件

​ 由于文件使用了.ts的扩展名，需要在命令行输入

tsc 你的文件名.ts

​ 对其进行编译，然后就会输出一个js文件。

​ 注意:即便类型错误会在终端中报错，但仍会编译出js代码

1.2 对不存在的变量进行提示

除了上述的类型检查以外，ts还能对js代码中不存在的变量进行提示

const obj = { a: 1, b: 2, c: 3 };
const num = obj.a + obj.d;//注意B与D的区别

在ts中会保错

js并不会提示你，只有在你运行时可能才会报错。

ts的使用能极大的避免了因书写而产生的错误。

1.3 使用interface定义类型

TypeScript提供了interface方法，可以根据自己的需求定义类型，提高一定的复用性。

当新的对象不符合预设的类型时，便会提示。