Henry
Henry
2023-05-23
目录

TS 的类型声明

# TypeScript 中的基本类型

TypeScript 中的基本类型：

  • 类型声明

    • 类型声明是 TS 非常重要的一个特点；

    • 通过类型声明可以指定 TS 中变量（参数、形参）的类型；

    • 指定类型后，当为变量赋值时，TS 编译器会自动检查值是否符合类型声明，符合则赋值，否则报错；

    • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值；

    • 语法：

      • let 变量：类型;

let 变量：类型 = 值;

function fn(参数：类型，参数：类型): 类型{
    ...
}
        1
        2
        3
        4
        5
        6
        7

  • 自动类型判断

    • TS 拥有自动的类型判断机制
    • 当对变量的声明和赋值是同时进行的，TS 编译器会自动判断变量的类型
    • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

  • 类型：

    类型 例子 描述
    number 1, -33, 2.5 任意数字
    string 'hi', "hi", `hi` 任意字符串
    boolean true、false 布尔值 true 或 false
    字面量 其本身 限制变量的值就是该字面量的值
    any * 任意类型
    unknown * 类型安全的 any
    void 空值（undefined） 没有值（或 undefined）
    never 没有值 不能是任何值
    object {name:'孙悟空'} 任意的 JS 对象
    array [1,2,3] 任意 JS 数组
    tuple [4,5] 元素，TS 新增类型，固定长度数组
    enum enum{A, B} 枚举，TS 中新增类型

  • number

    • let decimal: number = 6
let hex: number = 0xf00d
let binary: number = 0b1010
let octal: number = 0o744
let big: bigint = 100n

// 声明一个变量 a，同时指定他的类型为 number
let a: number

// a 的类型为 number，在以后的使用过程中，a 的值只能是 number
a = 1
a = 2
a = 3

// a = '1' // Type 'string' is not assignable to type 'number'.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15

  • string

    • let color: string = 'blue'
color = 'red'

let fullName: string = `Bob Bobbington`
let age: number = 37
let sentence: string = `Hello, my name is ${fullName}.

I'll be ${age + 1} years old next month.`

// 声明一个变量 b，同时指定他的类型为 string
let b: string

b = '1'
b = '2'
b = '3'

// b = 1 // Type 'number' is not assignable to type 'string'.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17

  • boolean

    • let isDone: boolean = false

// 声明一个变量 c，同时指定他的类型为 boolean，默认值为 true
// let c: boolean = true

// 如果变量的声明和赋值是同时进行的，TS 可以自动对变量进行类型检测
let c = true

c = false

// c = 1 // Type 'number' is not assignable to type 'boolean'.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11

  • function

    • // js 中的函数是不考虑参数的类型和个数的
// function sum(a, b) {
//   return a + b
// }

// console.log(sum(123, 456)) // 579
// console.log(sum(123, '456')) // 123456;

function sum(a: number, b: number): number {
  return a + b
}

console.log(sum(123, 456)) // 579
// console.log(sum(123, '456')) // Argument of type 'string' is not assignable to parameter of type 'number'.
// console.log(sum(123, 456, 789)); // Expected 2 arguments, but got 3.
// console.log(sum(123)); // Expected 2 arguments, but got 1.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16

  • 字面量

    • 也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围

    • // 使用字面了进行类型声明
let a: 10
a = 10
// a = 11 // Type '11' is not assignable to type '10'
      1
      2
      3
      4

  • |

    • // 可以使用 | 来连接多个类型（联合类型）
let b: 'male' | 'female'
b = 'male'
b = 'female'

let c: boolean | number
c = true
c = 123

let color: 'red' | 'blue' | 'black'
let num: 1 | 2 | 3 | 4 | 5
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11

  • any

    • // any 表示任意类型，设置 any 后，相当于关闭了 TS 的类型检查
// let d: any
// 声明变量如果不指定类型，TS 解析器会自动推断为 any 类型，叫做隐式 any
let d
d = 123
d = '123'
d = true
      1
      2
      3
      4
      5
      6
      7

  • unknown

    • // unknown 表示未知类型，可以使用 unknown 声明
let e: unknown
e = 123
e = true
e = '123'

let f: unknown

