学习 TypeScript ，看这篇就够了

// ts 类型为强制类型 不声明也可以自己推断类型 类型必须小写
// 字符串类型  l leixin
let aa: string = 'aa';
// boolean 类型
let ab: boolean = false;
// 数字类型
let ac: number = 1234;
// 任何类型
let ad: any = 'ddd'
// 数字类型数组
let ae: number[] = [1, 23]
// 字符串类型数组
let af1: Array<string> = ["111", "234"]
// 可以任意放数字和字符串
let af: (number | string)[] = [111, '23432']
// 完全限制几位，类型
let ag: [number, string] = [1, '23432'];
// 任意类型数组
let ah: any[] = [true, 11, '2424'];
let ah1: any = [true, 11, '2424', null, undefined];
// 对象类型
let aj: object = {id: 11, name: '张三'}
// 对象参数限制
let aj1: { id: number, name: string } = {id: 11, name: '张三'}
// 对象参数限制 ？ 表示可有可无
let aj2: { id: number, name: string, age?: number } = {id: 11, name: '张三'}
let aj3: { id: number, name: string, age?: number } = {id: 11, name: '张三', age: 13}

// 函数 对型参 和返回限制 表示参数必须 数字类型 返回数字类型
function add(a: number, b: number): number {
    return a + b;
}

// void 表示无返回类型
function add1(): void {

}

// b 代表增加默认值1 可以不用传递第二个参数
function add2(a: number, b: number = 1): number {
    return a + b;
}

// 可以直接使用字面量进行声明,就好像是一个常量，声明之后的值是不可改变的
let a: 10;
a = 12;

// | 表示 或 ，也就是说 b 的值 可以是 men 也可以是 women
let b: 'man' | 'women'
b = 'menwomen'

// 既可以是字符串也可以是布尔值
let c: string | boolean
c = 'hello'
c = true

// any 表示任意类型
let d: any
d = true

// unknow 表示未知类型
let e: unknown
e = 'hello'

let s: string

// any 可以赋值给任意对象 ,这时的s就会被any盖掉
s = d
// 而使用 unknow 进行赋值就会报错
// s = e
// 而我们需要将e的值赋给s，我们需要进行类型判断
if (typeof e === "string") {
    s = e
}

// 或者使用类型断言，将e强行表示为string类型
s = e as string
s = <string>e

// void 表示函数没有返回值 可以不return，但是可以return null underfind
function fn(num): void {
    console.log("void")
}

// 而使用 nerve 表示没有返回值 返回为null和underfind也会报错
function fun(): never {
    return null
}

// 对象
let f: Object
f = {}

// 而使用 {} 就可以对对象的属性进行限制，并且对象的属性也必须相同，而我们在对属性名后面加上一个？ 表示属性可选
let g: { name: string, age?: number }
g = {name: "a"}
g = {sex: "men"}
g = {name: "b", age: 18}

// 通过【abb:string】:any 表示我们的后续属性可以有任意属性
let h: { name: string, [abb: string]: any }
h = {name: 'yueyue', age: 18, sex: "man"}

let i: (a: number, b: number) => number

i = function (n1, n2): number {
    return n1 + n2
}

// arr 数组 字符串数组
let j: string[]
j = ['a', 'b', 'c']
let k: Array<number>
k = [1, 2, 4, 5]

// 元组表示一个已知元素数量和类型的数组，各元素的类型不必相同。
let l: [string, number]
l = ['12', 5]


// 枚举
enum sex {
    men = 1,
    women = 0,
}

let m: { name: string, sex: sex }

m = {name: 'yueyue', sex: sex.women}
console.log(m)

// 类创建

class Person {
    // 属性定义
    // 实例属性
    name: string = "yueyue";
    // 静态属性
    static age: number = 18;
    // 只读属性
    readonly sex: string = "男";

    // 方法定义
    say() {
        console.log("say");
    }

    static sayhello() {
        console.log("say hello")
    }
}

function asb(a: Person) {

}

let p = new Person();

console.log(p);
console.log(Person.age);

p.sex = "女";
console.log(p);
p.say();
Person.sayhello()

class Dog {
    name: string;
    age: number;

    // 构造函数
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    bark() {
        console.log(this.name);
    }
}

