typeScript 深入了解

interface Girl {
    name: string;
    age: number;
    bust: number;
    like?: string;
    [propname: string]: any;
    say(): string
}
interface Teacher extends Girl {
    teach(): string
}
class Preson implements Girl {
    name = '111'
    age = 12
    bust = 90
    say() {
        return '欢迎光临'
    }
}
const girl = {
    name: '关关',
    age: 12,
    bust: 90,
    like: '帅哥',
    sex: '女',
    eat: '苹果',

    say: (() => { return '123' }),
    teach: (() => {
        return 'jdijisodsids'
    })
}
const getFn = (girl: Teacher) => {
    console.log('喜欢:', girl.teach());

}
getFn(girl)

class Lady {
    content = 'hi 你好啊'
    sayHello() {
        return this.content
    }
}
class Gril extends Lady{
    content = "不开心",
      sayHello() {
        return super.sayHello() + '111' // 使用父类中sayHello 方法
    }
}
let LadyClass = new Gril()
console.log(LadyClass.sayHello()); // 不开心
console.log(LadyClass.content);  // 不开心

private 私有的  不能在外部及继承中使用，代码提示会报错，无法使用

protected  保护的   能在内部使用，不能在外部使用  但是在继承中是可以使用的

pulbic 公有的 在内部和外部都是可以调用的

类的内部和外部 {}外是外部 {}内是内部

class Person {
    public name: string | undefined;
    protected say(){
       console.log(this.name + '你好啊');
        return this.name + '你好啊'
        
    }
}
const person = new Person()
person.name = 'jsGuan'
person.say()
console.log(person.say());

class Person {
    public name : string | undefined
    constructor(name:string){
        this.name = name
    }
}
const person = new Person('guanguan')
console.log(person.name); // guanguan
// 简便写法
class Person {
    constructor( public name:string){
    }
}
// 继承 子类只有是构造函数 constructor 就必须调用super() 方法
class Person {
    constructor( public name:string){
    }
}
class Son extends Person{
    constructor(public age:number) {
        super('jingjing')
    }
}
const son = new Son(12)
console.log(son.name); // jingjing
console.log(son.age); //12

class xiaoJieJie {
    constructor(private _age:number){ }
    get age () {
        return this._age
    }
}
const mom = new xiaoJieJie(18)
console.log(mom.age);

class xiaoJieJie {
    constructor(private _age:number){ }
    get age () {
        console.log(2);
        return this._age + 1
    }
    set age (age:number) {
        console.log(1);
        this._age = age + 10
    }
    
}
const mom = new xiaoJieJie(18)
mom.age = 20
console.log(mom.age); // 31

补充一个 静态类的方法

不需要在实例化 一个对象 进行调用，直接用 class.方法属性

class Girl {
  static  sayLove() {
        return 'I love you'
    }
}
console.log(Girl.sayLove());

class Person {
    public readonly _name :string
    constructor(name:string) {
            this._name = name
    }
}
const person =  new Person('guanguan')
person._name = 'jingjing' // 报错  因为 _name 属性是只读属性
console.log(person._name);

8.抽象类

概念：和父类很像都需要继承，抽象类一般都有一个抽象方法，继承抽象类的类，必须实现抽象方法才可以

// 每一个类都需要一个技能 但是 每一个类里面 他们的技能是不同的 可以用抽象类
abstract class Girl {
    abstract skill():any // 没有大括号，因为每一个类的方法是不同的，所以不同写上
    abstract say() :any
}
class waiter extends Girl {
    skill() {
        // 实际操作逻辑
        console.log(1);
        
    }
    say() {
        console.log(2);
        
    }
}
class Baseteacher extends Girl {
    skill() {
        console.log(3);
    }
    say() {
        console.log(4);
    }
}

interface son {
    anjiao:boolean;
    say: ()=>{
        la:string
        age:number
        
    }
}
interface teacher {
    anjiao:boolean;
    sayBey: ()=>{
        la:string
        age:number
        
    }
}
function whatHow(animal:son | teacher) {

}

animal.say() 发现会报错。因为你不知道这个 say() 方法是谁的，所以这个时候就会用到类型守护。

interface son {
    anjiao:boolean;

}
interface teacher {
    anjiao:boolean;
    sayBay: (()=>{})
}
function whatHow(animal:son | teacher) {
   if (animal.anjiao) {
        (animal as son).anjiao
        console.log(animal.anjiao); 
        
   } else {
    (animal as teacher).sayBay()
    console.log( (animal as teacher).sayBay()); // 'wowowo'
   }
}
const Girl = {
    anjiao:false,
    sayBay(){
       return 'wowowo'
    }

}
whatHow(Girl)

interface son {
    anjiao:boolean;
    skill :(()=>{})

}
interface teacher {
    anjiao:boolean;
    sayBay: (()=>{})
}
const Girl = {
    anjiao:false,
    sayBay(){
       return 'wo shi saybay'
    }

}
function towho(type:son | teacher) {
    if ('skill' in type) {
        type.skill()
        console.log( type.skill());
        
    } else {
        type.sayBay()
        console.log( type.sayBay()); // 'wo shi saybay'
    }
}
towho(Girl)

function add(frist: number | string, second: number | string) {
    if (typeof frist === "string" || typeof second === "string") {
        return `${frist}${second}`

    }
    return frist + second
}

1.新建一个文件夹 放到 vscode 中 ，然后打开终端，允许 npm init -y 创建 package.json 文件。

2.生成文件后，我们直接在终端允许 tsc -init ,生成 tsconfig.json

3.新建 src 和 build 文件夹，在创建一个 index.html

4.在 src 目录下，新建 一个 page.ts 文件，开始要编写 ts 文件了。

5.在配置 tsconfig.json 文件，设置 outDir 和 rootDir, 也就是设置需要编译的文件目录，和编译好的文件目录。

6.然后编写 index.html，引入,当让我们现在还没有 page.js 文件

7.编写page.ts文件，加入一句输出console.log('你好 关关'),再在控制台输入tsc,就会生成page.js文件

8.再到浏览器中查看 index.html 文件，如果按F12可以看到你好 关关，说明我们的搭建正常了。

看到上面还是没有使用命名空间时，Top Contrnt Footer 都是全局变量，容易造成全局变量混乱，所以需要进行模块化的划分，这个时候就需要 进行命名空间，关键字时 namespace 写法在 page.ts 中注释那样进行编写。

这个语法，很类似编程中常说的模块化思想，比如webpack打包时，每个模块有自己的环境，不会污染其他模块,不会有全局变量产生。命名空间就跟这个很类似，注意这里是类似，而不是相同。

命名空间声明的关键词是namespace比如声明一个namespace Home,需要暴露出去的类，可以使用export关键词，这样只有暴漏出去的类是全局的，其他的不会再生成全局污染了

index.html  script 修改