ecmascript 2015声明变量-TypeScript(三)定义变量和数据类型

当我们在 TypeScript 文件中声明一个名称(以及许多其他名称)时,会报错:

主要错误信息:

无法重新声明块范围变量“name”

我们没有明确声明名字(明确表示是我负责),但我们说我们重复声明了

如何解决这个问题呢?

方法一:删除DOMtypings的环境

然而这些方法并不适合我们,因为我们仍然想在 DOM 下编译我们的 TypeScript 代码

形式2:将我们的ts文件声明为模块

由于它与全局变量同名,因此我们将脚本封装到模块中。 由于模块有自己的作用域,因此不会与全局变量冲突:

let name = "coderwhy";
export {};

1.5. 控制台日志错误

另外,为了测试方便,我们经常使用console.log进行测试,使用时会报警告:

console.log 警告

这个时候我们就可以配置

"no-console": false

2.JavaScript数据类型 2.1.数字类型

Number类型是我们开发中经常使用的类型。 TypeScript 和 JavaScript 一样,不区分整数类型(int)和浮点类型(double),统一为数字类型。

// 1.数字类型基本定义
let num = 100;
num = 20;
num = 6.66;

如果你学过 ES6,应该知道 ES6 增加了二补码和八补码表示,TypeScript 也支持二补码、八补码和十六补码表示:

// 2.其他进制表示
num = 100; // 十进制
num = 0b110; // 二进制
num = 0o555; // 八进制
num = 0xf23; // 十六进制

2.2. 布尔类型

boolean类型只有两个值:true和false,很简单

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

2.3. 字符串类型

string类型是字符串类型,可以用单冒号或双冒号表示:

// 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. 数组类型

字段类型的定义也很简单,有两种形式:

const names1: string[] = ["why", "abc", "cba"];
const names2: Array = ["why", "abc", "cba"];

2.5. 对象类型

object对象类型可以用来描述一个对象:

// object类型表示
const myinfo: object = {
  name: "why",
  age: 20,
  height: 1.88,
};

但是里面的代码会报警告:

这是因为 TSLint 建议我们所有的键按字母顺序排序,这不是很有必要,我们仍然可以将其关闭:

"object-literal-sort-keys": false

财产不可访问

如果我们访问myinfo中的属性,我们会发现一个错误:

这是因为 TypeScript 不知道某个对象类型中有 name 属性。

但是,如果我们使其类型推断,我们就可以正常访问它:

另一种方法是定义我们之前将要学习的套接字。 TypeScript 的一个特别有用的功能是套接字接口。 我们稍后详细学习

2.6。 符号类型

在ES5中,如果我们无法给对象添加相同的属性名,例如下面的做法:

const person = {
  identity: "程序员",
  identity: "老师",
}

一般来说,我们的方法是定义两个不同的属性名称:例如identity1和identity2。

而且我们还可以通过symbol定义相同的名称,因为Symbol函数返回不同的值:

const s1 = Symbol("identity");
const s2 = Symbol("identity");
const person = {
  [s1]: "程序员",
  [s2]: "老师",
};

这是Symbol的一种用法,更多其他用法大家可以自己学习,或者等以后真正需要使用的时候我们再详细讲解。

2.7. 空且未定义

在 JavaScript 中,undefined 和 null 是两种基本数据类型。

在 TypeScript 中,它们各自的类型也是 undefined 和 null,这意味着它们都是实际值,也是它们自己的类型:

const n: null = null;
const u: undefined = undefined;

3.TypeScript数据类型 3.1.enum类型

3.1.1. 枚举的基本定义

枚举类型在很多语言中都有,比如C++、Java等,而且使用起来也非常简单ecmascript 2015声明变量ecmascript 2015声明变量,所以TypeScript引入了枚举类型,让我们开发起来有更好的便利性和安全性。

枚举类型通常定义一组数据:

enum Direction {
  EAST,
  WEST,
  NORTH,
  SOUTH,
}
const d1 = Direction.EAST;
const d2 = Direction.NORTH;

3.1.2. 枚举类型的值

枚举类型有自己的值,比如副本中的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. 元组类型

3.2.1. 元组的基本使用

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会觉得它和field很相似

不过,链表中一般定义的是同一套数据。 如果数据不同,类型将会丢失:

const aInfo: Array = ["why", 18, 1.88];
const itema = aInfo[0]; // why,但是并不知道itema是string类型还是number类型

3.3. 任何类型

在个别情况下,我们确实很难确定一个变量的类型,而且它可能会发生变化。 这时候我们可以使用任意类型(类似于Dart语言中的动态类型)

let a: any = "why";
a = 123;
a = true;
const aArray: any[] = ["why", 18, 1.88];

3.4. 空型

void类型一般用在函数没有返回值的情况下:

下面的函数,即使我们不指定它的类型,它也会通过类型推导:

const sum = (num1: number, num2: number) => {
  return num1 + num2;
};
// 相当于下面的写法
const sum: (num1: number, num2: number) => number = (num1: number, num2: number) => {
  return num1 + num2;
};

如果函数没有返回值,则其返回类型为 void

const sayHello: (name: string) => void = (name: string) => {
  console.log("hello " + name);
};

3.5. 从不打字

never类型代表了一种从不存在的值类型,这有点让人困惑,我们这样理解:

死循环功能

抛出异常的函数