学习笔记:TS

82 阅读4分钟

基础类型

Void

代表没有任何返回值

function showMsg(): void {
    console.log(1)
    return null
}
## Object

定义一个函数,参数是obj,返回值也是object

function getObj(obj:object): object {
    console.log(obj)
    return {
        name: '2sa',
        age: 22
    }
}

如果想传入一个其他数据类型可以这样:

getObj(new String(123))

getObj(String) // 也是可行的

联合类型

取值可以是多种类型中的一种

function getString(str: number | strting): string {
    return str.toString()
}

类型断言

不进行特殊的数据检查和结构

方法一: <类型>

方法二: as

function getString(str: number | strting): string {
    if((<string>str).length) {
        // 断定此时str是一个String类型
        return str.length
         // return (str as string).length
    }else {
        return str.toString().length
    }
}
​

类型推断

自动推断类型

let te = 111
// 此时 ts将te的类型推断为 number
// 若改变te的数据类型
te = '123' // 报错

定义了类型没有赋值时,该变量是any类型

接口

接口用来对值进行类型检查, 使用接口来定义对象的数据类型(约束)

// 定义一个接口对象
interface IPerson{
    // readyonly id属性只读 
    readyonly id: number,
    name: string,
    age: number,
    // ?  非必选
    sex?: string
}
// 定义一个IPerson为接口的对象
const person:IPerson = {
id:1,
name: 'asc',
age: 19
}

函数类型

使用接口 定义函数的类型

// 定义一个接口
interface ISearchFunc {
// 接受两个字符串参数, 返回的是布尔类型
	(source: string, subString) : boolean
}
// 使用上面的接口定义一个函数
const seatchString:ISearchFunc = function(source:string, subString:string):boolean {
	return source.search(subString) > -1
}

类类型

interface IFly {
    // 没实现的方法
    fly()
}
 interface ISwim{
     swim()
 }
// 定义一个类实现上面的接口
// implements是一个类实现一个接口用的 关键字 .实现一个接口,必须实现接口中的所有方法
class Person implements IFly {
 	 fly() {
         console.log('111')
     }
}

// 使用
const person = new Person()

// 一个类实现多个接口
class Person2 implements IFly,ISwim {
    fly() {
         console.log('111')
     },
     swim() {
         console.log('111')
     }
}

// 接口继承其他接口
interface IOther extends IFly,ISwim {}

继承

使用extends继承

子类构造函数中使用super调用父类的构造方法,子类可以调用或重写父类的方法

多态

实例化子类实例时使用父类型

const child:Parent = new Children()
// 定义一个父类
class Animal {
	name: string,
	constructor(name: string) {
	this.name = name
	}
	run (distance: number) {
		console.log(this.name,distance,'m')
	}
}
// 定义两个子类
class Dog extends Animal {
	constructor (name: string) {
		this.name = name
	}
	// 重写父类中的方法
	run (distance: number=10) {
		console.log(this.name,distance,'m')
	}
}
class Pig extends Animal {
	constructor (name: string) {
		this.name = name
	}
	// 重写父类中的方法
	run (distance: number=5) {
		console.log(this.name,distance,'m')
	}
}
// 实例化子类实例时使用父类型
const pig: Animal = new Pig('小猪') // 可以运行 结果是: 小猪5m
// 使用函数型式调用
// 正常方式实例化两个子类
const dog1: Dog = new Dog('小狗')
const pig1: Pig = new Pig('小猪')
function getRun (ani:Animal) {
    ani.run()
}
getRun(dog1) // 可以运行
// 这里表明,getRun虽然只接受Animal类型的对象,但是,子类也算Animal类型的对象

public private protected readonly

描述类中的成员属性的可访问性

readonly 只读属性不能在外部修改

class Person {
// 本来Person没有定义name成员属性
// 但是加上readonly后, name变成了成员变量
// 当然,换成其他的修饰符也是可以的
	constructor (readonly name: string = 'bob') {
		this.name = name 
	}
}

存储器 getter setter

class Name {
	firstName: string,
	lastName: string
	
	get fullName() {
	// 此时已经在类中添加了一个成员
		return this.firstName + '_' + this.lastName
	}
	set fullName(val) {
		let names = val.split('_')
		this.firstName = names[0]
		this.lastNmae = names[1]
	}
	// 如果只有get 没有set 那么它就是一个只读成员属性
	// 如果只有set 没有get 那么它就是一个只存成员属性

}

静态属性

在类中使用 static 修饰

使用类名. 的方式获取值

class Person {
	static name: string,
	constructor(name: string) {
		// 这里的this指向实例,不能调用静态成员,会报错
		this.name = name
	}
	sayHi () {
		console.log('你好')
	}
}

// 想要得到name就要 Person.name 存取,方法同理
// static不能用来修饰构造函数

抽象类

没有具体实现

不能被实例化

关键字: abstract

// 抽象类
abstract class Animal {
	// 抽象方法
    abstract eat () 
    // 实例方法
    sayHi() {
        console.log('1')
    }
}

// 定义一个继承抽象类的子类
class Dog extends Animal {
    // 子类必须实现抽象类的方法
    eat() {
        conlose.log('111')
    }
    // sayHi就不是必须实现的
}
const dog:Dog = new Dog()
dog.eat()
// 这里调用的是父类实例方法
dog.sayHi()

函数

标明参数类型,返回值类型

// 两种写法
function (name: string):string {
}
const add:(x: number, y: number)=>number = function(x: number, y: number): number {
    return x + y
}

可选参数和默认参数,剩余参数

可选参数: 加问号 ----> name?:string

默认参数: 加初始值 --> name:string='王'

剩余参数:剩余参数放在了一个字符串数组里面,放在所有参数最后 --> ...args:string[]

函数重写

function add(x:number,  y: number): number {
	return x + y
}
function add(x: string,  y: string): string{
	return x + y
}

这样,两个不同的参数就用相同方法名实现了

泛型

定义接口,函数,类的时候不能确定传入数据的类型,使用的时候才能确定的类型

不确定时,如果使用any, 那么会导致丢失了传入数据的信息,例如:数据的类型

使用泛型:

function getArr<T>(value:<T>, count: number):T {
    const arr: Array[T] = []
}

const arr1 = getArr<string>() // <> 里面写的什么,T就是什么, 不写也行

多个泛型参数的函数

function getMsg<k,V>(value: K, value2: V): [K, V] {
    
}

声明文件

引入第三方库使用

declare var jQuery : (selector:string) => any