## 为什么要用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<T> (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;
网友评论