关于javascript:TypeScript三-基础类型语法

根底类型语法
- 原始类型
  - 字符串
  - 数字
  - 布尔值
  - Null
  - Undefined
  - Symbol
- Void
- Never
- any类型
- Object类型
- 数组类型
- 元组类型
  - 元组的应用场景
- 枚举类型
  - 特点
  - DEMO
  - 枚举类型会入侵代码
  - 常量枚举
TypeScript学习地图

根底类型语法

原始类型

字符串

const a: string = 'foobar'

数字

const b: number = 100 // NaN 、 Infinity

布尔值

const c: boolean = true // false

Null

const e: null = null

非严格模式下string、number、boolean、void容许为空null，严格模式下不行

// 严格模式下会报错const d: string = null

如何敞开严格模式? 置文件中找strict

{  "compilerOptions": {    // true是开启严格模式，false是敞开严格模式    "strict": false,  }}

Undefined

const f: undefined = undefined

Symbol

尽管是原始类型，然而这个类型是ES6提出的，默认的配置是ES3，所以会报错。

如果target改成es5，Symbol也会报错，怎么办呢? TypeScript(一) —— 类型规范库中有具体阐明

const h: symbol = Symbol()

Void

它示意没有任何类型。

const d: void = undefined

最长当一个函数没有返回值时，你通常会见到其返回值类型是 void。

function Fuc(): void {    console.log('hello world')}

Never

目前没有见到用的，看文档说函数抛出异样会用，所以这里先不做解释。

any类型

any是任意类型，其依然是动静类型，和一般的JavaScript变量是一样的，能够存储任意类型的值，在运行中也能够扭转成任意类型的值，语法上都不会报错，因为是任意类型的值所以TypeScript不会对其做类型查看。

let foo: any = 'string'foo = 100foo.bar()

// 以后value能够是任意类型的值function stringify(value: any) {    return JSON.stringify(value)}stringify('string')stringify(100)stringify(true)

而正是因为any不会进行类型查看，所以还是存在类型平安的问题，所以不要轻易应用，其存在还是次要 为了老代码的兼容存在 。

Object类型

Object类型即非原始类型，不单单指对象类型，还包含对象、数组、函数类型。

// 应用原始类型会报错// 这里object不是只接管对象，而是包含函数、数组和对象const foo: object = function () {} // 对象 {} // 数组 []

单纯要对象类型须要定义字面量模式，限度是赋值的对象构造必须和定义的完全一致，不能多也不能少。

const obj: {foo: number, bar: string} = {foo: 123, bar: 'string'}

如果在TypeScript中限度对象类型，更业余的形式是应用接口，接口的货色下次再说。

数组类型

// 一般申明const arr1: Array<number> = [1, 2, 3]// 简短申明const arr2: number[] = [1, 2, 3]

举个例子：传入数字的参数，最初返回数字的总和

// 所以这里要确定咱们这里是不是数字类型，增加数组类型注解function sum (...args: number[]) {  // reduce的第一个参数是上一次回调的后果 第二个参数是以后值(初始值为0)，最初返回两者之和  return  args.reduce((prev, current) => prev + current, 0)}console.log(sum(1, 2, 3, 4, 5)) // 15console.log(sum(1, 2, '3', 4, 5)) // error!

元组类型

元组是明确元素数量，以及每个元素类型的数组。能够数组字面量来申明元组类型。

// 上面的如果类型和数量不统一都会报错const tuple: [number, string] = [1, 'string']// 如果要拜访元组的元素，仍旧应用下标的形式拜访即可const age = tuple[0]const name = tuple[1]// 也能够应用数组解构的形式拜访const [age, name] = tuple

元组的应用场景

在函数中返回多个返回值
React useState() Hook返回的是元组类型
Object.entries()获取对象中所有的键值数组，每个键值就是一个元组

枚举类型

开发过程中，常常波及到须要用某几个数值去代表某几种状态。其余语言中很常见这种数据结构，然而在JS中并没有这种数据结构，个别会用对象去模仿。

const PostStatus = {    Draft: 0,    Unpublished: 1,    Published: 2}const page = {    title: 'typeScript指南',    content: 'content',    status: PostStatus.Draft}

特点

当初TypeScript中有了枚举类型，其特点是：

给一组数值取一个语义性更好的名字
一组数据中只存在几个固定的值，不存在超出范围的可能性

DEMO

举个例子：上面是出版书籍的三个状态：

Draft是草稿状态：0
Unpublished是未出版：1
Published是已出版：2

// enum是枚举类型，前面是枚举名称，外面应用的是等号并不是冒号enum PostStatus {  Draft = 0,  Unpublished = 1,  Published = 2}// 应用的时候还是用对象.的形式去应用const post = {  title: 'typeScript指南',  content: 'content',  status: PostStatus.Published // 1 // 0}

如果不加=，那么值就默认从0开始累加

enum PostStatus1 {  Draft, // 0  Unpublished, // 1  Published // 2}

如果给了第一个值，那么之后的成员都会在此基础上进行累加

enum PostStatus2 {  Draft = 6, // 6  Unpublished, // 7  Published // 8}

枚举的值还能够是字符串，字符串无奈自增长，须要每个都进行赋值

enum PostStatusStr {  Draft = 'string1',  Unpublished = 'string2',  Published = 'string3'}

枚举类型会入侵代码

枚举类型会入侵到运行时的代码，简略说就是会影响编译的后果，TypeScript的大多数类型最终都会被编译移除掉，只是为了开发的时候能进行类型查看，而枚举会编译成 双向的键值对对象 ，能够通过值找键，能够依据键找值。

上面这种代码就会保留到我的项目中

var PostStatus;(function (PostStatus) {    // 能够看到上面的代码，内层应用枚举的键存储枚举的值，外层再用枚举的值去做键，存一下枚举的键    PostStatus[PostStatus["Draft"] = 0] = "Draft";    PostStatus[PostStatus["Unpublished"] = 1] = "Unpublished";    PostStatus[PostStatus["Published"] = 2] = "Published";})(PostStatus || (PostStatus = {}));

这样做的目标是：能够动静的依据枚举值去获取枚举的名称

PostStatus[0] // Draft

如果咱们不必下面这个语句去拜访键，那么倡议应用常量枚举

常量枚举

常量枚举就是在enum后面增加const，这样就不会对代码进行入侵，下面的双向键值对的代码会被移除，只是在最初增加一些正文。

不加const的编译后代码

var PostStatus;(function (PostStatus) {    PostStatus[PostStatus["Draft"] = 0] = "Draft";    PostStatus[PostStatus["Unpublished"] = 1] = "Unpublished";    PostStatus[PostStatus["Published"] = 2] = "Published";})(PostStatus || (PostStatus = {}));var post = {    title: 'Hello TypeScript',    content: 'content',    status: PostStatus.Published // 1 // 0};

加const的编译后代码

// 下面的PostStatus会去掉，换成上面间接取的值var post = {    title: 'Hello TypeScript',    content: 'content',    status: 2 /* Published */ // 1 // 0};

目录