关于typescript之定义变量和数据类型那点事

JavaScript虽然说深受万千程序员喜好，却有着对于企业大规模开发很难管理的缺陷。这时候，TypeScript的优点便体现出来。接下来，咱们会先接触在TypeScript中定义变量相关的问题。以后再来了解JavaScript类型在TypeScript中的变化以及TypeScript中新增的类型。但愿这些内容能够帮助你对typescript更加了解。

一. 变量声明方式
1.1. 声明变量的格式

咱们已经强调过不少次，在TypeScript中定义变量须要指定 标识符 的类型。

因此完整的声明格式以下：

var/let/const 标识符: 数据类型 = 赋值;

好比咱们声明一个message，完整的写法以下：

注意：这里的string是小写的，和String是有区别的
string是TypeScript中定义的字符串类型，String是ECMAScript中定义的一个类

let message: string = "Hello World";

message = "Hello TypeScript"; // 正确的作法
message = 20; // 错误的作法，由于message是一个string类型

1.2. 声明变量的关键字

在TypeScript定义变量（标识符）和ES6以后一致，可使用var、let、const来定义：

var myname: string = "abc";
let myage: number = 20;
const myheight: number = 1.88;
可是，咱们会发现使用var关键字会有一个警告：

var关键字警告

可见，在TypeScript中并不建议再使用var关键字了，主要缘由和ES6升级后let和var的区别是同样的，var是没有块级做用域的，会引发不少的问题，这里再也不展开探讨。

因此，在以后的开发中，咱们定义变量主要使用let和const

1.3. 变量的类型推断

在开发中，有时候为了方便起见咱们并不会在声明每个变量时都写上对应的数据类型，咱们更但愿能够经过TypeScript自己的特性帮助咱们推断出对应的变量类型：

let message = "Hello World";

上面的代码咱们并无指定类型，可是message实际上依然是一个字符串类型：
Image02

给message赋值一个number
这是由于在一个变量第一次赋值时，会根据后面的赋值内容的类型，来推断出变量的类型：

上面的message就是由于后面赋值的是一个string类型，因此message虽然没有明确的说明，可是依然是一个string类型

let message = "Hello World"; // string类型
let age = 20; // number类型
let isFlag = true; // boolean类型

1.4. 声明name报错

咱们在TypeScript的文件中声明一个name（不少其余的名字也会）时，会报错：
image03

声明name报错信息
主要错误信息：

没法从新声明块范围变量“name”
咱们前面明明（明明说管我什么事）没有声明name，可是却说咱们重复声明了

此次是由于咱们的typescript 将 DOM typings 做为全局的运行环境；
因此当咱们声明 name时， 与 DOM 中的全局 name 属性出现了重名；

image04

name的声明位置
如何解决这个问题呢？

有两种方案：去掉 DOM typings 的环境和声明模块
方式一：删除DOM typings的环境

可是这种办法对于咱们来讲并不合适，由于咱们依然但愿在DOM下编译咱们的TypeScript代码
image05

删除DOM typing

方式二：声明咱们的ts文件为一个模块

既然与全局的变量出现重名，那咱们将脚本封装到模块（module）中，由于模块有属于本身的做用域，就不会和全局的产生冲突：

在 Typescript 中，咱们可使用ES6的export来导出一个对象，而且该文件被视为 module
let name = "coderwhy";

export {};
1.5. console.log报错

另外为了测试方便咱们常用console.log来进行测试，可是使用时会报一个警告：

console.log警告
这个时候，咱们能够配置
image06

配置tslint
"no-console": false

二. JavaScript数据类型
2.1. number类型

数字类型是咱们开发中常用的类型，TypeScript和JavaScript同样，不区分整数类型（int）和浮点型（double），统一为number类型。

// 1.数字类型基本定义
let num = 100;
num = 20;
num = 6.66;
若是你学习过ES6应该知道，ES6新增了二进制和八进制的表示方法，而TypeScript也是支持二进制、八进制、十六进制的表示：

// 2.其余进制表示
num = 100; // 十进制
num = 0b110; // 二进制
num = 0o555; // 八进制
num = 0xf23; // 十六进制
2.2. boolean类型

boolean类型只有两个取值：true和false，很是简单

// boolean类型的表示
let flag: boolean = true;
flag = false;
flag = 20 > 30;
2.3. string类型

string类型是字符串类型，可使用单引号或者双引号表示：

注意：若是打开了TSLint，默认状况下推荐使用使用双引号
// string类型表示
let message: string = "Hello World";
message = 'Hello TypeScript';
同时也支持ES6的模板字符串来拼接变量和字符串：

const name = "why";
const age = 18;
const height = 1.88;

const info = my name is ${name}, age is ${age}, height is ${height};
console.log(info);
2.4. array类型

数组类型的定义也很是简单，有两种方式：

可是TSLint会推荐咱们使用上面这种方式
const names1: string[] = ["why", "abc", "cba"];
const names2: Array<string> = ["why", "abc", "cba"];
2.5. object类型

object对象类型能够用于描述一个对象：

// object类型表示
const myinfo: object = {
name: "why",
age: 20,
height: 1.88,
};
可是上面的代码会报一个警告：

image07

object定义后警告
这是由于TSLint建议咱们全部的key按照字母进行排序，可是这个并非特别有必要，咱们仍是能够关闭掉：

image08

关闭TSLint字母排序
"object-literal-sort-keys": false
属性是不能够访问的

