为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第3天 NestJS入门到实战

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

2022.11.12 20:23 77浏览

课程名称: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和重载的使用印象更加深刻熟悉了。

截图

图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
2
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消