【金秋打卡】第3天 NestJS入门到实战

课程名称：NestJS 入门到实战 前端必学服务端新趋势
章节名称：第5章
讲师姓名：Brian

课程内容

第5章讲TypeScript的基础内容
配置TS环境

• 本地：ts-node
• 线上：play-ground
• 开发：webpack(ts-loader)

npm i -D typescript nodemon ts-node

基础类型：

• boolean
• number
• string
• symbol
• null
• undefined

对象类型

• {} or object
• or Array
• function
• Class类型
  可选 ?
  联合类型 |

Object和object

• {}与Object类型相同，可以赋值包括字符串、数组等
• object相当于{[key:string]: any}，不能分配原始类型
• {[key: string]: any}最具体，不能分配原型类型+数组+非字符串对象

函数类型：

function add(arg1: number, arg2: number): number {
  return arg1 + arg2;
}

const result = add(1, 2);

const add1 = (arg1: number, arg2: number): number => {
  return arg1 + arg2;
}

const add2: (arg1: number, arg2: number) => number = (arg1: number, arg2: number) => arg1 + arg2;

TS 函数重载区别于其他语言中的重载，TypeScript中的重载是为了针对不同参数个数和类型，推断返回值类型。

函数重载不能使用箭头函数的方式

function handleData(x: string): string[];

function handleData(x: number): string;

function handleData(x: any): any {
  if (typeof x === "string") {
    return x.split("")
  } else {
    return x.toString().split("").join("_")
  }
}

handleData("abc").join("_")
handleData(123)

any & never & void & unknow区别于应用场景

any相当于任意类型，var
void表示没有类型
never 永远不存在的值或者类型
unknown 未知的类型
unknown可以接受任何值，用过流程判断可以使用原型链方法

tuple：元组，固定类型+长度的数组
enum：枚举，罗列出来的所有的可能情况→常量

const teacherInfo: [string, string, number] = ['tomic', 'male', 18]

enum Direction {
  Up = 100,
  Down,
  Left,
  Right
}

Interface

接口→TS最重要的概念，定义任意的结构或者类型

当定义了索引类型后，数组的length方法将不存在，包括Array原型链上的其他方法也不存在了

interface Point {
  x: number;
  y: number;
}

interface Point1 {
  x: number,
  y: number
}

// 函数定义
interface Func {
  (num1: number, num2: number): number;
}

const addFunc: Func = (arg1, arg2) => arg1 + arg2

// 索引类型
interface Role {
  [id: number]: string;
}

const role: Role = ['super_admin', 'admin']
const role1: Role = {
  0: "super_admin",
  1: "admin",
  5: "user"
}

绕开多余属性检查

1. 类型断言
2. 索引签名
3. 类型兼容（不太推荐）

interface MyType {
  color: string;
  [prop: string]: any;
}

const getTypes = (myType: MyType) => {
  return `${myType.color}`
}

// 1. 类型断言
getTypes({
  color: 'red',
  type: 'color'，
  num: 0
} as MyType)

// 2. 索引签名
getTypes({
  color: 'red',
  type: 'color',
  num: 0,
  num1: [],
  a: () => {},
  b: {},
  c: '123123'
})
// 3. 类型兼容
interface MyType{
  color: string;
}
const getTypes = ({ color }: MyType) => {
  return `${color}`
}
const option = {
  color: 'yellow',
  size: 12
}
getTypes(option)

Interface接口

• 接口可以定义任意类型&结构
• Interface可扩展extends & 自动合并相同类型接口
• 绕开多余属性检查：类型断言、索引签名、类型兼容

Class类

接口继承类

1. 接口可以继承类，当接口继承了类之后，会继承成员（类型），但是不包括实现；
2. 接口还会继承private和protected修饰的成员，但是这个接口只可被这个类或它的子类实现

class Person {
  name = 'toimc'
  // public 公共的，允许在类的外面进行调用
  // protected 允许在类内及继承的子类中使用
  // private 只允许在类内使用
  getName() {
    return this.name
  }
}

class Person1 extends Person {
  constructor() {
    super()
    console.log(super.getName())
    console.log(this.getName())
  }
  getName() {
    return 'new toimc'
  }
}
const person1 = new Person1()
console.log(person1.getName())

// 类类型接口
interface FoodInterface {
  type: string;
}

class FoodClass implements FoodInterface {
  constructor(public type: string) {}
}

泛型

泛型是指：在定义函数、接口或类的时候不预先指定数据类型，而在使用时再指定类型的特性。
作用：泛型可以提升应用的可重用性，如使用其创建组件，则可以使组件可以支持多种数据类型。

const pushArr = <T>(arr: T[], item: T): T[] => {
  arr.push(item);
  return arr;
}

const arrnum: number[] = [1, 2, 3, 4]
pushArr<number>(arrnum, 3)
pushArr<string>(['123'], '3')

function swapGeneric<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]]
}

const res = swapGeneric<string, number>(['123', 123])

声明文件tsconfig

声明：在文件中定义好函数、接口或类的类型；
声明文件：把声明语句放到一个单独的文件；
说明：声明文件必需以.d.ts为后缀

第三方声明文件，自定义声明文件
生成声明文件：

• 使用tsc中的—desclaration或者配置compilerOptions
• npm工具：dts-gen

课程收获

复习巩固了TypeScript的用法，对Interface和重载的使用印象更加深刻熟悉了。

截图