TypeScript 入门:作用域、Object 类型

204 阅读4分钟

上两篇内容:

我们为什么要学习 TypeScript?

TypeScript 入门应用:类型系统和配置文件

作用域问题

即便不同文件中,有相同变量名字,也会出现变量名同名的错误。可以使用立即执行函数,包装作用域。

(
  function () {
    consta: number =66;
    constb: string ='bbb';
  }
)()

立即执行函数并不方便使用,这里我们使用 ES6 中的模块化是以文件为单位的,在代码的末尾,使用 export{} 来标注模块化代码文件,模块与模块之间的作用域是相互独立的。

const a: number =66;
const b: string ='bbb';

​export{}

真实开发场景下,一般都是使用模块化语法规则导入导出的。

Object 类型

TS 中的 Object 类型,包含了数组、函数和对象。

const f1:object =function(){}
const a1:object = []
const o1:object = {}

export {}

对象的具体类型限制,标注的对象要具体属性名字及类型,值必须一一对应,不能多也不能少。

// 具体标注对象类型,标注的对象要具体属性名字及类型,值必须一一对应
const o2:{n1:number,s2:string} = {n1:666,s2:'xilinglaoshi'}

当然,更专业的还是使用接口的方式。

数组

  • 普通数组的定义

数组的定义有两种方式,使用泛型及普通标注。

// xx:类型<元素类型>
const arr:Array<number>= [2,3,66]// 纯数字类型数组
const arr2:number[] = [66,77,88]

  • 元组类型

明确元素数量及元素类型的数组。

// 元组类型(多类型的数组)
const tuple:[number,string] = [66,'xiling']

​// 当作普通数组操作获取
const age = tuple[0]
const username = tuple[1]
// 解构赋值
const [ages,names] = tuple
  • 枚举类型

枚举类型在其他编程语言中很是常见,但是 JS 中却没有,枚举类型能做什么什么呢?

先看一个小案例:

const post = {
  title:'一块手表的逆袭',
  content:'曾经有一块非常廉价的手表,出生在罗马帝国……',
  status:0//文章状态 2发表,1未发表, 0草稿
}

状态标识 status 属性,容易混乱更容易忘记,还会乱入其他值,以往我们会使用一个对象标注状态,比如:

const PostStatus = {
  Draft:0
  Unpublished:1,
  Published:2
}​

const post = {
  title:'一块手表的逆袭',
  content:'曾经有一块非常廉价的手表,出生在罗马帝国……',
  status: PostStatus.Published////文章状态 2发表,1未发表, 0草稿
}

而如果使用枚举类型,我们就可以这样了:

// 定义枚举类型的数据,
enum PostStatus {
  Draft=0,
  Unpublished=1,
  Published=2
}

​const post = {
  title:'一块手表的逆袭',
  content:'曾经有一块非常廉价的手表,出生在罗马帝国……',
  // 枚举类型的使用与对象一样
  status: PostStatus.Published
}

看着好像并没有什么区别,其实枚举最大的作用在于可以递增,如果不赋值,则默认从零,如果给第一个赋值,则从第一个数值开始累加。

// 定义枚举类型的数据,
enum PostStatus {
  Draft=6,//赋值,则累加,不赋值则从 0 开始
  Unpublished,
  Published
}​

const post = {
  title:'一块手表的逆袭',
  content:'曾经有一块非常廉价的手表,出生在罗马帝国……',
  // 枚举类型的使用与对象一样
  status: PostStatus.Published
}

​console.log(post)

当然,枚举类型的值,也可以是字符串,但是字符串是无法累加的,因此,极为少见,这里就不介绍了。

我们可以进行编译,然后查看结果。我们能够发现,是一个双向的键值对对象,就是可以通过键获取值,也可以通过值获取键,编译后就能看到,无非就是将表达式作为键存储起来而已。这样做,我们就可以在 ts 中,通过下标的方式,获取枚举的名称了。

如果我们确认在代码中,不会使用使用索引获取枚举名称,那我建议大家使用常量枚举,编译过后我们能在 JS 代码中看到,枚举代码已经被移除了,代码中直接使用了具体的值,并且会使用注释标注类型名称。

// 定义枚举类型的数据,
constenum PostStatus {
  Draft=6,//赋值,则累加,不赋值则从 0 开始
  Unpublished,
  Published
}​

const post = {
  title:'一块手表的逆袭',
  content:'曾经有一块非常廉价的手表,出生在罗马帝国……',
  // 枚举类型的使用与对象一样
  status: PostStatus.Published
}

​console.log(post)