## 为什么要用ts?
提供的 静态类型系统,大大增强代码的 可读性 以及 可维护性;
提供最新和不断发展的javascript特性,能让我们建立 更健壮的组件;
TS 具有 防患于未然的静态检查,以及干净利落的智能提示
## 有哪些概念?
一、类型系统❀
1、类型注解
const str: string = 'test';
function fn(num: number): number {
return num;
}
对应 JS 的原始类型,TS提供了如下几种原始类型:
number:包括浮点数,以及 NaN、±Infinity。
string:字符串型。
boolean:布尔型,即 { true, false }。
null:即 { null }。
undefined:即 { undefined }。
symbol:符号类型。
数组的类型注解比较特殊哦~ ts为数组提供了 专用的 类型语法,
let arr: string[]; // 定义了数组里每一项必须是string类型
arr = ['1', 'test', 'false']; // 没问题
arr = [1]; // Error
arr = [false]; // Error
2、接口
划重点啦,接口是ts的核心概念
它能 合并 众多类型声明 至 一个类型声明:
interface Name {
first: string,
second: string
}
let name: Name;
name = {first: 'li', second: 'si'} // 没问题
name = {first: 'jhon'} // Error: 'Second is missing'
name = {first: 'jhon', second: 1234} // Error: 'Second is the wrong type'
3、内联类型注解
let name: {
first: string,
second: string
}
name = {first: 'li', second: 'si'} // 没问题
name = {first: 'jhon'} // Error: 'Second is missing'
name = {first: 'jhon', second: 1234} // Error: 'Second is the wrong type'
但是如果同一个 内联类型注解 被多处用到, 考虑把它重构为一个接口 是更合适的哦
和 接口 的方式对比,内联类型注解 就是直接用,不需要为类型取名,省去取名的麻烦,
4、特殊类型
any、null、undefined、void
any:
任意类型,ts将类型检查关闭
let power: any;
// 赋值任意类型
power = '123';
power = 123;
// 它也兼容任何类型
let num: number;
power = num;
num = power;
null & undefined
在类型系统中,null和undefined字面量 能被赋值给 任意类型的变量
let num: number;
let str: string;
num = null;
str = undefined;
void:
表示 一个函数 没有返回值
function log(message: string): void {
console.log(message);
}
5、泛型
function test
(arr: T[]): T[] { return arr;
}
const temp = [1,2,3];
const result = test(temp); // 当传入temp时,test函数推断出 test是 number[]类型,因为入参类型和函数返回值类型是一样的,所以 函数返回值的类型也是确定的,改成其他的不行哦
console.log(result); // [1,2,3]
// 即,调用test的时候,你会获得 类型安全
result = ['1','2'] // Error
result[2] = 3 // ok
const temp2 = ['1', '2', '3'];
const result2 = test(temp2); // 这回推断出 test是string[]类型,so,result2也是
result2[0] = 1; // Error
result2[0] = '1'; // ok
6、联合类型
联合类型的含义:符合A 或 符合B
interface Bird { fly(); layEggs(); }
interface Fish { swim(); layEggs(); }
function getSmallPet(): Fish | Bird {
// ...
}
let pet = getSmallPet();
pet.layEggs(); // okay
pet.swim(); // errors
可以认为是多个类型的 并集
7、交叉类型
交叉类型的含义:符合类型A和B的交叉类型的值,就是又符合类型A,又符合类型B
type landAnimal = { // 陆地动物
name: string
canLiveOnLand: true
}
type waterAnimal = { // 水生动物
name: string
canLiveInWater: true
}
// 交叉类型:两栖动物
type amphibian = landAnimal & waterAnimal;
let toad: amphibian = { // 蟾蜍: 两栖动物
name: 'toad',
canLiveOnLand: true,
canLiveInWater: true,
}
类比前面的联合类型,交叉类型可以认为是 多个类型的 交集
8、元祖类型
javascript不支持元组,typescript支持,
元组类型就是为数组每一项定义类型,看一下下面的例子就可以理解什么是元组类型了
let arr: [string, number];
arr = ['test', 9]; // ok
arr = [9, 16]; // Error
这里有个特殊的使用场景,将其与typescript的解构一起食用:
let arr = [string, number];
nameNumber = ['jhon', 25];
const [name, age] = nameNumber;
9、类型别名
为某种类型(可以是自定义的类型)取别名,达到语义化作用 ,
type strOrNum = string | number; // 定义类型别名strOrNum,代表了一种数据类型,stirng和number符合条件
let val: strOrNum;
val = 123; // ok
val = 'test'; // ok
val = false; // Error
type Text = string | { text: string };
type Coordinates = [number, number]; // 语义化作用
type Callback = (data: string) => void;