TypeScript知识点总结
typescript是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]
/类型别名/
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"
})
//接口
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.接口和类型别名的声明方式不一样
//接口的继承
interface Ponit2D {
x: number
y: 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 = 19
type 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: number
gender = '男'
name:string
}
const p = new Person()
p.age
//class的构造函数
//构造函数的作用是设置实例的初始属性
//构造函数不能有返回类型，不要手动指定返回值
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的实例方法
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
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(): 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私有的,只在当前类中可见，再实例对象子类中都不可见
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__ 是无法在实例上获取的