javascript 前端 vue.js 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 = (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 = (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 (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 (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);

参考文章