记录一下开始ts学习-typescript基础

基础类型

let flag:boolean = false;
let count:number = 0;
let name:string = 'zhanglei';
let und:undefined = undefined;
let nu:null = null;
// 数组
let array:number[] = [10, 20, 30];
let array:Array<number> = [1, 2, 3];
// 元组 类型 数据个数 位置 
let array: [string, number, boolean] = ['zhang', 20, true] 
// 枚举
enum Color {
    red,
    green,
    blue
}
let color: Color = Color.red // 0
// any 任意类型
let name:any = 'zhanglei'
// void 没有任何类型 
// 声明函数的时候 代表没有返回值
function show():void {
    console.log("zhanglei")
}
// object 
function fn2(obj:object):object {
  console.log('fn2()', obj)
  return {}
  // return undefined
  // return null
}
console.log(fn2(new String('abc')))
// console.log(fn2('abc') // error
console.log(fn2(String))
// 联合类型
// 定义一个函数得到一个数字或字符串值的字符形式值
function getString(str:number | string):string {
    return str.toString()
} 
// 类型断言 <类型>变量名 
// 定义一个函数得到一个数字或字符串的长度
function getString(str:number | string):number {
    return (<string>str).length ? (<string>str).length: str.toString().length
    // 或者
    return (<string>str).length ? (str as string).length: str.toString().length
}
// 类型推断 

• 类型注解：轻量级 是一种约束
• 接口 interface：一种能力 一种约束 一种规范 一种规则
• ?可选 readonly只读

// 定义一个接口
interface IPerson {
    firstName: string
    lastName: string
}
// 输出
function showName(person: IPerson) {
    return IPerson.firstName + IPerson.lastName
}
// 定义一个对象
const person = {
    firstName: "张磊",
    lastName: "先森"
}
// 需求: 创建人的对象, 需要对人的属性进行一定的约束
// id是number类型, 必须有, 只读的
// name是string类型, 必须有
// age是number类型, 必须有
// sex是string类型, 可以没有
// 定义一个接口 该接口作用person对象的类型使用，限定或约束该对象中属性数据
interface IPerson {
  readonly id: number
  name: string
  age: number
  sex?: string
}
// 定义一个对象，该对象的类型就是我定义的接口IPerson
const person: IPerson = {
  id: 1,
  name: 'tom',
  age: 20,
  sex: '男'
}
// 函数类型
// 通过接口的方式作为函数的类型来使用
// 定义一个接口 用来作为某个函数的类型使用
interface searchFn{
    (source: string, subString: string): boolean
}
// 定义一个函数 该类型就是上面定义的接口
const searchString: searchFn = function(source: string, subString: string): boolean {
    return source.search(subString) > -1
}
// 调用函数
console.log(searchString('haha')) // false

// 类类型
// 类的类型可以通过接口来实现
// 定义一个接口
interface IFly {
    // 该方法没有任何实现（什么都没有）
    fly()
}
// 定义一个类 这个类的类型就是上面定义的接口
class Person implements IFiy {
    // implements 实现接口中的方法
    fly() {
        console.log('我是张磊')
    }
}
// 实例化对象
const person = new Person()
person.fly()

// 类实现多个接口 多多个接口进行约束
interface IPlay {
    play()
}
class Person implements IFly, IPlay {
    fly() {
        console.log('接口1')
    }
    play() {
        console.log('接口2')
    }
}
// 接口可以继承其他的多个接口
// 定义一个接口 继承其他多个接口
interface IMore extends IFly, IPlay {}
class person implements IMore {
    fly() {
        console.log('接口1')
    }
    play() {
        console.log('接口2')
    }
}
// 接口和接口之间叫继承（extends）
// 类和接口之间叫实现（implements）

类

// 定义一个类型
class User {
    // 定义公共字段
    name: string
    // 定义一个构造函数
    constructor(name: string) {
        // 更新数据
        this.name = name
    }
    getName(): string {
        return `我是${this.name}`
    }
}
// 实例化对象 进行初始化操作
const user = new User('张磊')
user.getName()

// 继承 类与类之间的关系
// 定义一个类 继承User
class Info extends User {
    constructor(name: string) {
        super(name)
    }
    getName() {
        super.getName('小张')
    }
}
const in = new Info('张磊')
in.getName()
// 子类中可以调用父类中的构造函数，用super关键字（包括调用父类中的实例方法，也可以使用super）
// 子类中可以重写父类方法

