JZTXT

ts 学习

发布时间 2023-04-30 20:52:03作者: 京鸿一瞥

1、基础类型

let a: (number | String) = new String('123')
// String 可以是 new String/ '' 形式， string 则不行

2、数组

数组特殊需求

数组可能是number、string 类型
数组中有一个元素可有可无
数组中前面固定， 后面可以随意添加

// 数组可能是number、string 类型
let arr: Array<number|string> = []
arr = ['123',1,2,3]

// 数字类型的数组
let arr1: number[] = []

// 数组中有一个元素可有可无
let arr2: [number, string?] = [1] // 元组

// 数组中前面固定， 后面可以随意添加
let arr3: [number, string?, ...(string|number)[]] = [1,'',123]

3、对象

基本使用

// 基本使用
let obj: {} = { a: 123, c: 123 } // 这样使用和 any 差不多意思，意义不是很大
// 一般使用
let obj: { x: 123, y: number} = { x: 123, y: 123}

对象特殊需求

规定键名是一个数字
属性可有可无
固定某几个属性， 其他属性随便添加

// 规定键名是一个数字
let obj1: { [key: number]: number } = { 1: 1 }

// 属性可有可无
let obj: { x: 123, y: number, z?: number} = { x: 123, y: 123}

// 固定某几个属性， 其他属性随便添加
let obj1: { x: 123, y: number, [key: number]: number|{} } = { x: 123, y: 1, 1: {}}

4、 函数

基本使用

// 直接定义一个函数的参数和返回
function f1(a:string): string {}
// 定义一个函数变量
let f2:(a:string)=>string = function(a){}

函数特殊需求

参数默认值和可选
this 处理
剩余参数处理
根据不同类型参数，有不同返回

// 参数和可选
function f1(a: number, b?: number) {}
// 剩余参数可选
function f1(a: number, b?: number, ...arg: (number|string)[]):any {}
// 参数默认值
function f1(a = 3) {}
// this 处理
function f3(this:void, a:number) {}
// 根据不同类型参数，有不同返回(重载)

5、类

class Jsclass {
  public a: number = 123
  static target: number = 123
  readonly c = 2
  f2(a: string): string

  f2(a: string) {
    return a
  }

  private f1() {
    console.log(1)
  }
}
// Jsclass  可以当作类型使用
let obj: Jsclass = { 
  a: 1, 
  c: 2, 
  f2: function(a) { return a }
}

6、特殊类型与高级类型

unknown 和 any

  1. any 和 unknow 类型都可以分配任何值
  2. Unkown 相当于更安全的 any, unknown 类型只能拿赋值给 unknown 或者 any
let value: unknown = {}
let value2: any = '123'

function f1(a:any):any {

}

let value3: string = value2 // any可以任意复制，会有问题
let vlaue4: string = vlaue // 这里报错， unknown 只能复制给 any/unknown

never

  1. never 代表永远不会出现
  2. never 类型的变量可以赋值给任何东西， 但是 never 类型不能有任何值
  3. 错误类型，或者永远没有结果的返回值可以用 never
function throwError():never { throw new Error() }

联合类型

let a: string|number

交叉类型

class obj1class { a: number }
class obj2class { b: number }
let obj3: obj1class & obj2class  { a: 1, b: 2 }

7、接口与type

type aString = string | number | number[]
type obj1 = { a: number }
type obj2 = { b: string }
type objAll = obj1 & obj2
// 函数
type f1 = (a: string) => string

let b: aString = [1,2,3]

// 函数、对象、 类、 数组
// 对象接口
interface ojb3 {
  type: { a1: number }
  type2?: string,
  [propName:string]: any
}

function f2(a:obj3) {
  console.log(a.type.a1)
}
f2({type:{a1:23}})

// 函数
interface obj5 {
  a: 123,
  f1(): (a:number) => string
}