let s: string
// d 的类型是 any，它可以赋值给任意类型而不报错，无形中会改变别的变量的类型
s = d

// unknown 实际上就是一个类型安全的 any
// unknown 类型的变量，只能赋值给 any 及 unknown 类型的变量，而不能赋值给其他类型
d = e
f = e
// 上面虽然给 e 赋值为 string，但赋值给 s 仍然报错
// s = e // Type 'unknown' is not assignable to type 'string'.
// 但我们可以使用下面两种方式将 unknown 赋值给 string，前提是 unknown 类型的变量是 string
// 方式一：类型断言
s = e as string
s = <string>e
// 方式二：类型判断
if (typeof e === 'string') {
  s = e
}
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26

  • void

    • // void 表示没有任何返回值的函数
function sum(a: number, b: number): void {
  console.log(a + b)
  // return a + b // Type 'number' is not assignable to type 'void'
  // return null // Type 'null' is not assignable to type 'void'
  // return undefined // 可以
  // return // 可以
  // 没有 return // 可以
}

let unusable: void = undefined
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11

  • never

    • // never 表示永远不会返回
function error(message: string): never {
  throw new Error(message)
}

function neverError(message: string): never {
  while (true) {}
}
      1
      2
      3
      4
      5
      6
      7
      8

  • object（没啥用）

    • let a: object
a = {}
a = []
a = function () {}
// a = null // Type 'null' is not assignable to type 'object'
      1
      2
      3
      4
      5

  • {}

    • // {} 用来指定对象中包含哪些属性及其类型
// 语法：{属性名：属性类型; 属性名：属性类型; ...}
// 在属性名后面加上？，表示可选属性
let b: { name: string; age?: number }
b = { name: 'henry' }

// [propName: string]: any 表示任意类型的属性
let c: { name: string; age?: number; [propName: string]: any }
c = { name: 'henry', age: 18 }
c = { name: 'henry', age: 18, sex: 'male' }
// c = { age: 18, sex: 'male' } // Property 'name' is missing in type '{ age: number; sex: string; }' but required in type '{ [propName: string]: any; name: string; age?: number | undefined; }'

// 函数结构的类型声明
// 语法：(行参：类型，行参：类型，...) => 返回值
let d: (a: number, b: number) => number
d = function (a: number, b: number): number {
  return a + b
}
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18

  • array

    • // string[] 表示一个字符串数组
let e: string[]
e = ['henry', 'haha', 'hehe']

// number[] 表示一个数字数组
let f: number[]
f = [1, 2, 3]

// Array<类型> 表示一个数组
let g: Array<number>
g = [1, 2, 3]

// any[] 表示任意类型的数组
let h: any[]
h = [1, 'henry', true]
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15

  • tuple

    • // 元祖类型，固定长度的数组
let i: [string, number]
i = ['henry', 18]
      1
      2
      3

  • enum

    • enum Color {
  Red,
  Green,
  Blue
}
let c: Color = Color.Green

enum Color {
  Red = 1,
  Green,
  Blue
}
let c: Color = Color.Green

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4
}
let c: Color = Color.Green
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

  • &

    • // & 表示两个或者多个类型的集合
let m: { name: string } & { age: number }
m = { name: 'henry', age: 18 }
      1
      2
      3

  • 类型别名

    • // 类型别名
type Name = string
let n: Name
type MyType = 1 | 2 | 3 | 4 | 5
let o: MyType
o = 4
      1
      2
      3
      4
      5
      6

  • 类型断言

    • 有些情况下，变量的类型对于我们来说是很明确，但是 TS 编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：

      • 第一种

        • let someValue: unknown = 'this is a string'
let strLength: number = (someValue as string).length
          1
          2

      • 第二种

        • let someValue: unknown = 'this is a string'
let strLength: number = (<string>someValue).length
          1
          2
编辑 (opens new window)
#TS
上次更新: 5/27/2023, 1:02:05 PM
TS 开发环境搭建
TS 类型简版

← TS 类型简版→

最近更新
01
version 1.15
07-01
02
version 1.14
06-27
03
version 1.13
06-27
更多文章>
Theme by Vdoing | Copyright © 2017-2023 HenryTSZ | MIT License