Henry Henry
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)

Henry

小学生中的前端大佬
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)
  • JavaScript

  • TypeScript

    • TS 简介
    • TS 开发环境搭建
    • TS 的类型声明
    • TS 类型简版
      • 字符
      • 字面量
      • any
      • unknown
      • any 和 unknown 的区别
      • object
      • array
      • tuple
      • 类型的别名
    • TS 编译选项
  • Vue

  • ElementUI

  • React

  • AntD

  • 前端
  • TypeScript
Henry
2021-05-31
目录

TS 类型简版

# 字符

  • ? 表示可有可无,定义对象时常用,表示某一属性可有可无
  • | 表示或,当一个变量有多个类型时用
  • & 表示且,当已经定义了几个类型,而这个变量是这几个类型的合集时用
let a = { name: string, 'age?': number } // 加引号是防止被格式化删除
a = { name: 'henry' }
a = { name: 'henry', age: 18 }
let b = string | number
b = 'henry'
b = 18
let c = { name: string } & { age: number }
c = { name: 'henry', age: 18 }
1
2
3
4
5
6
7
8

# 字面量

  1. 有点类似 const

    let a: 10
    a = 11 // 报错:Type '11' is not assignable to type '10'.
    
    1
    2
  2. 限制值的范围 (联合类型)

    当一个变量的取值在某些范围内时,可以使用字面量

    比如 1 | 2 | 3, male | female

    let b: 'male' | 'female'
    b = 'male'
    b = 'female'
    b = 'hello' // 报错:Type '"hello"' is not assignable to type '"male" | "female"'.
    
    1
    2
    3
    4

# any

any 类型的变量可以赋值给任意变量,不报错

let d
d = 1
d = '3'
d = true

let s: string
s = d
1
2
3
4
5
6
7

# unknown

unknown 实际上就是一个类型安全的 any , unknown 类型的变量

不能直接赋值给其它变量

let e: unknown
e = '3'

let s: string
s = e // Type 'unknown' is not assignable to type 'string'.
1
2
3
4
5

但可以通过类型断言赋值

s = e as string

// 或

s = <string>e
1
2
3
4
5

# any 和 unknown 的区别

任何类型都能分配给 unknown , 但 unknown 不能分配给其他基本类型,而 any 啥都能分配和被分配。

let foo: unknown

foo = true // ok
foo = 123 // ok

foo.toFixed(2) // error

let foo1: string = foo // error
1
2
3
4
5
6
7
8
let bar: any

bar = true // ok
bar = 123 // ok

foo.toFixed(2) // ok

let bar1: string = bar // ok
1
2
3
4
5
6
7
8

# object

一个对象限制除了有几个必需属性后,别的属性均不管

如定义一个人的对象,必需属性为 name 和 age, 再有别的属性也可以:

let people: { name: string; age: number; [propName: string]: any } // propName 也可以改成别的单词
people = { name: 'henry', age: 18, gender: 'male' }
people = { name: 'henry', gender: 'male' } // 报错
1
2
3

# array

数组的类型声明:

  1. 类型[]
  2. Array<类型>
let a1: number[]
let a2: string[]
let a3: Array<number>
let a4: Array<string>
let a5: (number | string)[]
let a6: Array<number | string>
1
2
3
4
5
6

# tuple

元祖,ts 新增类型,固定长度的数组

元祖的类型声明:[类型, 类型, 类型...]

数组数量必须与声明的相同,每个元素对应的类型都必须与声明的相同

# 类型的别名

当一个类型被多次使用时,可以给这个类型起一个别名

如:

let k: 1 | 2 | 3 | 4 | 5
let l: 1 | 2 | 3 | 4 | 5
1
2

可以改为:

type myType = 1 | 2 | 3 | 4 | 5
let k: myType
let l: myType
1
2
3
编辑 (opens new window)
#Ts
上次更新: 6/6/2023, 1:43:45 PM
TS 的类型声明
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
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式