当前位置：首页 > news >正文

TypeScript知识点总结

news 2025/7/7 21:10:28

typescript是js的超集，目前很多前端框架都开始使用它来作为项目的维护管理的工具，还在不断地更新，添加新功能中，我们学习它，才能更好的在的项目中运用它，发挥它的最大功效

let b: null = nulllet c: null = undefinedlet d: undefined = undefined
let e: undefined = nulllet numbers: number[] = [1, 2, 3, 4]
let numbers1: Array<number> = [1, 2, 3, 4]
let strings: string[] = ['1', '2', '3', '4']
let strings1: Array<string> = ['1', '2', '3', '4']type num = number[]let numbers3: num = [1, 2, 3, 4]

/类型别名/

type strAndNum = (number | string)[]let data: strAndNum = [1, 2, 3, 4, '11111']type dataType = number | string[]let data1: dataType = 22222
let data2: dataType = ['1', '2']function add(num1:number, num2:number):number {return num1+num2
}function add1(num1:number, num2:number):void {// return num1+num2
}add(1, 2);// add1('1', '2');type funcType = (n1:number,n2:number) => number
const add2:funcType  = (num1, num2) => {return num1+num2
}function mySlice(start: number, end?: number):void {console.log(`起始索引${start};结束索引${end}`)
}mySlice(1,3)
mySlice(1)
// mySlice()type pType = { name: string; age: number; sayHi(): void;greet(name:string):void}let person:pType  = {name: 'gaofeng',age: 19,sayHi() { },greet(name) { }
}
type configType = {url: stringmethod:string
}
function myAxios(config:configType):void {}myAxios({url: "xxxxxxxxxxxxx",method:"Get"
})

//接口

interface IPerson {name: stringage: numbersayHi: () => void
} 
let person1:IPerson = {name: 'gf',age: 100,sayHi(){}
}let person2: IPerson= {name: 'gf2',age: 120,sayHi(){}
}person1.name = 'xxxxx'

//类型别名和接口的区别
//1.接口只能为对象声明类型，类型别名可以为任何类型声明
//2.接口可以继承，类型别名不能继承
//3.接口和类型别名的声明方式不一样

//接口的继承

interface Ponit2D {x: numbery: number
}interface Pointer3D extends Ponit2D{z:number
}let p3: Pointer3D = {x: 10,y:20,z:100
}

//元组,指定长度的数组类型

let postion: number[] = [29, 42]let pos1: [number, number] = [20, 19]type numbers = [number, number]
let pos2: numbers = [20, 19]

//类型推论

// let app: number
// app = 123
// app = '22222'let app = 15
// app = 'test....'function add21(num: number, num2:number) {return num+num2
}const div = document.getElementById('link') as HTMLAnchorElement
const div2 = <HTMLAnchorElement>document.getElementById('link')
div.href = 'xxxxxxxxxxxxx'
div2.href = 'XXXXXXXXXXXXXXXXXXXXXXXX'

//字面量类型

let str = 'hello ts'const str2 = 'HELLO TS'// let str3 :19 = 19type dType = 'up' | 'down' | 'left' | 'right'
function changeDirection(d: dType) {console.log(d)
}changeDirection('down')

//枚举类型
//类似于字面量+联合类型
//注意：若果形参的类型为Direction，那么实参就应该是枚举类型成员中的任意一个

enum Direction { Up, Down = 4, Left, Right }const obj = {a1:Direction.Down
}function changeDirection1(d: Direction) {console.log('xxxxxxxxxxx')
}
changeDirection1(Direction.Up) // 0
changeDirection1(Direction.Down) // 4
changeDirection1(Direction.Left) // 5
changeDirection1(Direction.Right) // 6

//字符串枚举

enum Direction1 { Up='Up', Down = 'Down', Left='Left', Right='Right' }console.log(Direction1.Down)
console.log(Direction1.Up)

//typeof
//类型查询
//根据已有变量的值，获取该值的类型，来简化类型书写
//只能用来查询变量或属性的类型
//无法查询其他形式的类型，比如函数调用

let p = { x: 1, y: 1 }function add11(obj: typeof p) {console.log(obj.x+obj.y)
}add11({ x: 100, y: 200 })let num: typeof p.x

//TS中的class,不仅仅提供了class的语法功能，而且也是一种类型存在

class Person {age: numbergender = '男'name:string
}const p = new Person()p.age

//class的构造函数
//构造函数的作用是设置实例的初始属性
//构造函数不能有返回类型，不要手动指定返回值

class People {age: numbergender: stringconstructor(age:number, gender:string) {this.age = agethis.gender = gender}
}const p1 = new People(20, 'gaofeng')
p1.age
p1.gender

//class的实例方法

class Point {x = 10y = 10scale(n: number) {this.x *= nthis.y *= n}
}const o = new Point()o.scale(2)
o.x
o.y

//class中的继承 extends继承父类，implements实现接口
//js中只有extends,ts提供了implements

class Animal {move() {console.log('Moving along')}
}class Dog extends Animal {name = '二哈'bark() {console.log('wangwang')}}const d = new Dog()
d.move()
d.bark()
d.name

//implements ts特有的实现方式
//类来实现接口，类继承类
//实现一个接口，就是要类实现接口中所有的属性和方法

interface Singlable {sing(): voidgetName(): stringgetAge(num:number):number
}class Man implements Singlable {name = 'xiaoming'sing() {console.log('hahaha~~~~')}getName() {return this.name}getAge(num:number) {return  num}
}const m = new Man()m.getAge(20)

//class中类成员的可见性
//publicpublic 公有的,可以被任何地方访问,可以直接省略不写
//protected 受保护的，仅在其声明的类和子类（非实例对象）中可见
//private私有的,只在当前类中可见，再实例对象子类中都不可见

class Animal {public move() {console.log('hahaha')}protected getName() {}private __run__() {console.log('99999')//类中的辅助方法}
}
const a = new Animal()
a.move
//a.protected 是无法在实例上获取的
//a.__run__ 是无法在实例上获取的class Dog extends Animal {bark() {console.log('wangwang')this.getName()//this.__run__() 是无法在实例上获取的}}const d = new Dog()d.move
//d.protected 是无法在实例上获取的
//a.__run__ 是无法在实例上获取的