多态

• 父类型的引用指向了子类的对象 不同类型的对象针对相同的方法 产生不同的行为

// 父
class Animal {
    name: string
    constructor(name:string) {
        this.name = name
    }
    run(distance: number = 0) {
        console.log(`跑了${distance}米`)
    }
}
// 子
class Dog extends Animal {
    constructor(name: string) {
        super(name)   
    }
    run(distance: number = 5) {
        console.log(`跑了${distance}米`)
    }
}
// 子
class Pig extends Animal {
    constructor(name: string) {
        super(name)   
    }
    run(distance: number = 10) {
        console.log(`跑了${distance}米`)
    }
}
// 实例化父类对象
const ani: Animal = new Animal('动物')
ani.run()
// 实例化子类对象
const dog: Dog = new Dog('大黄')
dog.run()
// 实例化子类对象
const pig: Pig = new Pig('八戒')
pig.run()

//  父类和子类的关系：父子关系 此时 父类类型创建子类的对象
const dog1: Animal = new Dog('小黄')
dog1.run()
const pig1: Animal = new Pig('小黄')
pig1.run()

修饰符

• 类中的成员的修饰符 主要描述类中的成员（属性，构造函数，方法）的可问性
• public 类中成员默认的修饰符 公共的 任何位置都可以访问
• private 私有的 外部无法访问这个成员数据 子类中也是无法访问的
• protected 受保护的 子类可以访问该成员的数据
• readonly 只读 关键字 不能在外部随意修改 构造函数中可以对只读的属性成员进行修改

class Person {
    private name: string
    public constructor(name: string) {
        this.name = name
    }
    public getName() {
        console.log(this.name)
    }
}
const person = new Person("zhanglei")
person.getName()

存取器

• 有效的控制对对象中的成员的访问 通过getters setters

class Person {
    firstName: string
    lastName: string
    constructor(firstName: string, lastName: string) {
        this.firstName = firstName
        this.lastName = lastName
    }
    // 读取器
    get fullName() {
        return this.firstName + "-" + this.lastName
    }
    // 设置器
    set fullName(var) {
        let names = val.split('-')
        this.firstName = names[0]
        this.lastName = names[1]
    }
}
const person = new Person('张磊', '先森')
console.log(person.fullName)
person.fullName = '王者-荣耀'
console.log(person.fullName)

静态成员

• 在类中通过static修饰的属性或者方法
• 静态成员在使用的时候是通过类名.来调用

class Person {
    // 类中默认有一个内置的name属性 
    static name1: string
    constructor() {}
    static getName() {
        console.log('zhanglei')
    }
}
console.log(Person.name1)
Person.name1 = '磊'
console.log(Person.getName())

抽象类

• 包含抽象方法 也可以包含实例方法 抽象类是不能被实例化 为了让子类进行水花及实现内部的抽象方法
• 为子类服务的

// 定义一个抽象类
abstract class Animal {
    // 抽象方法
    abstract ect()
    play() {
        console.log('来玩啊')
    }
}
// 定义一个子类（派生类）
class Dog extends Animal {
    eat() {
        console.log('haha')
    }
}
//实例化Dog对象
const dog:Dog = new Dog()
dog.eat()
// 调用抽象类中的实例方法
dog.play()

函数

泛型

• 在定义函数、接口或类的时 不预先指定具体的类型 使用的时候再指定具体类型

function getData<T>(value:T):T{
    return value 
}
// 使用泛型
getData<number>(123) // 约束传入和返回的类型为number
getData<string>('zhanglei')  // 约束传入和返回的类型为string

// 定义泛型接口
interface IUser<T> {
    list:Array<T>
    add:(t:T) => T
    getUersName:(name:string) => T
}
class UserList implements IUser<User>{
     //用来存多个User类型的用户信息对象
     list:Array<User> =[]
     add(user:User):User {
     user.id =Date.now() +Math.random()
     //将用户信息添加
     this.list.push(user)
          return user
     }
     // 根据name查用户
     getUersName(name:string):User {
         return this.list.find(item => item.name === name)
     }
}