TypeScript知识点总结

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

js 复制代码

let b: null = null

let c: null = undefined

let d: undefined = undefined
let e: undefined = null


let 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]

/类型别名/

js 复制代码

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: string
    method:string
}
function myAxios(config:configType):void {
    
}

myAxios({
    url: "xxxxxxxxxxxxx",
    method:"Get"
})

//接口

js 复制代码

interface IPerson {
    name: string
    age: number
    sayHi: () => void
} 
let person1:IPerson = {
    name: 'gf',
    age: 100,
    sayHi(){}
}

let person2: IPerson= {
    name: 'gf2',
    age: 120,
    sayHi(){}
}

person1.name = 'xxxxx'

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

//接口的继承

js 复制代码

interface Ponit2D {
    x: number
    y: number
}

interface Pointer3D extends Ponit2D{
    z:number
}

let p3: Pointer3D = {
    x: 10,
    y:20,
    z:100
}

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

js 复制代码

let postion: number[] = [29, 42]

let pos1: [number, number] = [20, 19]

type numbers = [number, number]
let pos2: numbers = [20, 19]

//类型推论

js 复制代码

// 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'

//字面量类型

js 复制代码

let str = 'hello ts'

const str2 = 'HELLO TS'

// let str3 :19 = 19

type dType = 'up' | 'down' | 'left' | 'right'
function changeDirection(d: dType) {
    console.log(d)
}

changeDirection('down')

//枚举类型

//类似于字面量+联合类型

//注意：若果形参的类型为Direction，那么实参就应该是枚举类型成员中的任意一个

js 复制代码

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

//字符串枚举

js 复制代码

enum Direction1 { Up='Up', Down = 'Down', Left='Left', Right='Right' }


console.log(Direction1.Down)
console.log(Direction1.Up)

//typeof

//类型查询

//根据已有变量的值，获取该值的类型，来简化类型书写

//只能用来查询变量或属性的类型

//无法查询其他形式的类型，比如函数调用

js 复制代码

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的语法功能，而且也是一种类型存在

js 复制代码

class Person {
   age: number
   gender = '男'
   name:string
}

const p = new Person()

p.age

//class的构造函数

//构造函数的作用是设置实例的初始属性

//构造函数不能有返回类型，不要手动指定返回值

js 复制代码

class People {
    age: number
    gender: string
    constructor(age:number, gender:string) {
        this.age = age
        this.gender = gender
    }
}

const p1 = new People(20, 'gaofeng')
p1.age
p1.gender

//class的实例方法

js 复制代码

class Point {
    x = 10
    y = 10

    scale(n: number) {
        this.x *= n
        this.y *= n
    }
}

const o = new Point()

o.scale(2)
o.x
o.y

//class中的继承 extends继承父类，implements实现接口

//js中只有extends,ts提供了implements

js 复制代码

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特有的实现方式

//类来实现接口，类继承类

//实现一个接口，就是要类实现接口中所有的属性和方法

js 复制代码

interface Singlable {
    sing(): void
    getName(): string
    getAge(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私有的,只在当前类中可见，再实例对象子类中都不可见

js 复制代码

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__ 是无法在实例上获取的