TypeScript

72 阅读4分钟
  1. Object类型 Object类型值得是 数组,对象,函数,即处了基本类型
const foo:object = function(){} 

//对象的限制,可以使用字面量语法的形式, 要求赋值的对象结构需要和类型结构完全一致,更专业的方式对对象进行限制,而是选择接口
const obj:{foo:number, bar:string} = {foo:12,bar:'string'}
  1. 数组类型
    • 有两种方式
    • 第一种是用Array泛型 <>
    • 第二种使用元素类型加上[]
const arr1:Array<number> = [1,2,3]
const arr2:number[] = [1,2,3]
function sum(...args) {
    // reduce方法的第一个参数箭头函数,第一个参数 是上一次的计算总和,current是当前要计算的值,
    // reduct 方法的参数是prev 的默认值,即初始值 
    return args.reduce((prev,current)=> prev+current ,0)
}
sum(1,2,3)
  1. typeScript 元组类型
    • 确定元素数量,以及每个元素类型的数组
const tuple:[number,string] = [12,'zce']
// const age = tuple[0]
// const name = tuple[1]
// 或者解构的方式
const [age,name] = tuple

  1. typeScript 枚举类型
enum postStatus {
    draft=0,
    published=1,
    unpublished=2
}
postStatus[draft]
  1. typeScript 函数类型
    • 声明式函数
// 实参个数和类型必须和形参一致
function func1(a:string,b:number):string {
    return '124'
}
// 动态参数,以下两种形式 b的实参都可以选择传或者不传
// 不管是可选参数,还是默认参数,都必须出现在其他参数的最后
// 第一种形式 可选参数
function func2(a:string,b?:number):string {
    return '124'
}
// 第二种形式 默认参数
function func3(a:string,b=10):string {
    return '124'
}
//  任意个参数,使用剩余参数
function fun4(...rest){
    return '124'
}
  • 表达式函数
const fun5:(a:string,b:number) => string = function(a:string,b:number):string{
    return '123'
}

  1. typeScript 任意类型
    • any
function stringfiy(value:any){
    return JSON.stringify(value)
}
stringfiy(123)

  1. typeScript 隐式类型推断
    • 第一种情况 : 声明时未类型注解且未赋值,相当于声明变量是any类型
    • 第二种情况:声明时未类型注解且赋值,则相当于声明变量 是值得类型
// 声明时,未对变量进行类型注解且赋值,即可推断出age是数字类型,相当于生命age是数字类型,后续如果赋值成其他类型就出错
let age = 18
age = '123'
//  声明时,未对变量进行类型注解且未赋值,相当于声明该类型是any
let name 
name = 12
name = '12'

  1. typeScript 类型断言,即主动设置其类型
    • 第一种方式 变量 as 类型
    • 第二种 <类型>变量
const nums = [101,102,134]
// 这里typescript推断 res是number 或者undefined
const res = nums.find(item => item>0)
const num1 = res as number
// 这种方式不适合在jsx语法中
const num2 = <number>res


  1. typeScript 接口:约束对象的结构
    • 可选参数 ?
    • 只读参数 readOnly
    • 动态参数
interface Post {
    title:String,
    content:String,
    subString?:String,  // 可选参数
    readonly summary: String // 一旦初始化后,不能修改
}
function PrintPost(post:Post) {
    console.log(post.title);
    console.log(post.content);  
}
PrintPost({title: 'qianduan ',content:'chenyun',summary:'china'})
interface Cache {
    [prop:string]:string
}
const cache:Cache = {
}
cache.foo = 'value1'
cache.bar = 'value2'
  1. typeScript 类的使用 - 用来描述一类具体对象的抽象成员 - 类型的属性可以在声明的时候赋值,或者是在初始化就要赋值
class Person {
    name:string
    age:number
    constructor(name: string,age:number){
        this.name = name
        this.age = age
    }
    sayHi(msg:string){
        console.log('name:',this.name);
        
    }
}

  1. typescript 类的访问修饰符 - 属性和constructor 是public类型 - public 实例化对象直接访问 - private 不能继承,只能在类内部访问,实例化对象不可以访问, - protected 可以继承,子类只能在内部使用,实例化对象不可以访问 - 构造器也能被私有化,此时只能在类中创建静态函数,然后再静态函数实例化对象返回
class Person {
    name:string
    private age:number
    protected gender:boolean

    constructor(name: string,age:number){
        this.name = name
        this.age = age
        this.gender = true
    }
    sayHi(msg:string){
        console.log('name:',this.name);
        
    }
}
class Student extends Person {
    constructor(name:string,age:number){
        super(name,age)
        // 因为私有属性,不被继承,所以访问不到
        // console.log(this.age);
        // 保护属性可以继承,只能在内部访问
        console.log(this.gender);
    }
}

const person = new Person('linshu',28) 
const student = new Student('feiliu',12)
// person.age // 私有属性 不可以访问
// student.gender //  保护属性,子类只能在内部使用

class XiaoStudent extends Person {
   private constructor(name:string,age:number) {
    super(name,age)
   }
   static create(name:string,age:number) {
    return new XiaoStudent(name,age)
   }
}
// 构造函数被私有化,只能同构静态方法去做
// const xiaoStudent = new XiaoStudent()
const xiaoStudent = XiaoStudent.create('nihuang',26)
  1. 类的只读属性
    • readOnly,如果同事存在访问修饰符和只读属性,则只读属性只能在访问修饰符的后面
  2. 类与接口
    • 用接口对类进行抽象
interface Eat {
    eat(food:string):void
}
interface Run {
    run(distance:number):void
}

class Person implements Eat,Run {
   eat(food: string): void {
       console.log('优雅的进餐',food);
   }
   run(distance: number): void {
       console.log('直立行走');
       
   }
}

class Animal implements Eat,Run {
    eat(food: string): void {
        console.log('粗鲁的进餐',food);
    }
    run(distance: number): void {
        console.log('爬着');
        
    }
 }
  1. typescript 抽象类
    • abstract 该类只能被继承,不能被实例化
    • 抽象类的方法 也可以被抽象,即不需要写具体的实现方法,不需要方法体
 
abstract class Animal  {
    eat(food:string){
        console.log('eat');
        
    }
    abstract run(distance:number):void
}
class Dog extends Animal {
    run(distance: number): void {
        console.log('run');
        
    }
}
const dog = new Dog()
dog.eat('gutou')
dog.run(222)