typescript学习！

1.基础数据类型

//布尔类型
let flag: boolean = true
flag = false
//数字类型
let a: number = 10 //十进制
let a1: number = 0b1010 //二进制
let a3: number = 0o12 //八进制
let a4: number = 0xa //16进制
a = 11
//字符串类型
let str: string = '123'
str = '456'
//undefined和null
let un: undefined = undefined
let nu: null = null
//undefined和null还可以作为其它类型的子类型
let b:number = undefined
let str1:string = null

2.数组和对象类型

let arr1: number[] = [1, 2, 3]

//泛型写法
let arr2: Array<number> = [10, 20, 30]

//接口数组类型
interface InewArray{
    [index:number]:number
}
let arr:InewArray = [1,2,3,4]

let obj: object = {}
obj = null
obj = undefined
obj = []
obj = new String()
obj = String

//在属性名后面加上? 表示属性是可选的
let b: { name: string, age?: number }
b = { name: '孙悟空', age: 18 }

//[propName：string]:any 表示任意类型的属性
let c: { name: string, [propName: string]: any }
c = { name: '猪八戒', age: 18, gender: '男' }

//元组 是固定长度的数组
let h: [string, string];
h = ['hello', 'abc']

//enum枚举
enum Gender {
    Male = 0,
    Female = 1
}
let i: { name: string, gender: Gender };
i = {
    name: "孙悟空",
    gender: Gender.Male
}

3.any和void类型

//任何类型
let h: any = 123
h = true
h = '123'
h = {}
h = []
let newArr: any[] = [1, 2, 3, 4, "", true]

//void空值 表示没有任何返回值的函数
function fun1(): void {
    console.log(123)
}


//没有任何类型 没有返回值的函数
let v: void = undefined



//未知类型
//unknow是一个类型安全的any 不能赋值给其他变量
let e:unknown
e = 123
e= 'aaa'
e = true

//never表示用于没有返回结果
function fn2(): never {
    throw new Error('报错了')
}

4.类型推断

//在没有明确指定类型的时候推测一个类型
//1.定义变量的时候,直接给变量赋值,则定义类型为对应的类型
//2.定义变量的时候,没有赋值,则定义类型为any类型
let t = 123
//t = "";t报错
let g;
g = 123;
g = ''
g = []
g = {}


//类型断言  可以用来告诉解析器变量的实际类型
let s:unknown;
 s = f as string
 s = <string>f

5.函数-定义函数的方式

//接口函数类型
interface ISearchFunc {
    //(参数：类型，...):返回值类型
    (a: string, b: string): boolean
}
const func1: ISearchFunc = function (a: string, b: string) {
    return a.search(b) !== -1
}

//命名函数 
//：number表示返回值是number类型
function add(a: number, b: number): number {
    return a + b
}
//函数表达式 匿名函数
let add2 = function (a: number, b: number): number {
    return a + b
}

//ts中函数完整写法
let add3: (a: number, b: number) => number = function (a: number, b: number): number {
    return a + b
}


//可选参数 必选参数不能位于可选参数后
let getName = function (x: string, y?: string): string {
    return x + y
}
console.log(getName('张三'))

//默认参数
let getName2 = function (x: string = '李', y?: string, z: string = "你好"): string {
    return x + y + z
}

//剩余参数
function fn(x: string, y: string, ...args: number[]) {
    console.log(x, y, args)
}
fn('', '', 1, 2, 3, 4)


//函数重载：函数名相同 形参不同的多个函数
//函数重载声明
function newAdd(x: string, y: string): string
function newAdd(x: number, y: number): number

function newAdd(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 //数组相加
    }
}

6.类型断言

//定义一个函数,获取到一个数字或者字符串长度
//1, 变量 as 类型
//2 <类型>变量
function getLength(x: string | number): number {
    if ((x as string).length) {
        return (<string>x).length
    } else {
        return x.toString().length
    }
}

//将任何一个类型断言为any
(window as any).a = 10
//将any断言为一个具体的类型
function abc(x:any,y:any):any{
    return x+y
}
let a = abc(1,2) as number
let d= abc('1','2') as string

7.类型别名和字符串字面量类型

type s = string //类型起别名
let srt: s = '123'
//常用于给联合类型起别名
type all = string | number | boolean
let c: all = 123
let b: all = true

//字符串字面量类型
//用来约束取值只能是某几个字符串中的一个
type stringType = "张三" | "李四" | "王五"
let names: stringType = "张三"

8.ts中的类

//类 ：描述了所创建的对象共同的属性和方法

import { th } from "element-plus/es/locale"

//实例化对象
class Person {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    sayHi(str: string) {
        console.log('hi' + str)
    }
}
let p = new Person('张三', 18) //new的时候会执行类中构造方法constructor
p.sayHi('李四')


