0%

TypeScript基础类型

发表于 分类于 ， Valine：

类型基础

强类型语言：不允许改变变量的数据类型，除非进行强制类型转换。

弱类型语言：变量可以被赋予为不同的数据类型。

静态类型：在编译阶段确定所有变量的类型。

动态类型：在执行阶段确定所有变量的类型。

静态类型与动态类型对比

静态类型语言 动态类型语言
对类型极其严格 对类型宽松
立即发现错误 bug隐藏比较深
运行时性能好 运行时性能差
自文档化 可读性差

动态类型语言支持者：

  • 性能是可以改善的（V8引擎），语言灵活性更重要
  • 隐藏的错误可以通过单元测试发现
  • 文档可以通过工具生成

TypeScript基础类型

TypeScript增加了 void，any，never，元组，枚举，高级类型

类型注解

作用：相当于强类型语言中的类型申明
语法：（变量名/函数）: type

布尔值

1
let isBoolean: boolean = false

数字

TypeScript 里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript 还支持 ECMAScript 2015中引入的二进制和八进制字面量。

1
2
3
4
let decLiteral: number = 20
let hexLiteral: number = 0x14
let binaryLiteral: number = 0b10100
let octalLiteral: number = 0o24

字符串

1
2
let name: string = 'bob'
name = 'smith'

数组

有两种方式可以定义数组。 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

1
let list: number[] = [1, 2, 3]

第二种方式是使用数组泛型，Array<元素类型>：

1
let list: Array<number> = [1, 2, 3]

null 和 undefined

TypeScript 里，undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null。 和 void 相似，它们的本身的类型用处不是很大：

1
2
let u: undefined = undefined
let n: null = null

默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量。

然而，当你指定了 --strictNullChecks 标记，null 和 undefined 只能赋值给 void 和它们各自，这能避免 很多常见的问题。 也许在某处你想传入一个 string 或 null 或 undefined，你可以使用联合类型 string | null | undefined。

symbol

1
2
3
4
let s1: symbol=Symbol()
let s2: symbol=Symbol();
// false
console.log(s1===s2)

Object

Object 表示非原始类型，也就是除 number，string，boolean，symbol，null或undefined 之外的类型。

1
2
3
4
5
6
let obj: Object = { x: 1, y: 2 }
// 类型“Object”上不存在属性“x”。
obj.x

let obj2: { x: number, y: number } = { x: 1, y: 2 }
obj2.x

元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string 和 number 类型的元组。

1
2
3
let x: [string, number]
x = ['hello', 10] // OK
x = [10, 'hello'] // Error

当访问一个已知索引的元素，会得到正确的类型：

1
2
console.log(x[0].substr(1)) // OK
console.log(x[1].substr(1)) // Error, 'number' 不存在 'substr' 方法

当访问一个越界的元素，会使用联合类型替代：

1
2
3
4
5
x[3] = 'world' // OK, 字符串可以赋值给(string | number)类型

console.log(x[5].toString()) // OK, 'string' 和 'number' 都有 toString

x[6] = true // Error, 布尔不是(string | number)类型

联合类型是高级主题，我们会在以后的章节里讨论它。

注意：自从 TyeScript 3.1 版本之后，访问越界元素会报错，我们不应该再使用该特性。

any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any 类型来标记这些变量。

通过 any 类型，实现对js的兼容

1
2
3
let notSure: any = 4
notSure = 'maybe a string instead'
notSure = false // 也可以是个 boolean

在对现有代码进行改写的时候，any 类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。并且当你只知道一部分数据的类型时，any 类型也是有用的。 比如，你有一个数组，它包含了不同的类型的数据：

1
2
3
let list: any[] = [1, true, 'free']

list[1] = 100

void

某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：

1
2
3
function warnUser(): void {
  console.log('This is my warning message')
}

声明一个 void 类型的变量没有什么大用，因为你只能为它赋予 undefined 和 null：

1
let unusable: void = undefined

never

