一、接口

1、接口初探

接口定义的字段，传的参数必须有且符合规定。(也就是说接口定义了几个字段，就必须要传几个)
看个几个🌰

传的参数不够

interface config {
    label: string;
    size: number;
}
 
function printLabel(labelledObj: config) {
    console.log(labelledObj.label);
  }
  
printLabel({label: '你好'});//错误，传的参数不够

传了一些不相干的字段

interface config {
    label: string;
    size: number;
}
 
function printLabel(labelledObj: config) {
    console.log(labelledObj.label);
  }
  
//报错类型“{ label: string; size: number; other: string; }”的参数不能赋给类型“config”的//参数。
//对象文字可以只指定已知属性，并且“other”不在类型“config”中。
printLabel({ label: '你好', size: 12, other: '12' });

接口定义了几个，传几个

interface config {
    label: string;
}
 
function printLabel(labelledObj: { label: string }) {
    console.log(labelledObj.label);
    console.log(labelledObj.size);//此处报错。类型“{ label: string; }”上不存在属性“size”。
  }
  
let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);//无报错

2、可选属性

接口里的属性不全都是必须的，只是在某些条件下存在，或者根本不存在。
可以对可能存在的属性进行预定义。

interface Props {
  id:number;
  msg?:string  // 只是在可选属性名字定义加一个？符号
}

3、只读属性

一些对象的属性只能在对象刚刚创建的时候修改其值，可以在属性名前使用“readonly”

interface Point {
  readonly x: number
  readonly y: number
}
//赋值
let p1:Point={x:10,y:20}

TS 具有ReadonlyArray<T>类型，与Array<T>类似，把所有可变的方法都去掉了，确保数组创建后不能修改

let a: number[] = [1, 2, 3, 4]
let ro: ReadonlyArray<number> = a
ro[0] = 12 // error!
ro.push(5) // error!
ro.length = 100 // error!
a = ro // error!

4、任意属性

有时候还会出现一种情况，除了必选和可选的属性之外，还允许有其他的任意属性，这时候就可以使用索引签名的形式来满足上述要求。

interface Person {
  name: string;
  age?: number;
  [propName: string]: any;
}

const p1 = { name: "semlinker" };
const p2 = { name: "lolo", age: 5 };
const p3 = { name: "kakuqo", sex: 1 }

二、泛型

是指在定义函数、接口或者类的时候，不预先指定其类型，而是在使用是手动指定其类型的一种特性。先看几个🌰

function identity(arg: any): any {
  return arg
}

identity(3) // 3

此时就会出现一个问题，没有办法控制传入的类型与返回的类型。
这时，我们可以使用泛型来解决问题

// <T>,T表示任意输入的类型，后面的T，即表示输出的类型，且与输入保持一致。
function identity<T>(arg: T): T {
  return arg
}

identity(3) // 3

1、使用泛型变量

function identity<T>(arg: T): T {
  console.log(arg.lenght) // err ,
  return arg
}

此时可以这样调整

function identity<T>(arg: T[]): T []{
  console.log(arg.lenght) // err ,
  return arg
}
// 
function identity<T>(arg:Array<T>):Array<T>{
  console.log(arg.lenght) // err ,
  return arg
}

2、泛型参数的默认类型

function identity<T=string>(length:number,value:T): Array<T>{
  let result:T[]=[]
  for(let i =0; i< lenght ; i++){
  	reasult[i]=value
  }
  return result
}

3、泛型约束

function loggingIdentity<T>(arg: T): T {
  console.log(arg.length)   // err 
  return arg
}
//

TypeScript入门笔记