//类的继承
//扩展现有的类 继承类与类之间的关系
class Animal { //父类
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    sayHi(str: string) {
        console.log('hi' + str)
    }
}
//extends继承
class Dog extends Animal {//子类
    constructor(name: string, age: number) {
        //调用父类的构造函数 使用的是super
        super(name, age)
    }
    //可以调用父类的方法 还可以重写父类的方法
    sayHi() {
        console.log('子类方法')
        //调用父类方法
        super.sayHi('小狗')
    }
}

//类的存取器 使用getter和setter改变属性的赋值和读取行为
//控制对对象成员的访问
class Name {
    firstName: string
    lastName: string
    constructor(firstName: string, lastName: string) {
        this.firstName = firstName
        this.lastName = lastName
    }
    //设置存取器
    get fullName() { //读取器 用来读取数据
        return this.firstName + '-' + this.lastName
    }
    //设置修改器
    set fullName(value) {
        let names = value.split('-')
        this.firstName = names[0]
        this.lastName = names[1]
    }
}
const n = new Name('张', '三')
n.fullName = '张-三丰'
console.log(n.fullName)

//类-静态成员 (只属于类自身的属性和方法)
class A {
    static name1: string
    static sayHi() {
        console.log('hi')
    }
}
console.log(A.name1) //实例化对象拿不到 只有自身能拿到

//类的修饰符
//public 修饰的属性和方法是共有的 可以在任何地方被访问到 默认是public
//private 修饰的属性和方法是私有的 只能够在内部访问 包括子类 可以被继承
//protected 修饰的属性和方法是受保护的 和private类似 区别是在子类中可以被继承访问  
class B {
    public gender: string //公有的属性
    private name1: string //私有的属性
    protected age: number //受保护的属性
    public constructor(name: string, age: number) {
        this.name1 = name
        this.age = age
    }
    public p() {
        console.log(this.name1)
    }
}

//readyonly
class X {
    readonly age: number //只读属性 但是i在构造函数中可以修改
    constructor(age: number) {
        this.age = age
    }
    update() {
        //this.age = age  不能修改 只读属性
    }
}
//abstract 抽象类 是不允许被实例化
abstract class Y { //抽象类
    abstract name: string //抽象属性
    abstract sayHi() //不能够具体实现
}
class Z extends Y {
    name: string
    constructor(name) {
        super()
        this.name = name
    }
    sayHi() {//在子类中具体实现抽象类中的抽象方法
        console.log('hi')
    }
}
//类的类型
class Car {
    name: string
    constructor(name: string) {
        this.name = name
    }
}
class Ben extends Car {
    constructor(name) {
        super(name)
    }
}
const car: Ben = new Car('')
const ben: Car = new Ben('')

9.类和接口

//类实现接口
interface ISing {
    sing()
}
interface IDance {
    dance()
}
class P implements ISing, IDance {//人 唱歌 跳舞
    sing() {
        console.log('唱歌')
    }
    dance() {
        console.log('跳舞')
    }
}
const p1 = new P()
p1.sing()
//接口继承接口
interface IRun{
    run()
}
interface ISwim{
    swim()
}
interface IActive extends IRun,ISwim{

}
class I implements IActive{
    run(){

    }
    swim(){
        
    }
}
//接口继承类
class NewPerson{
    name:string
    constructor(name:string){
        this.name = name
        
    }
    sayHi(){
        console.log('hi')
    }
}
interface IPerson extends NewPerson{
    age:number
}
let person:IPerson= {
    name:'',
    age:18,
    sayHi(){
        
    }
}

//接口合并
interface Cat{
    name:"小橘",
    gender:'女'
}
interface Cat{
    name:"小橘",
    age:3
}
const cat:Cat = {name:'小橘',age:3,  gender:'女'}

10.泛型

//泛型基本使用
//定义一个函数 传入第一个参数是数据 第二个是数量 存放在一个数组中
function getArr<T>(value: T, count: number): T[] {
    const arr: T[] = []
    for (let i = 0; i < count; i++) {
        arr.push(value)
    }
    return arr
}
console.log(getArr(123, 3))//走类型推断
console.log(getArr<string>('123', 3))

//多个泛型参数
//[123,'123'] --> ['123',123]
function updateArr<T, U>(t: [T, U]): [U, T] {
    return [t[1], t[0]]
}
console.log(updateArr(['123', 123]))

//泛型约束
interface ILength {
    length: number
}
function getLength<T extends ILength>(x: T): number {
    return x.length
}
console.log(getLength("123"));

//泛型接口
interface IArr {
    <T>(value: T, count: number): Array<T>
}
// interface IArr<T>{
//     (value:T,count:number):Array<T>
// }
let getArr1: IArr = function <T>(value: T, count: number): T[] {
    const arr: T[] = []
    for (let i = 0; i < count; i++) {
        arr.push(value)
    }
    return arr
}
//泛型类
class Person1<T>{
    name: string
    age: T
    constructor(name: string, age: T) {
        this.name = name
        this.age = age
    }
}
const person1 = new Person1<string>('123', '18')
const person2 = new Person1<number>('123', 18)