never 永远不会有返回值的类型。 例如， never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never 类型，当它们被永不为真的类型保护所约束时。

never 类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是 never 的子类型或可以赋值给never 类型（除了 never 本身之外）。 即使 any 也不可以赋值给 never。

下面是一些返回 never 类型的函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 抛出异常
function error(message: string): never {
  throw new Error(message)
}

// 推断的返回值类型为never
function fail() {
  return error("Something failed")
}

// 死循环函数
function infiniteLoop(): never {
  while (true) {
  }
}

枚举

enum 类型是对 JavaScript 标准数据类型的一个补充。 像 C# 等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

enum 是一组有名字的常量的集合。

数字枚举

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 数字枚举
enum Role {
  Reporter = 1, //如果不赋值，默认是0，后面的枚举成员值递增
  Developer,
  Maintainer,
  Owner,
  Guest
}
// 1
console.log(Role.Reporter);

// Cannot assign to 'Reporter' because it is a read-only property.
Role.Reporter = 2

// 编译后
// 反向映射
var Role;
(function (Role) {
    Role[Role["Reporter"] = 1] = "Reporter";
    Role[Role["Developer"] = 2] = "Developer";
    Role[Role["Maintainer"] = 3] = "Maintainer";
    Role[Role["Owner"] = 4] = "Owner";
    Role[Role["Guest"] = 5] = "Guest";
})(Role || (Role = {}));

字符串枚举

1
2
3
4
5
6
// 字符串枚举
// 不支持反向映射
enum Message {
    Success = '恭喜你，成功了',
    Fail = '抱歉，失败了'
}

异构枚举

数字枚举，字符串枚举 混用，构成异构枚举，容易造成混淆，不推荐使用

1
2
3
4
enum Answer {
    N,
    Y = 'Yes'
}

常量枚举

为了避免在额外生成的代码上的开销和额外的非直接的对枚举成员的访问，我们可以使用 const 枚举。 常量枚举通过在枚举上使用 const 修饰符来定义。

常量枚举只能使用常量枚举表达式，并且不同于常规的枚举，它们在编译阶段会被删除。常量枚举不允许包含计算成员。

常量枚举不允许包含计算成员。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 常量枚举
const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]

// 编译后

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

枚举成员

枚举成员的值是只读属性，不允许修改。

枚举成员类型分为常量枚举（const member），需要被计算的枚举成员（computed member）

常量枚举包括三种情况：

  • 没有初始值
  • 对已有枚举成员的引用
  • 常量表达式

常量枚举成员会在编译时计算出结果，以常量的形式出现在运行时环境

需要被计算的枚举成员（computed member），是非常量的表达式，这些枚举成员的值不会在编译阶段计算，而会保留到程序的执行阶段计算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
enum Char {
  // const member
  a,
  b = Char.a,
  c = 1 + 3,
  // computed member
  d = Math.random(),
  e = "123".length,
  // computed member后的枚举成员必须赋予初始值
  f = 4
}

// 编译后
var Char;
(function (Char) {
    // const member
    Char[Char["a"] = 0] = "a";
    Char[Char["b"] = 0] = "b";
    Char[Char["c"] = 4] = "c";
    // computed member
    Char[Char["d"] = Math.random()] = "d";
    Char[Char["e"] = "123".length] = "e";
    // computed member后的枚举成员必须赋予初始值
    Char[Char["f"] = 4] = "f";
})(Char || (Char = {}));

类型断言

有时候你会遇到这样的情况，你会比 TypeScript 更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript 会假设你，程序员，已经进行了必须的检查。

类型断言有两种形式。 其一是“尖括号”语法：

1
2
3
let someValue: any = 'this is a string'

let strLength: number = (<string>someValue).length

另一个为 as 语法：

1
2
3
let someValue: any = 'this is a string'

let strLength: number = (someValue as string).length

两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好；然而，当你在 TypeScript 里使用 JSX 时，只有 as 语法断言是被允许的。

参考

-------------本文结束感谢您的阅读-------------