当我们在 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类型代表了一种从不存在的值类型,这有点让人困惑,我们这样理解:
死循环功能
抛出异常的函数
发表评论