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__ 是无法在实例上获取的
相关推荐
小镇程序员几秒前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 分钟前
前端图像处理(一)
前端
程序猿阿伟10 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒12 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪20 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背23 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M34 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放42 分钟前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳1 小时前
vue3:瀑布流
前端·javascript·vue.js