TS基础知识

typescript

2. 变量和数据类型

2.1 变量

• 变量语法

// let 变量名: 变量类型 = 值  letstr: string ='fly'

• PS在ts中，为变量指定了类型，就只能给该变量设置相同类型的值

letstr: string ='fly'

  str =1// 报错 Type '1' is not assignable to type 'string'.

2.2 数据类型

• 原有类型string、number、boolean、Array、null、undefined、Symbol、Object 、function
• 新增类型tupel元组 enum枚举 any任意类型 never void

2.2.1 undefined 类型

letstr:undefined=undefined

2.2.2 string 类型

letstr: string ='fly'

2.2.3 number 类型

letstr: number =1

2.2.4 boolean 类型

// ts中的布尔类型只能是true或者falseletstr: boolean =true

2.2.5 Array 类型

• 使用方式

// 方式1: let 数组变量名:数据类型[] = [值1,值2]vararr: number[]=[1,2,3,4]// 方式2: let 数组变量名:Array<类型> = [值1,值2]vararr: Array<number>=[1,2,3,4]

• 特点元素类型固定长度不限制

2.2.6 tupel(元组) 类型

• 概念一个规定了元素数量和每个元素类型的”数组“，而每个元素的类型可以不相同。
• 使用方式

// 方式1: let 元组名:[类型1,类型2,类型3] = [值1,值2,值3]letarr:[string, number, boolean]=['fly',18,true]

• 为什么需要元组？TS中数组元素类型必须一致，如果需要不同元素，可以使用元组。
• 特点声明时，需要制定元素的个数声明时，需要为每个元素设置类型

2.2.7 enum(枚举) 类型

• 问题：性别标识 男（1），女（2），未知（3）
• 使用方式

// 方式1   enum Sex {
    Boy=0,
    Girl=1,
    Unknown=2}// 方式2,枚举值会自动从0开始生成enum Sex {
    Boy,
    Girl,
    Unknown
  }

  console.log(Sex)// 使用枚举letfly: Sex = Sex.Boy
  console.log(fly)

2.2.8 any 类型

• 概念any 代表任意类型，一般在获取DOM的时候使用
• 使用示例

lettextName: any = document.getElementById('txtName')

2.2.9 void 类型

• 概念void 代表没有类型，一般用于无返回类型的函数中
• 使用示例

// 没有返回值functionshow():void{
    console.log(1)}// 返回stringfunctionshow(): string {return'str'}
  console.log(show())

2.2.10 never 类型

• 概念never代表不存在的值的类型，一般用于抛出异常或者无限循环的 函数返回类型
• 使用示例

// 死循环functionshow(): never {while(true){}}// 抛出异常functionshow(): never {thrownewError('err')}

• PSnever类型是ts中的底部类型，所有类型都是never的子类型，所有never类型可以赋值给任意类型

2.2.11 联合类型

• 概念联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。注意：只能赋值指定的类型，如果赋值其它类型就会报错。
• 使用示例

varval:string|number 
  val =12 
  console.log("数字为 "+ val) 
  val ="Runoob" 
  console.log("字符串为 "+ val)

2.3 类型推论

• 概念ts 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论
• 示例代码

let a ='fly'// 推断出a是string类型所有不能再赋值为number类型
  a =1// Type '1' is not assignable to type 'string'.

3. ts 函数

3.1 ts函数返回值和参数

3.1.1 返回值

function函数名():返回值类型 {}let变量名:变量类型 =函数名()

3.1.2 形参

function函数名(形参1:类型,形参2:类型):返回值类型 {}let变量名:变量类型 =函数名(实参1,实参2)

• 小结 函数必须定义返回值类型，如果没有返回值类型，则定义返回值类型为void实参 和 形参 的 类型 保持一致实参 和 形参 的 数量 保持一致

3.2 ts可选参数和默认参数及剩余参数

3.2.1 可选参数

function函数名(形参?:类型):返回值类型 {}// 调用可以不传参数  函数名()// 调用传递参数  函数名(实参)

3.2.2 默认参数

function函数名(形参1:类型=默认值1,形参2:类型=默认值2):返回值类型 {}// 调用可以不传参数  函数名()// 调用传递1个参数  函数名(实参)// 调用传递2个参数  函数名(实参1,实参2)// 只传递第2个实参函数名(undefined,实参2)

3.2.3 剩余参数

• 使用语法

function函数名(形参1:类型,形参2:类型,...形参2:类型[]):void{
    console.log(a+b)}

• 示例代码

functionshow(x: number,y: number,...rest: number[]):void{letresult: number = x + y

  for(let ele of rest){
    result += ele
  }
  console.log(result)}show(1,2)show(1,2,3,4,4,)

• PS剩余参数 只能 定义有一个 剩余参数 只能 定义为数组 剩余参数 只能 定义在形参列表最后

3.2.4 重载

• 使用语法

