Skip to main content

TypeScript笔记

TypeScript
鱼雪

TypeScript 是 JavaScript 的一个超集，它添加了静态类型和其他一些功能，使得代码更易于维护和阅读。以下是 TypeScript 的一些主要特点：

  • 静态类型
  • 接口
  • 泛型
  • 枚举
  • 类型推断
  • 类
  • 模块
  • 类型别名
  • 类型守卫
  • 声明文件

TypeScript的优势​

  1. 编译时静态类型检查
  2. 自动提示更清晰明确
  3. 引入泛型和一系列的TS特有类型
  4. 强大的t.ts声明文件
  5. 轻松编译成JS文件
  6. 灵活性高

类型注解和类型推导​

let data: number = 0
// data = '222'   // 提示报错

let money = "abc" // 类型系统会推断为string
// money = 1111   // 提示报错

  • 区别：

    • 类型注解：定义时固化类型
    • 类型推导：根据值的类型反过来推导类型

  • 优点

TS编译和编译优化​

  • 正常情况下，TS检测变量，会把所有变量都当成全局变量检测

    • 解决方法
      • 在代码结尾添加export {}作用域
        • 表明当前变量作用域是当前文件

  • TS代码默认不能被正常运行

    • 不能使用node直接运行
    • 浏览器也不能直接加载运行

  • 运行方式

|------------|       tsc        |------------|
| Javascript |----------------> | Typescript |
|------------|                  |------------|

TS的24种类型​

  • 基本类型

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

  • 根类型

    • Object

  • 对象类型

    • Array
    • object
    • function

  • 特殊类型

    • any
    • unknown
    • never
    • void
    • tuple
    • 可变元组

  • 合成类型

    • 联合类型
    • 交叉类型

  • 字面量数据类型


// 联合数据类型
let dat: string | number = 'a'

// 交叉类型,可以合并在一起
type Obj1 = { username: sring}
type Obj2 = { age: number}
let obj1:Obj1 = { username: 'aaa' }
let obj2:Obj2 = { age: 22 }
let obj3: Obj1 & Obj2 = { username: 'ww', age: 3 }

any和unknown的区别和应用场景​

  • 相同点

    • any和unknown可以是任何类的父类
      • 所以任何类型的变量都可以赋值给any类型或unknown类型的变量

  • 不同点

    • any也可以是任何类的子类，但unknown不可以
      • 所以any类型的变量都可以赋值给其它类型的变量
    • 不能拿unknown类型的变量来获取任何属性和方法，但any类型的变量可以获取任意名称的属性和任意名称的方法

  • any比较典型的应用场景

    • 自定义守卫
    • 需要进行as any类型断言的场景

  • unknown的应用场景

    • 一般用作函数参数
      • 用来接受任意类型的变量实参
      • 但在函数内部只用于再次传递或输出结果，不获取属性的场景
export function isRef(r: any): r is Ref {
  return Boolearn(r && r.__v_isRef === true) // any类型的r参数在函数内部获取属性
}

function ref(value?: unknown) {
  return createRef(value)                    // 函数内部只用于再次传递，不获取属性
}

接口和应用场景​

  • 接口

    • 另一种定义对象类型的类型

  • 接口的应用场景

    • 一些第三方包或者架构底层源码中有大量的接口类型
    • 提供方法的对象类型的参数时使用
    • 为多个同类别的类提供统一的方法和属性声明

  • 如何定义接口

    • 接口中的类型的方法都只有声明，没有实现

  • 接口继承

    • 新的接口知识在原来的接口继承上增加了一些属性或方法

  • 接口的可索引签名

    • 用来接收不确定字段名
interface Product {
  name: string
  price: number
  account: number
  [x: string]: any   // string, 支持各种类型，如果是number,则只支持number
}

let p: Product = {
  name: "1",
  price: 1,
  account: 1,
  describe: 'ok',             // Ok
  [Symbol('stockno')]: 33,    // Ok
  100: 1,                     // Ok
  true: "o"                   // Ok
}

索引访问类型​

  • keyof
    • keyof 类型
      • 获取类型的所有属性名组成的联合类型
type symid = Symbol('productno')
interface Product {
  [symid]: string
  name: string
  price: number
  account: number
  buy(): string
}

type A = Product['price']
type B = Product['price' | 'name']
type S = Product[typeof symid]

type PKeys = keyof Product // 获取所有属性名组成的联合类型
// "name" | "price" | "account" | "buy" | typeof symid
  • typeof
    • typeof variable
      • 获取变量对应的类型

void 类型​

null 和 undefined​

  1. 如果希望没变量没赋值还不报错，使用undefined的联合类型

  2. ?会将字段的类型变成字段类型和undefined的联合类型

  3. 哪些类型可以接受undefined

    • any
    • unknown
    • undefined

  4. 那些类型可以接受null

    • any
    • unknown
    • null
typeof null      // {}
typeof undefined // undefined

let str: string | undefined
console.log("str: ", str)

function func(data?: string) {
  data?.toString()
  data!.toString() // ! 会忽略 undefined

  if (data) {
    data.toString()
  }
}

常见取值错误​

let obj = { username: 'wu', age: 22 }
let username = "username" // 出问题
const username = "username"
let u = obj[username]

