# 1、箭头函数写法

const jiantouhanshu : ()=>void =()=>{
    console.log("箭头函数")
}
1
2
3

# 2、剩余参数、type、类与继承实现 相关

const stringArr:string[]=["1","222"]
const undefinedArr:undefined[]=[undefined,undefined]
//开发过程中的代码,当编译成代码后这些代码将不存在
//接口的定义
interface  InterType{
    name:string;
    age:number;
    say():void;
    [propname:string]:any
    select?:number
}
//接口的继承
interface TeacherType extends InterType{
    teach():string
}
//接口的实现
// class implementsInter implements InterType  
class implementsInter implements TeacherType{
    name="洪jl"
    age=18
    select=666
    say(){
        console.log(this.name,"implementsInter")
    }
    teach(){
        return "实现接口升级成了老师 implementsInter"
    }
}
type arrs=(number|string)
//剩余参数声明方式   其中声明了say(),所以必须要有say()方法  这个声明方式并不是元组声明方式,与顺序不一样也可以
type Lady={name:string,age:number,say():void,[propname:string]:any}
let newPro=new implementsInter()

newPro.say()                                                       //1
console.log(newPro.teach())                                        //2

const arr :(arrs) []=[1,'string',111]
const ceshi:Lady[]=[
    {name:"xx",age:18,say(){console.log(this.name)}},
    {name:"第二个名字",age:18,x:20,say(){console.log(this.name)}},
    {name:"第三个名字",age:18,s:"zz",x:"aa",disan:true,say(){console.log(this.name)}}

]
const screenResume=(name:string,age:number,bust:number)=>{
    age<24&& bust >=90 ?console.log(name+"进入面试"):console.log(name+"你被淘汰了")
}

console.log(ceshi)													//3
ceshi[2].say()														//4
/**打印结果
1、 洪jl implementsInter
2、 实现接口升级成了老师 implementsInter
3、 [
  		{ name: 'xx', age: 18, say: [Function: say] },
  		{ name: '第二个名字', age: 18, x: 20, say: [Function: say] },
  		{
  		  name: '第三个名字',
   		 age: 18,
  		  s: 'zz',
   		 x: 'aa',
   		 disan: true,
   		 say: [Function: say]
 		 }
	]
4、 第三个名字
**/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

# 3、public与private

//类的内部和类的外部
//public private 
class Person{
   private name:string="私有的属性名字";
   public sayHello():void{
       console.log(this.name,"  公有打印私有属性方法")
   }
   public  setName(name:string):void{
       this.name=name
   }
}
class Teacher extends Person{
    public sayBye(){
        //只有父类的prblic公有属性才可以子类访问到,所以这里我直接调用父类的打印
        // console.log(super.name,"继承类的公有方法")
      console.log("  这是子类调用的")
        super.sayHello()
    }
}
const person = new Teacher()
person.sayHello()
person.sayBye()
person.setName("洪吉林")
person.sayHello()
person.sayBye()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 4、get set readonly 与静态方法 抽象类

class Xiaojiejie{
    constructor(private _age:number){}
    /***********  get set  *************/
    get getage(){
        return this._age
    }
    set setage(age:number){
        this._age=age
    }
}
const lili=new Xiaojiejie(18)
lili.setage=18
console.log(lili.getage)
//************static后可以不声明对象直接调用*************/
class Girl{
    static sayLove(){
        return "I love you"
    }
}
console.log(Girl.sayLove())