const dog = new Dog("中华田园犬", 3);
console.log(dog);
dog.bark();

class Animal {
    name: string;
    age: number;

    // 构造函数
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    bark() {
        console.log(this.name);
    }
}

// 继承
class Pig extends Animal {
    bark() {
        console.log("this is pig");
    }

    run() {
        console.log(`${this.name} is running`);
    }
}

const pig = new Pig("皮特兰猪", 7);
console.log(pig);
pig.bark();
pig.run();


// 对象约束继承
interface Idata {
    id: number;
    name: string
}

interface Idata1 extends Idata {
    age: number;
}

let aac: Idata1 = {
    id: 12,
    name: 'sdf',
    age: 34
}

class Dog1 {
    private _name: string;
    private _age: number;

    // 构造函数
    constructor(name: string, age: number) {
        this._name = name;
        this._age = age;
    }

    getName() {
        return this._name;
    }

    setName(name: string) {
        this._name = name;
    }

    get age() {
        return this._age;
    }

    set age(value: number) {
        this._age = value;
    }

    bark() {
        console.log(this._name);
    }
}

const dog2 = new Dog1("中华田园犬", 3);
dog2.setName("柴犬");
console.log(dog2.getName());
dog2.age = 4;
console.log(dog2.age);

interface myinterface {
    name: string;
    age: number;
}

const obj: myinterface = {
    name: "yueyue",
    age: 18,
};
console.log(obj);


function fn1<T>(name: T): T {
    return name;
}

console.log(fn1(10));
console.log(fn1<string>("name"));

interface inter {
    length: number;
}

function fn2<T extends inter>(a: inter): number {
    return a.length;
}

console.log(fn2({length: 45}));

// 抽象类
abstract class boss {
    age: number;

    abstract run();
}

class boss1 extends boss {

    run() {
        console.log(32)
    }
}

let boss3 = new boss1();

function ffa<T>(a: T): T {
    return a;
}
ffa(1)
ffa("dsf")
ffa(true)


function fft1<T>(arg:T):number {
   return 1;
}

//
// 一、什么是装饰器
//
// 装饰器：就是一个方法，可以注入到类、方法、属性参数上来"扩展"类、属性、方法、参数的功能。
//
//     参考文章：https://www.xuexiluxian.cn/blog/detail/b2a537cc56884d0aa9dc338d406603b4
//
//     二、使用装饰器
//
// 注意：如果要使用装饰器，必须在tsconfig.json中进行 "experimentalDecorators":true,配置
//
// 2.1 类装饰器 ( 无法传递参数 )

function fun1( target:any ){
    target.prototype.userName = '张三';
    target.age = 19;
}
@fun1
class Person1{
}
let p1 = new Person1();
//@ts-ignore
console.log( p1.userName );
//@ts-ignore
console.log( Person1.age );
//这里的@fun1 ==》 @fun1(Person1)

// 2.2 装饰器工厂

function fun2( options:any ){
    return function( target:any ){
        target.prototype.userName = options.name;
        target.prototype.userAge = options.age;
    }
}
@fun2({
    name:'张三',
    age:18
})
class Person2{
}
let p2 = new Person2();
//@ts-ignore
console.log( p2.userName ,p2.userAge );
// 2.3 装饰器组合

function demo1( target:any ){
    console.log('demo1');
}
function demo2(){
    console.log('demo2');
    return function(target:any){
        console.log('demo2 内部');
    }
}
function demo3(){
    console.log('demo3');
    return function(target:any){
        console.log('demo3 内部');
    }
}
function demo4( target:any ){
    console.log('demo4');
}
@demo1
@demo2()
@demo3()
@demo4
class Person3{
}
let p3 = new Person3();
// ***执行顺序：结合起来一起使用的时候, 会先 从上至下 的执行所有的装饰器工厂, 拿到所有真正的装饰器, 然后再 从下至上 的执行所有的装饰器。
//
//     2.4 属性装饰器

function fun4( options:any ){
    return function(target:any , attr:any){
        target[attr] = options;
    }
}
class Person4{
    //@ts-ignore
    @fun4('李四')
        //@ts-ignore
    userName:string;
}
let p4 = new Person4();
console.log( p4.userName );