TS函数与JS函数​

TS函数类型解构​

type TypStuobj = { username: string, age: number, phone: string }
function info(stuInfo: TypStuobj) {
  console.log("name: ", stuInfo.username, "age: ", stuInfo.age)
}
// 只需要username和phone，解构
function info({ username, phone }: TypStuobj) {
  console.log("name: ", stuInfo.username, "age: ", stuInfo.age)
}

interface和type的区别​

  • type和interface类似

    • 都用来定义类型

  • 区别

    1. 定义类型的范围不同
    • interface
      • 定义对象类型
      • 接口当名字的函数类型
    • type
      • 可以定义任何类型
        • 基础类型
        • 联合类型
        • 交叉类型
        • 元组
    1. 接口可以extends一个或多个接口或实现一个或多个接口
    • 也可以继承type
    • type类型没有继承功能
    • interface可以继承type，但很少见
    1. 用type交叉类型&
    • 可让类型中的成员合并成一个新的type类型
    • interface不能交叉合并

元组​

  • 满足下面3点的数组就是元组
    • 在定义的时候每个元素的类型都确定
    • 元素值的数据类型必须是当前元素定义的类型
    • 元组值的个数必须和定义时个数相同

数组和数组元素怎样同时为只读​

const account = [1, 2, 3] as const // 约束每个元素也是常量

可变元组​

// 可变元组
let customers: [string, number, string, ...any[]] = ['1', 1, '1', true]
// 可变元组解构，可以解构任意个数
let [custname, age, ...rest]: [string, number, string, ...any[]] = ['1', 1, '1', true]
// 元组标签
let [custname, age, address, ...rest]: [custname:string, age:number, address:string, ...rest:...any[]] = ['1', 1, '1', true]

类与静态属性​

  • 类
    • 拥有相同属性和方法的一些列对象的集合

类型守卫与类型转换​

A as Type

绕过类型检查

  • 类型断言: A as B
  • 类型转换: <type>

typeof的局限性与替代方案​

  • typeof

    • 用来检测一个变量或类型

  • 局限性​

    // 类型判断
    const arr = [30, 30]
    console.log(typeof arr) // object
    const set = new Set()
    console.log(typeof set) // object
    const map = new Map()
    consolo.log(typeof map) // object

    // 替代方法
    console.log(Object.prototype.toString.call(arr)) // [object Array]
    console.log(Object.prototype.toString.call(set)) // [object Set]
    console.log(Object.prjjototype.toString.call(map)) // [object Map]
    // 但不能精准判断类属性的名字

    // 实例判断: <instance> instanceof Type 

    // `in` 
    // - 属性或方法的判断
    // - <attr>/<method> in variable

    // 字面量相等判断
    // - `===`

自定义类型守卫​

function isClass(形参: 参数类型): 形参 is 类型 {
  return type or false
}

泛型​

  • 泛型

    • 定义时不明确使用时必须确定某种具体数据的数据类型
    • 编译器期间对数据类型检查的数据类型

  • 泛型约束

    • <T extends Type>
    • <T extends Type, K extends keyof T>
    • <T extends Type, K extends keyof T ? K: never>

  • 反向为泛型赋值

函数重载​

  • 重载签名: 只有声明
  • 实现签名: 实现多个类型组成的联合类型(参数类型/返回值类型)

泛型工厂函数类型​

  • new表示构造函数，不是创建
  • 类名指向类的构造函数的空间
export default class CommercialBank {
  address: string = "bj"
  name: string = 'zhangs'
  count: number

  constructor(name: string, address: string) {
    this.name = name
    this.address = address
  }

  loan(): void {
    console.log(this.name + ' 银行贷款')
  }
}

type ConstructorTyp = new (...args: any) => any

interface ConstructorInter {
  new (...args: any): any
}

//function createFactoryConstructor(constructorTyp: new (...args: any) => CommercialBank) {
// function createFactoryConstructor(constructorTyp: new (...args: any) => any) {
function createFactoryConstructor(constructorTyp: ConstructorInter) {
  console.log(constructorTyp.name + '被创建...')
  new constructorTyp()
}

// 调用 ClassName is constructor
createFactoryConstructor(CommercialBank)

交叉类型​

type O1 = { a: string; b: number }
type O2 = { a: string; b: number }
type O3 = O1 & O2

let o3: O3 = {a: 'd', b: 1, c: 'c', d: 2}

通用交叉方法​

function cross<T extends object, U extends object>(obj1: T, obj2: U): T & U {
  const combine = {} as T & U
  for (let k in obj1) (combine as any)[k] = obj1[k]
  for (let k in obj2) (combine as any)[k] = obj2[k]
}

let o1: O1 = { a: 'a', b: 3}
let o2: O2 = { c: 'c', d: 4}
console.log(cross(o1, o2))
中年老码农,专注于自由职业与远程全栈开发
新文
Rust 和 Julia 在科学计算中的对比分析在稳定版Rust中实现高效可移植SIMD优化：全面指南Rust Builder模式详解与Bon库最佳实践：深入理解与应用Rust基金会发布C++/Rust互操作性声明：挑战与机遇YOLO模型：目标检测、图像分割与姿态估计全解析