技术

TS 常用基础类型

2022年11月7日 作者 张舫

可以将 TS 中的常用基础类型细分为两类：1 JS 已有类型 2 TS 新增类型

  1. JS 已有类型
  • 原始类型：number/string/boolean/null/undefined/symbol
  • 对象类型：object（包括，数组、对象、函数等对象）
  1. TS 新增类型
  • 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any 等
  • 注意：
    1. 原始类型在 TS 和 JS 中写法一致
    2. 对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法

 

原始类型

  • 原始类型：number/string/boolean/null/undefined/symbol
  • 特点：简单，这些类型，完全按照 JS 中类型的名称来书写

1
2
3
4
5
6
let num        : number    = 11                       //常用
let str        : string    = "aaaaaaa"                //常用
let isDog      : boolean   = false                    //常用
let isNull     : null      = null                     //不常用
let isSymbol   : symbol    = Symbol('aa')             //不常用
let isUndefined: undefined = undefined                //不常用

数组类型

1
2
let numbers: number[] = [1, 2, 3, 4]
let strings: string[] = ['123', '123', '123']

联合类型

1
let arr :(string|number)[] =  [1, '123', '123', 1123]

类型别名

1
2
type zfArr = (string | number)[]
let arr0: zfArr = [1, '123', '123', 1123]

函数类型

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/**
* 函数参数定义类型
*/
function test0(num: number, str: string) {
  console.log(num)
  console.log(str)
}
 
const test1 = (num: number, str: string) => {
  console.log(num)
  console.log(str)
}
 
//设置了返回类型
const test2 = (num0: number, num1: number): number => {
  return num0 + num1
}
 
//设置了返回类型
function test3(num0: number, num1: number): number {
  return num0 + num1
}
 
//不知道返回什么类型就写void
const test5 = (num0: number, num1: number): void => {
  console.log(num0)
}
 
//如果没有写返回类型的变量默认就是 void
const test6 = (num0: number, num1: number) => {
  console.log(num0)
}
 
//如果后面指定了 undefined 必须返回 undefined
const test7 = (): undefined => {
  return undefined
}
 
//可选参数传参
const test8 = (start?: number, end?: number): void => {
  console.log('起始索引：', start, '结束索引：', end)
}
 
//通过类型别名的方式设置了方法参数的类型和返回类型
type testFn = (num0: number, num1: number) => number
const test4: testFn = (num0, num1) => {
  return num0 + num1
}

对象类型

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
27
/**
* 对象类型
*/
let people: {} = {}      //空对象
 
type xmType = {
  age: number,
  name: string,
  sex: string,
  writeCode(num?: number, str?: string): string,
  greet: (name: string) => void
  hobby?:string         //可以不传递
  like:string|number    //可以是 字符串 或者 数字
}
let xm: xmType = {
  age: 18,
  name: '张三',
  sex: '男',
  writeCode: () => {
    return 'string'
  },
  greet: function (name = '张三') {
    return '你好张三'
  },
  like: 88
}
console.log(xm)

Interface类型

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
* 接口
* 当一个对象类型被多次使用时，一般会使用接口（interface）来描述对象的类型，达到复用的目的
* 推荐以 I 开头
* 声明接口后，直接使用接口名称作为变量的类型
*
* interface vs type
*   interface（接口）和 type（类型别名）的对比：
*   相同点：都可以给对象指定类型
*   不同点:
*     接口，只能为对象指定类型, interface 可以继承
*     类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名
*   推荐：能使用 type 就是用 type
*/
interface IXm {
  name: string
  age: number,
  greet(): void
}
 
const xm0: IXm = {
  name: 'aaa',
  age: 18,
  greet() {
    return 111
  }
}
 
interface IPoint2D {
  x: number,
  y: number
}
 
/**
* interface 继承
*/
interface IPoint3D extends IPoint2D {
  z: number
}
 
const point3d: IPoint3D = {
  x: 11,
  y: 22,
  z: 44
}

元组

1
2
3
4
5
6
7
/**
* 元组
* 元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型
*/
 
let position: [number, number] = [39.5427, 5427]                           //定义坐标点
let custom: [number | string, number | string] = [39.5427, '你好元组']      //定义坐标点

自定义类型

1
2
3
4
5
6
7
8
9
10
11
12
/**
* 自定义类型
*/
type Direction = 'up' | 'down' | 'left' | 'right'
 
//修改方向的方法
function changeDirection(direction: Direction) {
  console.log(direction)
}
 
//调用函数时，会有类型提示： 只能输入 up down left right
changeDirection('up')

枚举类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 【了解】枚举类型
*  字符串 和 数字混合的枚举
*/
enum Direction0 {
  Up = 0, Down = 1, Left = 2, Right = 'Right'
}
 
// 使用枚举类型
function changeDirection0(direction: Direction0) {
  console.log(direction)
}
 
changeDirection0(Direction0.Left)

any类型

1
2
3
4
5
6
7
/**
* any 类型
* 原则:不推荐使用 any!这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
* 因为当值的类型为 any 时，可以对该值进行任意操作，并且不会有代码提示
* 开发过程中少用any
*/
let obj: any = 1111

TS 中 typeof的使用

1
2
3
4
5
6
7
8
9
10
11
let p = { x: 1, y: 2 }
 
function formatPoint(point: { x: number, y: number }) {
  console.log(point)
}
//使用了typeof 代替了传统指定类型的写法
function formatPoint(point: typeof p) {
  console.log(point)
}
 
formatPoint(p)

类型推论

1
2
3
4
5
6
7
// 变量 age 的类型被自动推断为：number
let age = 18
 
// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
  return num1 + num2
}

 

关于作者

好好学习天天向上

发表评论

邮箱地址不会被公开。 必填项已用*标注