ts基本语法使用

ts基本语法使用

数据类型

1. any和unknown，尽量不使用any, 能使用unknown 优先使用。

ts可以推导一个变量为any，unknown无法自动推导，必须显式声明
- 区别

function checkType() {
 const a: any = "1212"
 const b: unknown = 122
 const c = a === b
 // unknown 不能是 number子集 所以无法使用相关方法
 if (!c && isNaN(b)) {
   console.log("b must be a number")
 }
 if (!c && isNaN(a)) {
   console.log("a must be a number")
 }
 // any 可以是任意类子集，所以可以获取任意名称的属性和 任意名称方法，而unknow不行
 if (!c && a["age"] === b["age"]) {
   console.log("b must be a number")
 }
 console.log(c)
}

type

1. 联合类型

type List = Array<string> | string // 联合类型
function checkType(list: List) {
return list.length
}

2. 对象类型、继承、定义函数类型

// 对象类型
type Person = {
 name: string
 age?: number
}
// 继承 type
type Others = Person & { address?: string; city: string }
type PersonList = Array<Others>
// 定义函数类型
type Func = (list: PersonList, type: number) => PersonList
const pringPerson: Func = (list, type) => {
 if (type === 1) return list.filter((e) => (e.age ? e.age > 18 : null))
 return list
}
const lists = [
 { name: "10", city: "2" },
 { name: "11", age: 19, city: "2" },
]
const res = pringPerson(lists, 1)

3. 定义元组 、通过typeof声明变量类型

// 定义元组
type StrictList = [string, boolean, number] // 姓名 是否在读  年龄
// let youthList!: Array<StrictList> // ！非空
const youthList: Array<StrictList> = []
const countPerson = (list: StrictList) => {
 youthList.push(list)
}
countPerson(["张三", true, 20])
countPerson(["李四", false, 21])
// 通过typeof声明变量类型
type Pname = (typeof youthList)[0][0]
const cname: Pname = "18"

interface

 和type不同 ，没有联合类型、定义元组、typeof 这些，重复声明 直接合并，type会报错
 原则上 优先使用interface，无法满足时使用 type

1. 定义对象

interface Person {
  age: number
  name: string
  address?: string
}
const person: Person = {
  age: 18,
  name: "张三",
}

2. 定义函数

interface Func {
  (a: number, b: number): number
}
const addNum: Func = (a, b) => {
  return a + b
}

3. 声明合并、继承

// 声明合并
interface Person1 {
  age: number
}
interface Person1 {
  name: string
}
const person1: Person1 = {
  age: 18,
  name: "张三11",
}
interface Person2 extends Person1 {
  sex: number
}
const person2: Person2 = {
  ...person1,
  sex: 1,
}

4. 类实现接口

interface ApplyOne {
  sing(name: string, age: number): string
  dance(name: string, age: number): void
}
interface ApplyMany {
  reading(name: string, age: number): void
}
class User implements ApplyOne, ApplyMany {
  sing(name: string, age: number): string {
    return `${name} is ${age} can sing song`
  }
  dance(name: string, age: number): void {
    console.log(`${name} is ${age} can dance`)
  }
  reading(name: string, age: number): void {
    console.log(`${name} is ${age} can reading`)
  }
}
const user = new User()
user.dance("张三", 5)

enum

1. 反向映射

enum Color {
  Red = 1,
  Green,
  Blue = 5,
}
const color: number = Color.Blue
// value只能是数字是可行
console.log(color, Color[color]) // 5 Blue

泛型

1. 泛型约束，避免因属性不存在报错

interface IprintParams {
  length: number
}
function printLength<T extends IprintParams>(param: T): T {
  console.log(param.length)
  return param
}
printLength("length")

2. 多个类型参数之间也可以相互约束

// 我们使用了两个类型参数，其中要求 T 继承 U，这样就保证了 U 上不会出现 T 中不存在的字段。
function copyFields<T extends U, U>(target: T, source: U): T {
  for (const key in source) {
    target[key] = (<T>source)[key]
  }
  return target
}
const x = { a: 1, b: 2, c: 3, d: 4 }
const res = copyFields(x, { b: 10, d: 20 })

3. 泛型接口

interface CreateArray {
  <T>(length: number, value: T): Array<T>
}
// const createArrFun: CreateArray = (length, value) => {
//   return new Array(length).fill(value)
// }
const createArrFun: CreateArray = function <T>(
  length: number,
  value: T,
): Array<T> {
  const res: T[] = []
  for (let i = 0; i < length; i++) {
    res[i] = value
  }
  return res
}
console.log(createArrFun(2, "123"))

4. 泛型类

class PrintInfo<T> {
  public revalue: T
  constructor(revalue: T) {
    this.revalue = revalue
  }
  log<T>(a: T, b: T): T {
    console.log(a, b)
    return a
  }
}
const info = new PrintInfo<string>('"开始了: "')
const res = info.log("第一步", "第二步")

https://blog.csdn.net/weixin_44761091/article/details/124017662

错误

1. vue3 Jsx 元素隐式具有类型 “any”,因为不存在接口“JSX.IntrinsicElements"。

declare global {
	namespace JSX {
		interface IntrinsicElements {
			"el-table-column": any;
			"el-tag": any;
		}
	}
}