乐趣区

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

jiezi

目录

  • 根底类型语法

    • 原始类型

      • 字符串
      • 数字
      • 布尔值
      • 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 = 100

foo.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)) // 15
console.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
元组的应用场景
  1. 在函数中返回多个返回值
  2. React useState() Hook返回的是元组类型
  3. Object.entries()获取对象中所有的键值数组，每个键值就是一个元组

枚举类型

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

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

const page = {
    title: 'typeScript 指南',
    content: 'content',
    status: PostStatus.Draft
}
特点

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

  1. 给一组数值取一个语义性更好的名字
  2. 一组数据中只存在几个固定的值，不存在超出范围的可能性
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
};

TypeScript 学习地图

退出移动版