typeScript
TS的概念
TypeScript是一种由微软开发的开源、跨平台的编程语言。它是js的超集，最终会被编译为js代码
安装命令：npm install -g typescript
检查版本：tsc -V
基础类型
语法：let 变量名:数据类型 = 值
注意：在ts中一开始是什么类型，后期赋值的时候，不允许用其他类型的数据赋值给当前这个变量
布尔类型
let flag:boolean = true
console.log(flag); // true
数字类型
let a1: number = 10
let a2: number = 0xa
console.log(a1,a2) // 10 10
字符串类型
let str1: string = '123'
let str2: string = `${str}`
// 字符串和数字之间一起拼接
let a1: number = 10
console.log(a1 + str1) // 10123
null和undefined类型
都可以作为其他类型的子类型，简单说就是可以把他们赋值给其他类型
let und: undefined = undefined
let nul: null = null
console.log(und,nul); // undefined null
// 要把严格模式关掉 在tsconfig.json中将"strict": false
let num1: number = undefined
let num2: number = null
console.log(num1,num2); // undefined null
数组类型
数组定义的方式：
let 变量名: 数据类型[] = [值1,值2]let 变量名: Array<数据类型> = [值1,值2] (泛型写法)
let arr1:number[] = [1,2,3]
console.log(arr1) // [1,2,3]
let arr2:Array<string> = ['a','b']
console.log(arr2) // ['a','b']
元祖类型
元组类型：数组中定义不同的类型,类型和个数是限制的
let arr3: [string,number,boolean] = ['aaa',1.3444,true]
console.log(arr3[0].split('')); // ['z','b','t']
console.log(arr3[1].toFixed(2)); // 1.34
console.log(arr3); // ['aaa',1.3444,true]
枚组类型
枚举类型：里面的每个数据都可以叫元素，每个元素都有自己的编号，从0开始，依次递增加1
enum Color{
red=1,
green,
blue
}
// 定义一个Color的枚举类型的变量来接受枚举的值
let color: Color = Color.red
console.log(Color.red,Color.green,Color.blue); // 1,2,3
// 可以手动指定成员的值 red=1
console.log(Color[3]); // blue
any类型
any类型：编程阶段不清楚变量类型时,可以指定任意数据类型
let an: any = 'aaa'
// 应用：当一个数组要存储多个数据时，个数和类型不确定时
let ar:any[] = ['dede',10,true,455]
// 但是存在缺点：
console.log(ar[1].split('')); // 这种情况下没有报错，缺点
void类型
经常使用当一个函数没有返回值的时候
function fun():void {
console.log('函数没有返回值');
也可以：
// return
// return undefined
// return null
}
console.log(fun()); // 下面的return语句依次输出：undefined undefined null
有时候我们经常看到
// 定义void类型的变量,可以接收一个undefined的值,但是意义不是太大
let vd:void = undefined
console.log(vd) // undefined
Object类型
function getObj(obj:object):object {
console.log(obj); // {name:'aaa'}
return{
name:'芋圆味糖罐',
age:18
}
}
console.log(getObj({name:'aaa'}));
console.log(new String('123'));
console.log(String);
// console.log(getObj('123')); 错误
联合类型
联合类型：表示取值可以为多种类型中的一种
function f(s:number|string):string {
return s.toString()
}
console.log(f(123)); // 123
类型断言
有两种方式：
方式一：<类型>变量
方式二：值 as 类型
function f(s:number|string):number {
// 此时不知道s是number还是string
if((<string>s).length) { // 存在证明是字符串
return (s as string).length
} else {
return s.toString().length
}
}
console.log(f(123)); // 3
类型推断
ts会在没有明确指定数据类型时，推断出一个类型
let text = '123' // string类型
text = 123 报错
let txt // any类型
接口
接口：ts核心原则之一，对值所具有的结构进行类型检查(是对象的属性和方法的抽象)
接口：是一种类型，规范，约束
接口限制对象
(()=>{
// 定义一个接口
interface Person{
readonly id: number, // id只读 readonly
name?: string // name是可选属性?
}
let person: Person = {
id:1,
name:'芋圆'
}
person.name = '芋圆'
// person.age = 10 报错
// person.id = 2 报错
console.log(person); {id:1,name:'uu'}
})()
readonly和const功能差不多，但是const修饰的是变量，readonly修饰的是属性
接口限制函数
通过接口的方式作为函数类型来使用
就像一个只有参数列表和返回值类型的函数定义。参数列表里每个参数都需要名字和类型
(()=>{
interface Fun{
// 定义一个调用签名
(s:string,subString:string):boolean
}
const fu: Fun = function (s:string,subString:string):boolean {
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
return s.search(subString) > -1
}
console.log(fu('123','1')); // true
})()
接口限制类
类的类型可以通过接口来实现
(()=>{
interface Fly{
// 该方法没有任何实现
fly()
}
class P implements Fly { // implements实现
fly(){
console.log('飞吧');
}
}
const p = new P()
p.fly()
})()
类实现多个接口
(()=>{
interface Fly{
fly()
}
interface Swim{
swim()
}
class P2 implements Swim,Fly {
fly(){
console.log('飞吧');
}
swim() {
console.log('游吧');
}
}
const p2 = new P2()
})()
接口可以继承其他的多个接口 extends
(()=>{
interface Sum extends Fly,Swim {
}
class P3 implements Sum {
fly(){
console.log('飞吧3');
}
swim() {
console.log('游吧3');
}
}
const p3 = new P3()
})()
总结:
1. 类可以通过接口的方式来定义当前这个类的类型，类可以实现多个接口
2. 接口和接口之间是继承(extends)，类和接口之间是实现(implements)
类
类：可以理解为模板，通过模板可以实例化对象，主要体现:面向对象的编程思想
(()=>{
class People {
// 定义属性
name:string;
age:number;
// 将来实例化对象时，可以直接对属性的值进行初始化
constructor(name: string="uu盘",age:number=18) {
this.name = name
this.age = age
}
say(str:string) {
console.log(`大家好我叫${this.name},今年${this.age}`,str);
}
}
const u = new People()
u.say('你是谁？') // 大家好我叫芋圆,今年25 你是谁？
})()
类的继承
类继承：A类继承了B类 A类叫子类(派生类) B类叫基类(父类，超类)
(()=>{
class Person { // 父类
name:string
age:number
constructor(name:string="芋圆",age:number=18) {
this.name = name
this.age = age
}
say(str:string) {
console.log(str);
}
}
class Student extends Person{
constructor(name:string,age:number) {
// 调用父类中的构造函数，使用super
super(name,age)
}
重写父类中方法
say() {
// 调用父类的方法
super.say('haha')
}
}
const p = new Person()
console.log(p);
const s = new Student('小红',17)
console.log(s)
s.say()
})()
多态
父类型的引用指向子类型的对象，不同类型的对象针对相同的方法，产生了不同的行为
(()=>{
class Animal {
name:string
constructor(name:string){
this.name = name
}
eat(str:string = '吃饭') {
console.log(this.name + str);
}
}
class Dog extends Animal {
constructor(name:string) {
super(name)
}
eat(str:string = '舔着吃') {
console.log(this.name + str);
}
}
class Pig extends Animal {
constructor(name:string) {
super(name)
}
eat(str:string = '大口吃') {
console.log(this.name + str);
}
}
let ani:Animal = new Animal('动物')
console.log(ani);
ani.eat()
let dog:Dog = new Dog('小狗')
console.log(dog)
dog.eat()
let pig:Pig = new Pig('小猪')
console.log(pig)
pig.eat()
console.log('==========');
// 可以使用父类类型创建子类对象
let dog1:Animal = new Dog('小狗')
console.log(dog1);
let pig1:Animal = new Pig('小猪')
console.log(pig1);
console.log('===========')
// 该函数需要的参数是Animal类型的
function show(ani:Animal) {
ani.eat()
}
show(dog1)
show(pig1)
})()
类：公共，私有与受保护的修饰符
class Person {
public name:string
public constructor(name:string) {
this.name = name
}
public say() {
console.log(this.name);
}
}
const p = new Person('芋圆')
// 类外部可以访问类中的属性成员，因为类中的成员都有自己的默认访问的修饰符public
console.log(p.name);
// 定义一个子类
class Student extends Person {
constructor(name:string) {
super(name)
}
say() {
console.log(this.name);
}
}
=====================================
外部和子类中无法访问这个成员数据
class Person {
private name:string
}
// 外部无法访问这个成员的数据,子类中是可以
class Person {
protected name:string
}
readonly修饰符
readonly修饰符：是一个关键字,对类中的属性成员进行修饰,修饰后就不能在外部被随意的修改了
(()=>{
class Person {
readonly name:string = '芋圆'
constructor(name:string) {
this.name = name
构造函数中可以对只读的属性成员数据进行修改
this.name = '芋圆'
}
say() {
console.log(this.name);
类中普通方法中,不能修改readonly修饰的成员属性值
// this.name = ''
}
}
const p: Person = new Person('小明')
// 此时不能修改，name是只读的
p.name = '小红'
})()
如果构造函数中没有任何参数,类中的属性成员此时已经使用readonly进行修饰了,那么外部也是不能对这个属性值进行修改
(()=>{
class Person {
readonly name:string = '芋圆味'
constructor() {
}
say() {
console.log(this.name);
}
}
const p: Person = new Person()
// 此时不能修改，name是只读的
p.name = ''
})()
修饰符 修饰类中的构造函数中的参数(参数属性)
name参数中,使用public进行修饰后,那么Person类中就有一个公共的name属性成员了
class Person {
constructor(public name:string) {
this.name = name
}
}
const p: Person = new Person('芋圆味')
p.name = ''
name参数中,使用private进行修饰后,那么Person类中就有一个私有的name属性成员了,外部不能访问
class Person {
constructor(private name:string) {
this.name = name
}
}
const p: Person = new Person('芋圆味')
// 此时不能修改，属性name为私有属性，只能在类“Person”中访问
// p.name = ''
name参数中,使用protected进行修饰后,那么Person类中就有一个受保护的name属性成员了,外部不能访问
class Person {
constructor(protected name:string) {
this.name = name
}
}
const p: Person = new Person('芋圆味')
// 此时不能修改，属性name受保护，只能在类“Person”及其子类中访问
// p.name = ''
class Person {
constructor(readonly name:string = 'aaa') {
this.name = name
}
}
const p:Person = new Person()
// 此时不能修改，name是只读的
// p.name = ''
存取器
存取器：让我们可以有效的控制对 对象中的成员的访问,通过getter,setter来进行操作
(()=>{
class Person {
firstName:string
lastName:string
constructor(firstName:string,lastName:string) {
this.firstName = firstName
this.lastName = lastName
}
// 读取器
get fullName():string {
return this.firstName + '-' + this.lastName
}
// 设置器
set fullName(newVal:string) {
let names = newVal.split('-')
this.firstName = names[0]
this.lastName = names[1]
}
}
const p = new Person('as','aa')
console.log(p.fullName); // 获取
p.fullName = '诸葛-孔明' // 设置
console.log(p.fullName);
console.log(p);
})()
静态成员
静态成员：在类中通过static修饰的属性或方法,就是静态的属性及静态的方法,也叫：静态成员
通过： 类名.静态属性 类名.静态方法
class Person {
类中默认有一个内置name属性,此时会出现错误提示信息
static name1:string = '芋圆味'
constructor(name:string) {
}
static say() {
console.log(this.name1); // 芋圆味
}
}
访问静态的属性和方法
console.log(Person.name1); // 芋圆味
Person.say()
抽象类
抽象类：包含抽象方法(抽象方法一般没有任何具体内容的实现),也可以包含实例方法,抽象类是不能实例化的
作用：为了让子类进行实例及实现内部抽象方法。都是为子类服务的
(()=>{
abstract class Animal {
// 抽象属性
abstract name:string
// 抽象方法
// 抽象方法一般没有任何具体内容的实现,会报错
// abstract eat() {
// console.log('跳着吃');
// }
abstract eat():any
// 实例方法
say() {
console.log('您好');
}
}
// 子类
class Dog extends Animal {
name:string = '小狗'
// 重新实现抽象类的方法,此时这个方法就是当前Dog类的实例方法
eat() {
console.log('舔着吃');
}
}
const dog = new Dog()
console.log(dog.name); // 小狗
})()
函数
函数: 封装了一些重复使用的代码
函数声明：命名函数 和 匿名函数
# 命名函数
function fn1(x:number,y:number):number{
return x + y
}
console.log(fn1(1,2)); // 3
# 匿名函数
const fn2 = function(x:number,y:number):number{
return x + y
}
# 完整写法
(x:number,y:number)=>number 这个函数类型
const fn3:(x:number,y:number)=>number = function(x:number,y:number):number {
return x + y
}
console.log(fn3(10,10)); // 20
可选参数、默认参数、剩余参数
可选参数：lastName?:string
默认参数：firstName:string='周'
剩余参数：...args:string[]
const get = function(firstName:string='周',lastName?:string):string {
if(lastName) {
return firstName + '_' + lastName
} else {
return firstName
}
}
console.log(get()); // 周
剩余参数,一定要放在最后面
...args:string[]剩余的参数，放在一个字符串的数组中,args里面
function show(str:string,...args:string[]) {
console.log(str,args); // a ['b','c','d']
}
show('a','b','c','d')
函数重载
函数重载：函数名字相同,函数参数及个数不同
需求：我们有一个add函数，可以接收2个string类型的参数进行拼接，也可以接收2个number类型参数进行相加
函数重载声明
(()=>{
function add(x:string,y:string):string
function add(x:number,y:number):number
function add(x: string | number,y: string | number): string | number {
if(typeof x === 'string' && typeof y === 'string') {
return x + y
} else if(typeof x === 'number' && typeof y === 'number') {
return x + y
}
}
console.log(add('你','好')); // 你好
console.log(add(10,10)); // 20
})()
泛型
泛型: 在定义函数、接口、类的时候不能预先确定要使用的数据类型，而是在使用函数、接口、类的时候才能确定
其他
声明文件
当使用第三方库时，我们需要引入它的声明文件，才能获得对应代码补全、接口提示等功能。
下载插件:
npm install jquery
下载声明文件：
npm install @types/jquery --save-dev
使用：
jQuery('选择器')
就会出现以下提示消息：