/******       readonly    ******/
class Person{
    public readonly _name:string
    constructor( name:string){
        this._name=name
    }
    //报错 只读属性不能赋值,除了构造函数刚开始一次
    // set setname(name:string){
    //     this._name=name
    // }
}
/*********        抽象类     *******************/
abstract class Girls{
    abstract skill():void
}
class Waiter extends Girls{
    skill(){   console.log("继承抽象类")}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 5、tsconfig相关

{
    // "include":["demo1.ts"] //什么文件生效,而且只是编译这里面对应js文件
    // "files": ["demo.ts"],//与include相似功能
  // "exclude":["demo.ts"],//除了什么文件生效

  "compilerOptions": {
    // "sourceMap": true,                     /* 打开后t(true)生成.map文件   '.map' file. */
    "outFile": "./build/page.js",      //生成单个文件 但是这个选项一开 module不支持commonjs 需要改成amd
    // "outDir": ".build/",                     /*  输出文件路径 即生成的js文件*/
    // "rootDir": "./src",                        /* 入口文件路径,即ts文件夹 */
                 
    "removeComments": true,                   /*去掉注释*/
      
   /* 是否严格按照ts标准,如果为true,下面的配置将不生效 只有为false,下面的配置才可以生效 **/
    "strict": true,                           /* Enable all strict type-checking options. */
    // "noImplicitAny": false,                 /* 当你设置为false时允许你的注解类型any不用特意标明 */
    // "strictNullChecks": false,              /* 设为false允许所有类型赋值null. */

    // "noUnusedLocals": true,                /* 不与上面的strict相关  打开后,只要是出现没有使用的变量,会进行提示错误 */
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 6、类型守护(断言)

interface Waiter {
    anjiao: boolean;
    says: () => {}

}

interface Teacher {
    anjiao: boolean;
    skill: () => {}
}
//类型守护 类型断言 
 function jushi(animal: Waiter | Teacher) {
     if (animal.anjiao) (animal as Teacher).skill()
     else (animal as Waiter).says()
 }
// 类型守护  类的断言  有错误
function jushi1(animal: (Waiter | Teacher)) {
    if ("skill" in animal) { animal.skill(); }
    else { animal.says(); }
}

jushi1({ 
    anjiao: true, 
    skill() {return {} }
 }
    )

//类型判断
function add(first: string | number, second: string | number) {
    if (typeof first === "string" || typeof second === "string") {
        return `${first}${second}`
    }
    return first + second
}
//传入类的类型守护
class NumberOgj {
    count: number=0;
}
function addObj(first: object | NumberOgj, second: object | NumberOgj) {
    if (first instanceof NumberOgj && second instanceof NumberOgj)
        return first.count + second.count
    return 0
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 7、枚举类型

//枚举类型用于使用0 1 2 此类状态标志
enum Status {
    hong=1, //可以改变开始的下标 默认从0开始
    ji,
    lin
}
function getName(status: any) {
    switch (status) {
        case Status.hong:
            return status
            break;
        case Status.ji:
            return status
            break;
        case Status.lin:
            return status
            break;
    }
}
console.log(getName(Status.hong))
console.log((Status.ji))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 8、泛型

# 1、泛型基础使用

//泛型
function join<T>(firts: T, second: T) {
    return `${firts}${second}`
}
console.log(join<string>("x", "s"))
console.log(join<number>(1, 2))//尖括号定义的类型,后面将会使用这个类型
//泛型在数组中的使用
function myFun<T>(params: T[]) {
    return params
}
console.log(myFun<string>(["123","456x"]))
//多个泛型的定义
function join1<T,P>(firts: T, second: P) {
    return `${firts}${second}`
}
console.log(join1<string,number>("x", 1))
//泛型支持类型推断
console.log(join1("x", 1))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 2、泛型使用 泛型继承 泛型约束

//普通泛型使用
class SelectGirl<T>{
    constructor(private girls: T[]) { }
    getGirl(index: number): T {
        return this.girls[index]
    }
}
const selectGirl = new SelectGirl(["aa", "bb", "cc"])
console.log(selectGirl.getGirl(0))


//泛型继承 这边的值需要有name
interface Girl {
      name: string;
    }
class SelectEx<T extends Girl>{
    constructor(private girls: T[]) { }
    getGirl(index: number): string {
        return this.girls[index].name
    }
}
const selectEx = new SelectEx([
    { name: "洪" },
    { name: "吉" },
    { name: "林" }
])

console.log(selectEx.getGirl(0))

//泛型约束
class SelectGirl1<T extends number|string>{
    constructor(private girls: T[]) { }
    getGirl(index: number): T {
        return this.girls[index]
    }
}
const selectGirl1 = new SelectGirl1(["约束", "bb", "cc"])
console.log(selectGirl1.getGirl(0))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 9、命名空间namespace

//命名空间
namespace Comments {
	//子命名空间
    export namespace Sub {
        export class Test { }
    }
	//暴露出去类
    export class Header {
        constructor() {
            const elem = document.createElement("div")
            elem.innerText = "This is Header"
            document.body.appendChild(elem)
        }
    }
    }
    Comments.sub.Test //使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Last Updated: 11/20/2022, 2:15:00 PM