当前位置:网站首页>TypeScript(三) —— 基础类型语法

TypeScript(三) —— 基础类型语法

2020-12-06 20:01:43 顽皮的雪狐七七

目录

  • 基础类型语法

    • 原始类型

      • 字符串
      • 数字
      • 布尔值
      • 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改成es5Symbol也会报错,怎么办呢? 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学习地图

版权声明
本文为[顽皮的雪狐七七]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000038393148