前端技术分享
0%

【045】typescript：基础类型

发表于 更新于 分类于

基础类型：布尔类型，数字类型，字符串类型，数组类型，null，undefined，never类型，空值类型，任意类型，unknown类型

布尔类型（boolean）

表示逻辑值：true 和 false

1
2
3
4
5
6
7
// ts
let a: boolean = true
let b: boolean = false

// 编译成js后
var a = true;
var b = false;

数字类型（number）

数字类型支持 二进制 八进制 十进制 十六进制 NaN Infinity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ts
let num_2: number = 11111101000       // 二进制
let num_8: number = 3750              // 八进制
let num_10: number = 2024             // 十进制
let num_16: number = 7e8              // 十六进制
let num_NaN: number = NaN             // NaN
let num_Infinity: number = Infinity   // 无穷大

// 编译成js后
var num_2 = 11111101000;
var num_8 = 3750;
var num_10 = 2024;
var num_16 = 7e8;
var num_NaN = NaN;
var num_Infinity = Infinity;

字符串类型（string）

一个字符系列，使用单引号（’）或双引号（”）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。

1
2
3
4
5
6
7
8
9
// ts
let str_01: string = '我是字符串'
let str_02: string = `你好，${str_01}`
console.log(str_02)   // 你好，我是字符串

// 编译成js后
var str_01 = '我是字符串';
var str_02 = "\u4F60\u597D\uFF0C".concat(str_01);
console.log(str_02);

数组类型

声明变量为数组。

使用方法01，类型[]

1
2
3
4
5
6
7
8
// ts
let arr_01:number[] = [1, 2, 3]
let arr_02:string[] = ['a', 'b', 'c']
// let arr_03:boolean[] = [false, true, 1, 'a']  // 这样会报错，因为布尔类型数组中出现了数字和字符串，这是不允许的

// 编译成js后
var arr_01 = [1, 2, 3];
var arr_02 = ['a', 'b', 'c'];

使用方法02，数组<类型>

1
2
3
4
5
6
7
// ts
let arr_04: Array<number> = [1, 2, 3]
let arr_05: Array<string> = ['a', 'b', 'c']

// 编译成js后
var arr_04 = [1, 2, 3];
var arr_05 = ['a', 'b', 'c'];

使用方法03，多维数组，类型[][]

1
2
3
4
5
// ts
let arr_06: number[][] = [[1, 2], [3, 4]]

// 编译成js后
var arr_06 = [[1, 2], [3, 4]];

使用方法04，使用接口表示数组

1
2
3
4
5
6
7
8
9
// ts
interface interfaceArr {
  [key: number]: string
}
// 索引key的类型为数字类型时才可使用
let arr_07: interfaceArr = ['a', 'b', 'c']

// 编译成js后
var arr_07 = ['a', 'b', 'c'];

使用方法05，any数组

数组中的值可以是任意类型

1
2
3
4
5
// ts
let arr_08: any[] = [1, 'a', true, { b: '2', c: 3 }]

// 编译成js后
var arr_08 = [1, 'a', true, { b: '2', c: 3 }];

null类型

表示对象值缺失。

1
2
3
4
5
// ts
let null_01: null = null

// 编译成js后
var null_01 = null;

undefined类型

用于初始化变量为一个未定义的值

1
2
3
4
5
// ts
let undefined_01: undefined = undefined

// 编译成js后
var undefined_01 = undefined;

never类型

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

1
let never_01: number & string = 1     // let never_01: never

以上代码会报错，因为number和string是无法同时存的，所以never_01是never类型。

空值类型（void）

用于标识方法返回值的类型，表示该方法没有返回值

1
2
3
4
5
6
7
8
9
// ts
function voidFn(): void {
  console.log('我是空值函数')
}

// 编译成js后
function voidFn() {
  console.log('我是空值函数');
}

任意类型（any）

声明为 any 的变量可以赋予任意类型的值，没有强制限定哪种类型。

1
2
3
4
5
6
7
8
9
10
11
// ts
let any_01: any = 123
any_01 = 'abc'
any_01 = true
any_01 = [1, 2, 3]

// 编译成js后
var any_01 = 123;
any_01 = 'abc';
any_01 = true;
any_01 = [1, 2, 3];

注意：如果使用any就失去了ts类型检测的作用了，建议减少使用。

unknown类型

一种顶级类型，表示一个未知的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// ts
let unknown_01: unknown
unknown_01 = 1
unknown_01 = 'a'
unknown_01 = true
unknown_01 = [1, 'a', true]
unknown_01 = { a: 1, b: 'c' }
unknown_01 = null
unknown_01 = undefined
unknown_01 = Symbol('type')

// 编译成js后
var unknown_01;
unknown_01 = 1;
unknown_01 = 'a';
unknown_01 = true;
unknown_01 = [1, 'a', true];
unknown_01 = { a: 1, b: 'c' };
unknown_01 = null;
unknown_01 = undefined;
unknown_01 = Symbol('type');

any类型 和 unknown类型 的区别

  1. unknow类型比any类型更严格，更安全。
  2. any类型表示任意类型，没有ts类型检查。unkonw类型是暂时未知类型，有ts类型检查。
  3. any是最宽的类型。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // any，可以正常调用属性和方法，哪怕是未知的属性和方法也可以调用
    let any_02: any = { a: 1, b: (): number => 2 }
    any_02.a
    any_02.b()
    any_02.e
    any_02.f()

    // unknown，无法调用属性和方法
    let unknown_02: unknown = { c: 3, d: (): number => 4 }
    unknown_02.c
    unknown_02.d()

    // any是最宽的类型
    type any_03 = unknown & any  // any