昆明网站建设方案托管,房产网站建设的功能,pc网站建设企业,网络培训方案typescript是js的超集#xff0c;目前很多前端框架都开始使用它来作为项目的维护管理的工具#xff0c;还在不断地更新#xff0c;添加新功能中#xff0c;我们学习它#xff0c;才能更好的在的项目中运用它#xff0c;发挥它的最大功效
let b: null nulllet c: null …typescript是js的超集目前很多前端框架都开始使用它来作为项目的维护管理的工具还在不断地更新添加新功能中我们学习它才能更好的在的项目中运用它发挥它的最大功效
let b: null nulllet c: null undefinedlet d: undefined undefined
let e: undefined nulllet numbers: number[] [1, 2, 3, 4]
let numbers1: Arraynumber [1, 2, 3, 4]
let strings: string[] [1, 2, 3, 4]
let strings1: Arraystring [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 num1num2
}function add1(num1:number, num2:number):void {// return num1num2
}add(1, 2);// add1(1, 2);type funcType (n1:number,n2:number) number
const add2:funcType (num1, num2) {return num1num2
}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 22222let app 15
// app test....function add21(num: number, num2:number) {return numnum2
}const div document.getElementById(link) as HTMLAnchorElement
const div2 HTMLAnchorElementdocument.getElementById(link)
div.href xxxxxxxxxxxxx
div2.href XXXXXXXXXXXXXXXXXXXXXXXX//字面量类型
let str hello tsconst 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 { UpUp, Down Down, LeftLeft, RightRight }console.log(Direction1.Down)
console.log(Direction1.Up)//typeof //类型查询 //根据已有变量的值获取该值的类型来简化类型书写 //只能用来查询变量或属性的类型 //无法查询其他形式的类型比如函数调用
let p { x: 1, y: 1 }function add11(obj: typeof p) {console.log(obj.xobj.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 xiaomingsing() {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__ 是无法在实例上获取的
