TypeScript类型声明语法及number、string、boolean等基本类型介绍

前言

这是TypeScript学习笔记的第一部分，主要涵盖类型声明以及基本类型的概念。

一、类型声明

类型声明
- 类型声明是TypeScript中至关重要的特性。
- 通过类型声明，可以明确指定变量、参数或形参的具体类型。
- 一旦指定了类型，TS编译器会在赋值时自动校验值是否符合声明，若符合则赋值，否则报错。
- 简而言之，类型声明为变量设定了类型约束，使其只能存储特定类型的值。
- 语法如下：

let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{
    ...
}

自动类型判断
- TS具备自动类型推断机制。
- 当变量声明与赋值同时进行时，TS编译器会自动推断变量的类型。
- 因此，在声明与赋值同时进行时，可以省略显式的类型声明。

//先声明类型再赋值
let a: string;
a = 'Hello';
//声明类型并赋值
let b: number = 123;
//声明变量和赋值同时进行
let c = false; 
c = true; //编译器自动判断变量c为boolean

二、类型

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

1.number

let a: number;
a = 10;
a = 33;
//a = 'hello'; 变量a的类型是number, 不能赋值字符串

2.string

let b: string;
b = 'hello';
//b = 123; 变量b的类型是字符串, 不能赋值number

3.boolean

let c: boolean;
c = true;

4.字面量

let d: 10; // 此时d只能等于10
//let d = 11; 则会报错，限制了该变量就是字面量的值（有点类似常量）

5.联合类型

let A: boolean | string; // 变量A既可以是布尔类型也可以是字符串类型
A = true;
A = "Hello";
A = false;
A = "World";
// 字面量的联合类型限制变量B只能是"male"或"female"
let B: "male" | "female";
B = "male";
B = "female";
// B = "trans" 错误

6.any

任意类型，相当于关闭了TS对类型的限制（建议尽量避免使用）。

let a: any;
a = true;
a = "hi";
a = 123;
// 如果声明变量不指定类型，则TS解析器会自动判断变量的类型为any
let b;
b = true;
b = "hi";
b = 123;

注意，any类型的变量可以赋值给任意其他变量，这容易引发潜在问题。

// any 任意类型，相当于关闭了ts对类型的限制(尽量不要用)
let B: any;
B = 10;
B = 'string';
B = true;
let S: string;
S = B; // any类型可以赋值给任意类型变量，容易出现问题。

7.unknown

这是类型安全的any，不能直接赋值给其他变量。

let a: unknown;
a = 10;
a = "string";
a = true;
let b: string;
// b = a; 赋值时编译器会报错，不能将“unknown”类型分配给“string”。

如果必须赋值，需在赋值前进行类型判断或使用类型断言。

let a: unknown;
a = 10;
a = true;
a = "string";
let b: string;
/*
*  断言：
*    1. 变量 as 类型
*    2. <类型> 变量
*/
b = a as string;
b = <string> a;
/*
*  赋值前类型判断
*/
if (typeof c === 'string'){
    b = a;
}

8.void

表示没有返回值，即返回空值或undefined。

function foo(): void {
}
console.log(typeof foo()); // => undefined
function foo1(): void{
    return undefined;
}
function foo3(){
    // 不写void默认为void
}
// 写了返回值不写返回值类型 => 自动判断返回值类型
function foo4(){
    return 1;
}
console.log(typeof foo4()); // => number

9.never

表示没有值，不能是任何值（连undefined都不包含）。

function foo(): never{
    throw new Error('raise');
}

10.object

let o: {name: string, age: number};
o = {
    name: "Edison",
    age: 25
}
// 定义可选参数
// [propName: string]: any 任意类型的属性
let a: {name: string, [propName: string]: any};
b = {
    name: 'Edison',
    age: 24,
    gender: "female"
}
// 定义函数结构
let foo: (a: number, b: number) => number;
foo = function (n1, n2) {
    return n1 + n2;
}

11.array

/*
*  元组： 长度和类型还有顺序必须与储存元素一一对应
*    [类型，类型]
*/
let a = [string, number];
a = ["hello", 123];
//以下报错
a = [123, "hello"];
a = [123];
a = ["hello"];
a = ["hello", 123, 456];

12.tuple

/*
*  元组： 长度和类型还有顺序必须与储存元素一一对应
*    [类型，类型]
*/
let a = [string, number];
a = ["hello", 123];
//以下报错
a = [123, "hello"];
a = [123];
a = ["hello"];
a = ["hello", 123, 456];

13.枚举enum

enum Gender {
    Male = 0,
    Female = 1
}
let person: {name: string, gender: Gender};
person = {
    name: "Edison",
    gender: Gender.Male
}

14.其他

// & 同时满足
let i: {name: string} & {age: number} & {gender: Gender};
i = person;
// i = b; Error 
// 类型别名
type myType = typeof i;
let person1: myType;
let person2: myType;

总结

本文到此结束，希望对你有所帮助，欢迎继续关注本站更多内容！

TypeScript类型声明与基础类型详解

前言