// 上边是声明functionadd(arg1: string,arg2: string): string
functionadd(arg1: number,arg2: number): number

// 下边是实现//function add(arg1: any, arg2: any):any {// 或者functionadd(arg1: string | number,arg2: string | number):any {// 在实现上我们要注意严格判断两个参数的类型是否相等if(typeof arg1 ==='string'&&typeof arg2 ==='string'){return arg1 + arg2
  }elseif(typeof arg1 ==='number'&&typeof arg2 ==='number'){return arg1 + arg2
  }}

console.log(add('fly','zs'))
console.log(add(1,2))

4. ts class（类）

封装、继承、多态

4.1 基本使用方式

classPerson{// 成员变量name: string
  age: number
  // 构造函数constructor(name: string,age: number){this.name = name
    this.age = age
  }// 成员方法say():void{
    console.log(this.name,this.age)}}let person =newPerson('fly',18)

person.say()

4.2 封装

classPerson{// 成员变量name: string
  age: number
  // 构造函数constructor(name: string,age: number){this.name = name
    this.age = age
  }// 封装getName(): string {returnthis.name
  }setName(name: string):void{this.name = name
  }}let person =newPerson('fly',18)
console.log(person.getName())

4.3 继承

classPerson{// 成员变量name: string
  age: number
  // 构造函数constructor(name: string,age: number){this.name = name
    this.age = age
  }// 封装getName(): string {returnthis.name
  }setName(name: string):void{this.name = name
  }}// 继承classZSextendsPerson{constructor(name: string,age: number){super(name, age)}}let zs =newZS('zs',18)

console.log(zs.getName())

4.4 多态

4.4.1 基本使用

abstract classPerson{// 成员变量name: string
  age: number
  // 构造函数constructor(name: string,age: number){this.name = name
    this.age = age
  }// 封装getName(): string {returnthis.name
  }setName(name: string):void{this.name = name
  }//非抽象方法，无需要求子类实现、重写sayHai(){
    console.log('你好，'+this.getName()+'，qf你最胖')}
  abstract run(): any
}// 继承classZSextendsPerson{constructor(name: string,age: number){super(name, age)}//非抽象方法，无需要求子类实现、重写sayHai(){
    console.log('你好，'+this.getName()+'，qf你最骚')}run():void{
    console.log(this.getName()+'跑起来')}}let zs =newZS('zs',18)
zs.sayHai()
zs.run()// 继承classLSextendsPerson{constructor(name: string,age: number){super(name, age)}//非抽象方法，无需要求子类实现、重写sayHai(){
    console.log('你好，'+this.getName()+'，qf你最骚')}run():void{
    console.log(this.getName()+'飞起来')}}let ls =newLS('李四',18)
ls.sayHai()
ls.run()

4.4.2 特点

抽象类不能够被实例化

子类中必须定义对应的抽象方法

4.5 类修饰符

4.5.1 常用修饰符

• public 公有类型： 在当前类里面、子类里面、外部类都可以访问
• protected 保护类型：在当前类里面、子类里面可以访问，外部类无法访问
• private 私有类型：在当前类里面可以访问，子类里面和外部类无法访问
• ps: 如果不添加修饰符，默认为公有类型

4.5.2 实例代码

classPerson{// 成员变量publicname: string
  protectedage: number
  privatesex: string
  // 构造函数constructor(name: string,age: number,sex: string){this.name = name
    this.age = age
    this.sex = sex
  }say():void{
    console.log(this.name)}}classZSextendsPerson{constructor(name: string,age: number,sex: string){super(name, age, sex)}say():void{
    console.log(this.age +'111')}}const zs =newZS('zs',18,'男')

4.6 静态属性和静态方法

4.6.1 基本使用

classPerson{// 成员变量publicname: string
  protectedage: number
  privatesex: string
  static staticName ='zs'// 构造函数constructor(name: string,age: number,sex: string){this.name = name
    this.age = age
    this.sex = sex
  }say():void{
    console.log(this.name)}staticrun():void{
    console.log(this.staticName)}}
Person.staticName

4.6.2 特点

静态方法中不能使用类型属性，但是可以使用静态属性

5. 接口

在面向对象编程中，接口是一种规范的定义，它定义了行为和动作规范
在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批所需要遵守的规范
接口不关心这些类内部状态数据，也不关心这些类里面方法的实现细节它只规定了这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。
typescript中的接口类似java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等

5.1 属性类接口

5.1.1 基本使用

