【TypeScript】基础语法

Composition
166 阅读5分钟

这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

TS基本类型

（1）布尔、数字、字符串、Null

  • 在变量名之后添加类型注解

    • 类型注解：一种轻量级的为函数或变量添加约束的方式
    • TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解
    // 布尔
let isDone: boolean = true

// 数字
let num: number = 10

// 字符串
let str: string = 'Ruovan'

// null、undefined
let n: null = null
let u: undefined = undefined

    默认情况下 null 和 undefined 是所有类型的子类型，即可以将这两个值赋值给任意类型

    但其它类型就不能相互再赋值了，如

    let num: number = 10

num = '10' // 提示不能将类型 'string' 分配给 类型 'number'

（2）数组

  • 数组的定义方式有两种：

    • 第一种：在元素类型后加上[]

      // 后接[]
let arr: numer[] = [1, 2, 3]

    • 第二种：使用数组泛型Array<元素类型>

      // 数组泛型
let arr: Array<number> = [1, 2, 3]

  • 数组的类型

    • 元素类型可以通过|分开，表示可以是多种类型

      // 多个类型
let arr: (number | string)[] = [1, '2', 3]

    • 元素类型可以用{}包裹，表示对象类型数组

      注意：这里已经明确对象内有什么属性.和属性是什么类型的，不能是其它属性或者其他类型

      let arr: {name: string, age: number}[] = [
    { name: 'ruovan', age: 24 },
    { name: 'composition', age: 18 }
]

（3）元组

  • 数组一般由同种类型的值组成，但有时我们需要在单个变量中存储不同类型的值，这时候我们就可以使用元组

    • 元组类型允许表示一个已知元素数量和类型的数组
    • 元组各元素的类型不必相同
    • 元组赋值时，必须提供每个属性的值
    • 元组的使用方式同数组
    // 定义一个名为 tuple 的元组
let tuple: [string, number]

// 需要按正确的类型顺序，依次初始化 tuple 元组
tuple = ['tuple', 123]

（4）枚举

  • 枚举：可以用来定义一些带名字的常量，
    • 应用：用某几个数值去代表某种状态，使用枚举定义一些带名字的常量，方便理解
（a）数字枚举

  • 数字枚举的所有成员默认为Number类型，在默认情况下，从 0 开始为元素编号，后面的元素依次递增

    • 数字枚举还支持反向映射，即，可以由枚举值得到枚举名称
    // 定义一个枚举类型
enum Demo {
    A,
    B    
}

Demo.A // 0
Demo.B // 1

// 可以反向映射
Demo[0] // 'A'
Demo[1] // 'B'

// 编译后
"use strict"
var Demo;
(function (Demo) {
  Demo[(Demo["A"] = 0)] = "A"
  Demo[(Demo["B"] = 1)] = "B"
})(Demo || (Demo = {}))

  • 也可以手动指定成员的数值，如果一个成员设了一个值，那么后面相应的值都会递增

    • 当然，也可以全部手动赋值，这样就不存在递增的特性
    enum Demo {
    A = 2,
    B     
}

Demo.A // log: 2
Demo.B // log: 3

Demo[2] // log: 'A'
Demo[3] // log: 'B'
（b）字符串枚举

  • 字符串枚举中所有成员都是String类型，且初始化时必须赋值

    • 字符串枚举中没有自增的特性，没有反向映射的特性
    enum Test {
    A = 'a',
    B = 'b'
}

Test.A // log: 'a'
Test.B // log: 'b'

Test['a'] // 错误,没有反向映射

// 编译后
"use strict"
var Test
(function (Test) {
    Test["A"] = "aaa"
    Test["B"] = "bbb"
})(Test || (Test = {}))
（c）异构枚举

  • 异构枚举相当于数字枚举和字符串枚举的结合体，但很少使用

    enum Demo{ 
    A = 1,
    B = 'b'
}
（d）常量枚举

  • 常量枚举以const关键字为前缀

    • 它不会为枚举类型编译生成任何Javascript，而是直接使用成员的值
    • 不支持反向映射
    const enum Direction {
  NORTH,
  SOUTH,
  EAST,
  WEST,
}

let dir: Direction = Direction.NORTH

// 编译后
"use strict"
var dir = 0 /* NORTH */

（5）Any

  • any类型可以表示任何类型，这让 any 类型成为了TypeScript的顶级类型（也被称作全局超级类型）

    • 它可以被赋值为任何类型，甚至使用任何方法
    • 可以使用 any 类型来标记在编程阶段还不清楚类型的变量
    • 可以对 any 类型的值执行任何操作，而无需事先执行任何形式的检查
    // any类型
let notSure: any = 10
notSure = '10'
notSure = true

（6）Unknown

  • unknown类型表示未知类型，是另一种顶级类型

    • 它可以被赋值为任何类型，但不能使用任何方法，因为它是未知的
    • unknown 类型只能被赋值给 any 类型和 unknown 类型本身
    // unknown 类型
let value: unknown
value = true
value = 42

// 无法赋值为其它类型
let value1: number = value // Error
let value2: string = value // Error

// 只能赋值给 any | unknown
let value3: any = value
let value4: unknown = value

（7）Void

  • void类型表示没有任何类型——空类型

    • 通常，一个函数没有返回值时，其返回值类型是void
    • 在声明函数返回值类型时，在方法名后面添加类型注解
    // 函数： 表示函数的返回值为空（null || undefined）
function func1(): void {
    console.log('-------')
}
    • 声明一个 void 类型的变量没有什么作用，因为它只能为null或者undefined
    // 空类型void
let unusable1: void = null
let unusable2: void = undefined

（8）Never

  • never类型表示永不存在的值的类型

    • 例如，never 类型是那些总是会抛出异常、或者根本就不会有返回值的函数表达式、或者箭头函数表达式，的返回值类型

  • 使用 never 可以避免出现新增了联合类型没有对应的实现，目的就是写出类型绝对安全的代码

    // 返回never的函数必须存在无法达到的终点
function error(message: string): never {
  throw new Error(message)
}

function infiniteLoop(): never {
  while (true) {}
}

本人前端小菜鸡，如有不对请谅解

avatar
文章
阅读
粉丝