Typescript学习：联合类型、交叉类型、映射类型、箭头函数ts写法

基本类型

 const a: number = 1;
 console.log('a', a); // 1
 const b: string = 'Hello';
 console.log('b', b);// Hello
 const c: boolean = true;
 console.log('c', c); // true

联合类型

type NumOrStr = number | string;

场景： 一个函数的参数变量支持传入单个数据和多条数据，我们可以通过联合类型来支持这样场景

 let a : number | string = 0;
 console.log('a-1', a);// 0
 
 a = 'hello';
 console.log('a-2', a);// hello

箭头函数写泛型

const getValue = <T, > (value:T):T => value;

const b = getValue('hello');
console.log('b', b);
  
const b1 = getValue(5);
console.log('b1', b1);

interface Props {
  name?: string;
  age?: number;
}
const getValue = <T extends Props>(value: T): T => value;

const a = getValue({ name: 'HYU' });
const a1 = getValue({ name: 'HYU', age: 18 });
const a2 = getValue({ age: 20 });
console.log('a', a); // {name: 'HYU'}
console.log('a1', a1); // {name: 'HYU', age: 18}
console.log('a2', a2); // {age: 20}

普通函数写泛型

interface Props {
  name?: string;
  age?: number;
}
function getValue<T extends Props> (value: T) {
  return value;
}
const a = getValue({ name: 'HYU' });
const a1 = getValue({ name: 'HYU', age: 18 });
const a2 = getValue({ age: 20 });
console.log('a', a); // {name: 'HYU'}
console.log('a1', a1); // {name: 'HYU', age: 18}
console.log('a2', a2); // {age: 20}

function getValue<T> (value: T):T {
  return value;
}
const a = getValue({ name: 'HYU' });
const a1 = getValue({ name: 'HYU', age: 18 });
const a2 = getValue({ age: 20 });
console.log('a', a); // {name: 'HYU'}
console.log('a1', a1); // {name: 'HYU', age: 18}
console.log('a2', a2); // {age: 20}

泛型变量可以是任意字母，常见的泛型变量定义有：

• T（Type）代表任意事物的类型；
• K（Key）表示对象中键的类型；
• V（Value）表示对象中值的类型；
• E（Element）表示元素类型；

交叉类型

通过交叉运算符 & 对多个类型进行交叉合并，新类型拥有所有类型的成员。

  interface Point {
    name: string;
    width: number;
    height: number;
    c: number;
  }
  interface Surface {
    size: number
    c: string;
  }

Point & Surface =>

  {
    name: string;
    width: number;
    height: number;
    size: number;
    c: never;
  }

  const a : (Point & Surface) = {
    name: 'THIS',
    width: 200,
    height: 100,
    size: 2000,
    c: [1, 3, 4]
  };
  console.log('a', a);
  

any 类型 和 unknown 类型

• any 类型，这和没有引入 TS，纯 JS 使用体验没有差别；你可以将任意类型值赋给 any 类型的变量，并对该变量进行任何操作。
• unknown 类型，你可以把任意类型值赋给 unknown 类型的变量，但在使用这个变量时必须进行类型检查或类型断言。

映射类型

type Keys = 'name';
type Sizes = 'width' | 'height'
type Point = {
  [k in Keys]: string
} & {
    [k in Sizes]: number
  } & { size: number }

const a: Point = {
  name: 'THIS',
  width: 200,
  height: 100,
  size: 2000,
};
console.log('a', a);