// 使用interface 定义传入的对象必须携带firstname和lastname，以及对应的类型 interfaceFullName{firstname: string
  lastname: string
}functionprintName(obj: FullName){
  console.log(obj.firstname + obj.lastname)//限制可使用的参数
  console.log(obj.firstname + obj.lastname + obj.age)//  报错 Property 'age' does not exist on type 'FullName'.}printName({firstname:'zs',lastname:'ls'})// 如果想设置其他的属性需要定义对象接收// const obj = {//   age: 18,//   firstname: 'zs',//   lastname: 'ls'// }// printName(obj)

5.1.2 可选属性

1. 基本使用

interfaceFullName{firstname: string
  // 设置可选属性
  lastname?: string
}functionprintName(obj: FullName){
  console.log(obj.firstname)}printName({firstname:'ls'})

1. 案例

interfaceConfig{type: string
  url: string
  data?: string
  dataType?:'json'success: Function
  // 或者写成// success(res: any): void}functionajax(config: Config){let xhr =newXMLHttpRequest()
  xhr.open(config.type, config.url)
  xhr.send(config.data)
  xhr.onreadystatechange=function(){if(xhr.readyState ===4&& xhr.status ===200){if(config.dataType ==='json'){
        config.success && config.success(JSON.parse(xhr.responseText))}else{
        config.success && config.success(JSON.parse(xhr.responseText))}}}}ajax({type:'get',url:'http://jsonplaceholder.typicode.com/todos',success(res: Object){
    console.log(res)}})

5.2 函数类型接口

interfaceencrypt{(key: string,val: string): string
}constmd5: encrypt =(key: string,val: string):string=> key + val

console.log(md5('name','zs'))

5.3 可索引接口

5.3.1 特性

可索引接口,主要是对数组和对象的约束

5.3.2 示例代码

// 约束数组interfaceUserArr{[index: number]: string
}letarr: UserArr =['fly','sky','ssr']

console.log(arr[0])// 约束对象interfaceUserObj{[index: string]: string
}constobj: UserObj ={'name':'fly'}

console.log(obj.name)

5.4 类类型接口

interfacePerson{name: string
  age: number
  run():void}classZSimplementsPerson{name: string
  age: number
  constructor(name: string,age: number){this.name = name
    this.age = age
  }run():void{
    console.log(this.name +'吃饭第一名')}}const zs =newZS('张三',18)
zs.run()

5.4 接口扩展

5.4.1 特性

接口可以继承接口

5.4.1 示例代码

1. 方式1

// 定义父接口interfacePerson{eat():void}// 继承Person接口interfaceFatherextendsPerson{run():void}// 实现接口classZSimplementsFather{name: string
  constructor(name: string){this.name = name
  }eat(){
    console.log(this.name +'吃的最多')}run(){
    console.log(this.name +'跑的最快')}}const zs =newZS('张三')

zs.eat()
zs.run()

1. 方式2

interfacePerson{eat():void}// 继承接口interfaceFatherextendsPerson{run():void}// 实现接口classZS{name: string
  constructor(name: string){this.name = name
  }eat(){
    console.log(this.name +'吃的最多')}run(){
    console.log(this.name +'跑的最快')}}classLSextendsZSimplementsFather{constructor(name: string){super(name)}}// const zs = new ZS('张三')// zs.eat()// zs.run()const ls =newLS('李四')
ls.run()

5.5 泛型

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

5.5.1 泛型变量、泛型函数、泛型类

泛型可以支持不特性的类似，一般使用T表示

泛型具体的类型是调用该方法的时候决定的

1. 泛型变量、泛型函数

function getData<T>(value:T):T{return value
}

console.log(getData<number>(2))

1. 泛型类

classMinClass<T>{publiclist:T[]=[]add(value:T):void{this.list.push(value)}min():T{let minNum =this.list[0]this.list.forEach(item=>{if(minNum > item){
        minNum = item
      }})return minNum
  }}const m1 =newMinClass<number>()

m1.add(11)
m1.add(1)
m1.add(3)

console.log(m1.min())const m2 =newMinClass<string>()

m2.add('a')
m2.add('b')
m2.add('c')

console.log(m2.min())

5.5.2 泛型接口

1. 方式1

// 方式1 interfaceConfigFn{<T>(value:T):T}// let getData: ConfigFn = function <T>(value: T): T {//   return value// }letgetData: ConfigFn =<T>(value:T):T=> value
console.log(getData<string>('fly'))

1. 方式2

interfaceConfig<T>{(value:T):T}// const getData: Config<string> = function <T>(value: T): T {//   return value// }constgetData: Config<string>=<T>(value:T):T=> value

console.log(getData('fly'))

5.5.3 泛型类

1. 类参数类型

classUser{
  username!: string
  password!: string
}classDB{add(user: User): boolean {
    console.log(user)returntrue}}const user =newUser()

user.username ='fly'
user.password ='123456'const db =newDB()
db.add(user)

1. 泛型类参数类型

// 泛型类参数类型classDB<T>{add(info:T): boolean {
    console.log(info)returntrue}}classUser{
  username!: string
  password!: string
}classGoods{
  title!: string
  ctime!: string
}var user =newUser()
user.username ='fly'
user.password ='123456'var goods =newGoods()
goods.title ='可爱多'
goods.ctime ='2020-09-08 14:25:03'var db1 =newDB<User>()
db1.add(user)var db2 =newDB<Goods>()
db2.add(goods)