TypeScript 学习笔记

对象类型别名：type | interface

使用

// types/use.ts
type Person = {
	name: string,
	age: number
}

interface Person1 {
	name: string,
	age: number
}

拓展

• type 拓展-&操作符拓展

// types/use.ts 类型别名定义
type Person = {
  name: string
}

type Person2 = Person & {
  age: number
}

// 使用
const p1: Person2 = {
  name: '张三',
  age: 26
}
console.log(p1)

• interface 拓展-extends 继承拓展

interface Person3  {
  name: string
}

interface Person4 extends Person3 {
  age: number
} 

const p2: Person4 = {
  name: '张三',
  age: 26
}
console.log(p2)

• interface 拓展-重名拓展

interface Person5  {
  name: string
}

interface Person5 {
  age: number
} 

const p3: Person5 = {
  name: '张三',
  age: 26
}
console.log(p3)

泛型函数-如何编写优秀的通用函数类型

• 尽量使用类型参数本身Type,可不是对其进行约束
• 尽量少的使用类型参数，可不是额外定义类型参数
• 如果一个类型参数在函数中只使用一次，考虑是否真的需要

尽量使用类型参数本身Type,可不是对其进行约束

// bad
function fn2<Type extends any[]>(arr: Type){
	return arr[0]
}

// good
function fn1<Type>(arr: Type[]) {
	return arr[0]
}

fn1([1,2,3]) // 1, number类型，推断函数返回的是Type 类型
fn2([1,2,3]) // 1， any, 推断函数返回的是any 类型

尽量少的使用类型参数，可不是额外定义类型参数

// bad
function filter2<Type, Func extends (item: Type) => boolead>(arr: Type[], func: Func) {
	return arr.filter(func)
}

// good
function filter1<Type>(arr: Type[], func: (item: Type) => boolean) {
	return arr.filter(func)
}

filter1 是对参数func使用Type直接定义类型，而filter2是额外定义Func变量参数，只会增加函数的可读性，没有其他作用，不必添加额外的变量参数

如果一个类型参数在函数中只使用一次，考虑是否真的需要

// bad
function fn3<Str extends string>(str: Str) {
	console.log(str)// Str 可以不定义
}

// good
function fn3(str: string) {
	console.log(str)
}

函数重载

函数重载：重载签名实现以不同的方式调用的函数。通常定义两个以上的函数签名，然后是编写函数的主体。

 // 重载函数
function makeDate(timestamp: number): Date
// 重载函数
function makeDate(m: number, d: number, y: number): Date 
// 函数实现
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
	if（d && y）{
		return new Date(y, mOrTimestamp, d)
	} else {
		return new Date(mOrTimestamp)	
	}
}

以上实现函数1个参数和3个参数的两种调用方式