前言
一、类型声明
二、类型
1.number
2.string
3.boolean
4.字面量
5.联合类型
6.any
7.unknown
8.void
9.never
10.object
11.array
12.tuple
13.枚举enum
14.其他
总结
前言TypeScript学习笔记第一部分，关于TS的类型声明以及基本类型。
一、类型声明类型声明类型声明是TS非常重要的一个特点
通过类型声明可以指定TS中变量（参数、形参）的类型
指定类型后，当为变量赋值时，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中新增类型 |
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;
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注易知道(ezd.cc)的更多内容!
