TypeScript 用到最多的基础知识

1、接口 interface

1.1、什么是接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现， 然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法;

1.2、接口的作用

1、TypeScript的核心原则之一是对值所具有的结构进行类型检查。 在TypeScript里，接口的作用就是为 这些类型命名和为你的代码或第三方代码进行定义。

2、接口是一种规范或约束，通常使用接口（Interfaces）来定义对象的类型；

//接口是一种规范，通常用于定义对象的类型
//1、定义一个IPerson接口
interface IPerson{
name:string,
age:number
}
//2、定义一个tom变量，它的类型是IPerson类型的
//约束tom的形状必须和IPerson的一致
let tom:IPerson = {
name:'Tom',
age:18
}
//3、定义的属性比接口多一些属性，或少一些属性是不允许的
let cat : IPerson = {
name:'Cat',
}
//Property 'age' is missing in type '{ name: string; }' but required in type
'IPerson'
//4、可选属性 ？ 表示该属性不是必须的，可有可无
interface IPerson{
name:string,
age?:number
}

1.3、类型别名 type

类型别名用来给一个类型起个新名字。 类型别名type和接口interface都可以描述一个对象或函数；不同点 是类型别名type还可以声明基本类型别名，联合类型，元组等类型。

一般来说，如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果 不能就用 type。

type User = {
name:string,
age:number
}
//定义User类型的变量toms
let toms:User = {
name:'Toms',
age:20,
}
console.log(toms.name)
console.log(toms.age)

2、typeof 和 keyof 的使用

2.1、typeof

在 TypeScript 中， typeof 操作符可以用来获取一个变量或对象的类型

type User = {
name:string,
age:number
}
let toms:User = {
name:'Toms',
age:20,
}
console.log(toms.name)
console.log(toms.age)
//typeof使用
//通过typeof获取变量toms的类型，赋值给Toms
type Toms = typeof toms;
//使用Toms
let tm : Toms = {
name:'Tm',
age:18
}
//获取对象类型
const infos = {
name:'张三',
age:18,
adress:{
city:'北京'
}
}
type infoType = typeof infos

2.2、keyof

TypeScript 通过 keyof 操作符提取其属性的名称

interface IkeyOf{
  name:string,
  age:number
}
// key1 通过 keyof 获取到 IkeyOf 的属性 name 和 age
type key1 = keyof IkeyOf;

type keyOfper = {
  name:string,
  age:number
}
// key2 通过 keyof 获取到 keyOfper 的属性 name 和 age
type key2 = keyof keyOfper

const user ={
  name:"",
  sex:''
}
// 不能直接获取 const 的对象
type key3 = keyof user
// 应该是这样
type key3 = keyof typeof user

3、泛型和泛型约束

3.1、泛型

1、什么是泛型： 我们可以理解为泛型就是在编译期间不确定方法的类型(广泛之意思)，在方法调用时，由程 序员指定泛型具体指向什么类型；

2、泛型作用： 通常解决类，接口，方法的复用性，以及对非特定数据类型的支持

//这里编译期间不确定 getMsg 就先定义一个范型 T
function getMsg<T>(msg:T):T{
return msg;
}
let msg = getMsg<string>('这里确定了是 string 类型');
console.log(msg)


//定义一个对象
const userInfo = {
name:'张三',
age:18
}
//获取userInfo对象里面属性的值
//'string' can't be used to index type '{}'.
// function getVal(obj:object,name:string){
// return obj[name]
// }
function getVal(obj:any,name:string){
return obj[name]
}
const name = getVal(userInfo,'name')
console.log(name)
const age = getVal(userInfo,'age')
console.log(age)


//泛型约束
//上面也可以获取数据，但是获取到的值也变为 any了
// 通过 K extends keyof T 确保参数 key 一定是对象中含有的键
function getProperty<T,K extends keyof T>(obj:T,key:K){
return obj[key]
}
// 这里继续用上面的 userInfo 为例子
const names = getProperty(userInfo ,"name") // 这里就会有提示，只有 name 和 age 可以填写

3.2、泛型条件

T 如果属于 U 类型的，就输出 X 否则输出 Y  注：这里extends 不是继承的意思

T extends U? X: Y

//
type Fas<T> = T extends {name: infer Test} ? Test : unknown;
type FasTest = Fas<{name:string}> // 可以获取到 name
type FasTest1 = Fas<{age:number}> // 获取不到任何东西，输出 unknown，结果如下图

4、模板字符串

type world = "World";
type show = `Hello ${world}`;

5、交叉类型 &

1、交叉类型:把几个类型的成员合并，形成一个拥有这几个类型所有成员的新类型，可以理解为合并

2、注意：交叉类型不是取交集，是取并

3、基本类型是不会存在交叉的,一个类型不会既是string又是number类型

// 1、交叉类型:把几个类型的成员合并，形成一个拥有这几个类型所有成员的新类型，可以理解为合并
type t1 = string & number;
// 下面 以 user 为例 把Iname 和 Iage 合并，形成了一个新的类型 user，然后使用这个新类型
interface Iname{
name:string
}
interface Iage{
age:number
}
type users = Iname & Iage;
type ss = keyof users  // 可以看到 ss 获取了 users 的类型的属性
// 使用合并后的 users 类型
let d:users = {
name:'张三',
age:18
}


//比较常见的一个案例：列表分页及查询
interface IPage{
pageSize:number;
currentPage:number;
}
interface IParms {
searchKey:string;
}
type Tparms = IPage & IParms;
let parms:Tparms = {
pageSize:10,
currentPage:1,
searchKey:''
}

6、联合类型 |

联合类型: 表示取值可以为多种类型中的一种

function add(parm1:string | number,parm2:string | number){
if(typeof parm1 === 'string' || typeof parm2 === 'string'){
return `${parm1}${parm2}`
}
return parm1 + parm2
}
// 很简单的例子，是 string 就输出链接结果。是数字就输出相加结果
let adds = add('Hello','World');
console.log(adds)
let adds1 = add(1,1)
console.log(adds1)

7、Omit使用

Omit<K,T> : 用于从指定类型中，排除指定的属性，返回一个新的类型

K：是对象类型名称，T：是剔除K类型中的属性名称

// Omit<K,T> ： 用于从指定类型中，排除指定的属性，返回一个新的类型
//K：是对象类型名称，T：是剔除K类型中的属性名称
type OmitUser = {
name:string;
age:number;
sex:string;
}
type NewOmitUser = Omit<OmitUser,'sex'>
//等价于
type OmitUser1 = {
name:string;
age:number;
}

8、Pick使用

Pick : 从一个类型中，取出几个想要的属性

//Pick使用: 从一个类型中取出想要的属性
interface IUser{
name:string,
age:number
sex：string
}
选择 IUser中的 age
type IUser= Pick<ITest,'age'>;