若是咱们访问myinfo中的属性，会发现报错：

image09

找不到name属性
这是由于TypeScript并不知道某一个object类型上面就有一个name的属性。

可是若是咱们让它是类型推断的，就能够正常的访问：

这是由于推导出来的类型，是以下的类型
image10

myinfo的类型
还有一种方法是定义后面会学到的接口，TypeScript一个很是好用的特性就是接口interface，后续咱们会进行很是详细的学习

2.6. symbol类型

在ES5中，若是咱们是不能够在对象中添加相同的属性名称的，好比下面的作法：

const person = {
identity: "程序员",
identity: "老师",
}
一般咱们的作法是定义两个不一样的属性名字：好比identity1和identity2。

可是咱们也能够经过symbol来定义相同的名称，由于Symbol函数返回的是不一样的值：

const s1 = Symbol("identity");
const s2 = Symbol("identity");

const person = {

};
这是Symbol的一个用法，更多其余用法你们能够自行学习，或者等到后续确实须要用到时，咱们再详细讲解。

2.7. null和undefined

在 JavaScript 中，undefined 和 null 是两个基本数据类型。

在TypeScript中，它们各自的类型也是undefined和null，也就意味着它们既是实际的值，也是本身的类型：

const n: null = null;
const u: undefined = undefined;
三. TypeScript数据类型
TypeScript在原有的JavaScript基础上引入了不少好用的类型：enum枚举类型、tuple元组类型、any类型、void类型、never类型等”
3.1. enum类型

3.1.1. 枚举的基本定义

枚举类型在不少语言都有的类型，好比C++、Java等等，而且也很是好用，因此TypeScript引入了enum类型，让咱们开发更好的方便和安全。

枚举类型一般是定义一组数据：

enum Direction {
EAST,
WEST,
NORTH,
SOUTH,
}

const d1 = Direction.EAST;
const d2 = Direction.NORTH;
3.1.2. 枚举类型的值

枚举类型有本身的值，好比打印上面的d1和d2
image11

打印d1和d2结果
默认状况下，枚举中的数据是从0开始的，咱们能够改变它的初始化值，好比下面的代码：

enum Direction {
EAST = 10,
WEST,
NORTH,
SOUTH,
}

const d1 = Direction.EAST;
const d2 = Direction.NORTH;

console.log(d1); // 10
console.log(d2); // 12
也能够所有本身来指定：

enum Direction {
EAST = 10,
WEST = 20,
NORTH = 30,
SOUTH = 40,
}

const d1 = Direction.EAST;
const d2 = Direction.NORTH;

console.log(d1); // 10
console.log(d2); // 30
咱们也能够经过对应的值去获取对应的数据名称：

console.log(Direction[10]); // EAST
console.log(Direction[30]); // NORTH
3.2. tuple类型

3.2.1. tuple的基本使用

tuple是元组类型，不少语言中也有这种数据类型，好比Python、Swift等。

const tInfo: [string, number, number] = ["why", 18, 1.88];
const item1 = tInfo[0]; // why, 而且知道类型是string类型
const item2 = tInfo[1]; // 18, 而且知道类型是number类型
3.2.1. tuple和数组类比

初学tuple会以为它和数组很是类似

可是数组中一般会定义一组相同的数据，若是数据不一样会形成类型的丢失：

注意：这里我使用了一种联合类型，后面会讲到
const aInfo: Array<string|number> = ["why", 18, 1.88];
const itema = aInfo[0]; // why，可是并不知道itema是string类型仍是number类型
3.3. any类型

在某些状况下，咱们确实没法肯定一个变量的类型，而且可能它会发生一些变化，这个时候咱们可使用any类型（相似于Dart语言中的dynamic类型）

let a: any = "why";
a = 123;
a = true;

const aArray: any[] = ["why", 18, 1.88];
3.4. void类型

void类型一般用于函数没有返回值时来使用：

首先咱们须要说明的是，在TypeScript中函数也是有类型的
下面的函数，虽然咱们没有指定它的类型，可是它会经过类型推导出来：

const sum = (num1: number, num2: number) => {
return num1 + num2;
};

// 至关于下面的写法
const sum: (num1: number, num2: number) => number = (num1: number, num2: number) => {
return num1 + num2;
};
image12
sum函数的类型
若是一个函数没有返回值，那么它的返回值类型就是void

咱们能够将null和undefined赋值给void类型，也就是函数能够返回null或者undefined
const sayHello: (name: string) => void = (name: string) => {
console.log("hello " + name);
};
3.5. never类型

never类型表示一种历来不会存在的值的类型，有点绕，咱们来这样理解：

若是一个函数中是一个死循环，那么这个函数会返回东西吗？不会，那么写void类型或者其余类型做为返回值类型都不合适，咱们就可使用never类型。
若是一个函数是抛出一个异常，那么这个函数是否是也没有返回值呢？这个时候咱们也可使用never类型。
image13
死循环的函数
image14抛出异常的函数备注：全部内容首发于公众号Flutter、TypeScript、React、Node、uniapp、小程序开发、数据结构与算法等等，也会更新一些本身的学习心得等，欢迎你们关注。最后我想说的是，变量及数据类型犹如在茫茫TS宇宙中的一颗行星，想要更加深刻了解TS，光看这些是远远不够的，若是你对此有兴趣，接下来我会分享更多关于TS的内容，固然你也能够自行研究，但愿这些内容能够帮你在编程道路上更进一步。