前端与TS|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

概述

TS是JS的超集，是静态类型的语言，它的可读性增强、可维护性增强、兼容所有共存、支持渐进式引入与升级。使用TS推荐用VSCode。

基本语法

简单类型

在变量名后面加冒号(:)并指定类型

JS
const q = 'string
TS
const q: string = 'string

对象

用interface定义类型

interface IBytedancer {
  readonly ID: number， //readonly 只读
  hoobby?: string, //? 表示可选
  [key: string]: any //约束所有类型都是该类型的子类型
}

readonly 只读 ? 表示可选

函数

  function add(x: number, y: number): number {
    return x + y
  }
  const mult: (x: number, y: number) => number = (x, y) => x * y

用interface定义

  terface IMult {
    : number, y: number): number
  
  nst mult: IMult = (x, y) => x * y

函数重载

  function getDate(type: 'string', timestamp?: string): string
  interface IGetDate {
    (type: 'string', timestamp?: string): string
  }
  const getDate2: IGetDate = (type, timestamp) => {..}

数组

  type IArr1 = number[]
  type IArr2 = Array<string | number | Record<string, number>>
  type IArr3 = [number, number, string, string]
  interface IArr4 {
    [key: number]: any
  }

IArr1是数组中都是数字类型

IArr2是数组中是字符串、数字、对象类型

IArr3是数组长度为4，并且前两个是数字类型，后两个是字符串类型

IArr4是数组中可以是任何类类型

空类型

  type IEmptyFunction = () => void

枚举类型

  enum EnumExample {
    add = '+'
  }

表示枚举值到枚举名的正反映射

泛型

泛型符合字符串

  type IGetString = <T extends string>(target: T) => T[]

泛型参数默认类型

  type IGetNumber<T = number> = (target: T) => T[]

索引类型：关键字 keyof, 其相当于取值对象中的所有key组成的字符串字面量

关键字 in, 其相当于取值字符串字面量中的一种可能

关键字 ?, 通过设定对象可选选项，即可自动推导出子集类型

关键字 extends, 在泛型表示类型推断

关键字 infer, 在类型推荐中表示定义类型变量，可以用于指代类型

工程化

使用TSC编译

Code.ts => Code.js

1.npm安装tsc

2.配置tsconfig.js文件

3.使用tsc运行编辑得到js文件