ts基础语法

基本类型

// 声明变量a,同时指定他的类型为number
let a: number;

// a的类型是number，以后的使用过程中a的值只能是数字
a = 10;
// a = "hello";a的类型是number，赋值给string会报错

let b:string;
b="hello"

// 如果变量的声明和赋值同时进行，ts可以自动对变量进行类型检查
let c = false;
c = true ;

// 方法的声明
function sum(a:number,b:number):number {
    return a+b;
}


// 直接使用字面量进行类型声明
let a :10;
a=10;

// b的值只能是male或者是false；|来链接多个类型（联合类型）
let b:"male"|"false";
b = "male";
b="false"

let c :boolean|string
c = true
c = "hello"

// any 表示任意类型，一个变量设置为any相当于关闭该变量的类型检查
// let d:any
//隐式any，显示器默认设置其类型为any
let d
d=10;
d="string"
d=true

// unknown未知类型
let e:unknown
e = 10
e="hello"
e=true


let s:string
// d的类型是any，它可以将值赋值给任意变量
// s = d

e = "hello"
// unknown是一个类型安全的any不能直接赋值给其他变量
if (typeof e === "string") {
    s = e
}


// 类型断言,可以用来告诉解析器变量的实际类型
/**
 * 语法
 * 变量 as 类型
 * <类型>变量
 * */ 
s = e as string
s = <string>e

// void 用来表示为空，表示没有返回值
function fn():void {
    
}


// never 表示永远没有返回值（报错信息）
function fn2():never {
    throw new Error("报错")
    
}


// object 表示一个js对象
let a3:object;
a3 = {};
a3 = function(){
}

// {}用来指定对象中包含哪些属性
// 语法：{属性名：属性值，属性名：属性值}
// 属性名后边加上？表示属性是可选
let b3:{name:string,age?:number}

b3 = {name:"孙悟空"}


// [propName:string]:any可以有任意属性
let c3 :{name:string,[propName:string]:any}
c3= {name:"猪八戒",a:1,b:2,c:3}

/**
 * 设置函数的结构类型
 * 语法：（形参：类型，形参：类型。。。）=>返回类型
 * **/ 
let d3:(a:number,b:number)=>number
d3 = function(a,b){
    return a+b;
}


/**
 * 数组类型的声明
 * 类型[]
 * Array<类型>
 * **/ 
// string[]表示字符串数组
let e3:string[]

// number[]表示数字数组
let f3:number[]

let g3:Array<number>


/**
 * 元组，固定长度的数组
 * **/ 

let h:[string,string]
h = ["hello","world"]

/**
 * enum,枚举
 * **/ 

enum Gender{
    Male,
    Female
}

let i:{name:string,gender:Gender,[propName:string]:any}
i ={
    name:"张翰",
    gender:Gender.Male
}

console.log(i.gender === Gender.Male);

// &表示同时
let v :{name:string} & {age:number}
v = {
    name:"张三",
    age:23
}

// 类型的别名
type myType = 1|2|3|4;
let k: myType;
let l: myType;
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

编译选项

自动编译文件

语法：tsc xxx.ts -w

自动编辑整个文件

创建tsconfig.json文件

{
    /**
     ts编辑器配置文件
     include:用来指定那些ts文件需要被编辑
        路径：  **表示任意路径
                *表示任意文件
     exclude:不需要被编辑的文件
        默认值：node_modules，bower_components，jspm_packages
    */
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        ".src/hello/**/*"
    ],
    /**
    compilerOptions编辑器的选项
    */ 
    "compilerOptions": {
        // 用来指定ts被编辑的es版本
        "target": "ES6",

        // 指定使用模块化的规范
        "module": "ES2015",

        // 用来指定项目中要使用的库
        // "lib": ["DOM"]

        // 编译后文件所在的目录
        "outDir": "./dist",

        //将代码合并为一个文件
        // "outFile": "./dist/app.js"

        // 是否对js文件进行编译，默认为false
        "allowJs": true,

        // 检查js语法是否符合语法规范，默认是false
        "checkJs": false,

        // 是否移除注释
        "removeComments": true,

        // 不生成编译后文件
        "noEmit": false,

        // 当有错误时候不生成编译文件
        "noEmitOnError": false,

        // 所有严格检查总开关
        "strict": false,

        // 用来设置编译后文件是否使用严格模式
        "alwaysStrict": true,

        // 不允许隐式any类型出现
        "noImplicitAny": false,

        // 不允许不明确类型的this
        "noImplicitThis": true,

        // 严格检查空值
        "strictNullChecks": false
    }
}
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

类

// 使用class关键字定义一个类
/**
 * 类中主要包含两部分
 * 1、属性
 *      
 * 2、方法
 */
class Person {
    // 定义实例属性
    name:string
    // readonly表示只读属性
    readonly age:number

    // 在属性前使用static关键字可以定义类属性(静态属性)
    static use:boolean = true 
    // 静态只读属性
    static readonly use1:boolean = true 


    // 方法
    /**
     * 如果方法以static开头则方法是类方法，可以直接通过类调用
     */
    sayHello(){
        console.log("大家好");
    }

}

const per = new Person()
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

构造函数

// 构造函数
class Dog{
    name:string
    age:number

    // 构造函数
    constructor(name:string,age:number){
        this.name = name
        this.age = age
        // this代表当前的实例
        console.log(this);
        
    }
    bark(){
        alert("汪汪汪")
    }
}

const dog = new Dog("小白",4)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

继承

// 定义一个类
class Dag{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    sayHello(){
        console.log("汪汪汪");
        
    }
}
class Cat{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    sayHello(){
        console.log("喵喵");
        
    }
}
const dogg = new Dag("小白",5)
const catt = new Cat("小黑",3)
catt.sayHello()
dogg.sayHello()


// 类的继承
class Animal{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    sayHello(){
        console.log("动物叫声");
        
    }
}

/**
 * Animal被称为父类
 * DOG继承了父类的所有的属性和方法
 * 通过继承可以将多个类中公共的代码写在一个父类中
 *  这样只需要写一次即可让所有的子类都同时拥有父类中的属性
 *  如果希望在子类中添加一些父类没有的属性和方法，直接添加就可以
 */
class DOG extends Animal{
    // 子类从写方法可以覆盖父类的方法
    sayHello(): void {
        console.log("汪汪汪");
    }
    // 子类添加的方法
    run():void{
        console.log(`${this.name}在跑`);
        
    }

}
class CAT extends Animal{
    sayHello(): void {
        console.log("喵喵喵");
        
    }

}
const DOGG = new Dag("小白",5)
const CATT = new Cat("小黑",3)
catt.sayHello()
dogg.sayHello()
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
67
68
69
70
71
72
73
74
75

super

(function(){
    class Animal{
        name:string
        age:number
        constructor(name:string,age:number){
            this.name = name
            this.age = age
        }

        sayHello(){}
    }

    class Dog extends Animal{
        color:string;
        constructor(name:string,age:number,color:string){
            // 子类中如果从写构造函数，那么在子类的构造函数中必须对父类构造函数调用
            super(name,age)//调用父类的构造函数
            this.color = color
        }
        sayHello(): void {
            // 类的方法中 super就代表父类
            // super.sayHello()
            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

抽象类

(function(){

    /**
     * 以abstract开头的类是抽象类
     *  抽象类与其他类区别不大，只是不能用来创建对象
     *  抽象类就是专门用来继承的类
     * 
     * 抽象类可以添加抽象方法
     */
    abstract class Animal{
        name:string
        age:number
        constructor(name:string,age:number){
            this.name = name
            this.age = age
        }

        abstract sayHello():void
    }

    class Dog extends Animal{
        color:string;
        constructor(name:string,age:number,color:string){
            // 子类中如果从写构造函数，那么在子类的构造函数中必须对父类构造函数调用
            super(name,age)//调用父类的构造函数
            this.color = color
        }
        sayHello(): void {
            // 类的方法中 super就代表父类
            // super.sayHello()
            console.log("汪汪汪");
            
        }
    }

    class Cat extends Animal{
        sayHello(): void {
            throw new Error("Method not implemented.")
        }
        color:string;
        constructor(name:string,age:number,color:string){
            // 子类中如果从写构造函数，那么在子类的构造函数中必须对父类构造函数调用
            super(name,age)//调用父类的构造函数
            this.color = color
        }
    }

    const dog = new Dog("小白",6,"白色")
})()
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

接口

(function(){
    // 描述一个对象的类型
    type myType = {
        name:string
        age:number
        [propName:string]:any
    }

    /***
     * 接口用来定义一个类的结构，用来定义一个类中应该包含哪些属性和方法
     *  同时接口也可以当成了类型声明来使用
     * 接口可以在定义类的时候去限制类的结构
     */
    interface myInterface {
        name:string
        age:number
    }

    interface myInterface {
        color:string
    }

    const obj:myInterface = {
        name:"xiaobai",
        age:5,
        color:"白色"
    }

    /***
     * 接口可以在定义类的时候去限制类的结构
     * 接口内的属性都不能有实际值
     * 接口中定义对象的结构，不考虑实际值
     *  在接口中，所有的方法都是抽象方法
    */

    interface myInter{
        name:string
        sayHello():void
    }
    /**
     * 定义类时，可以使类去实现一个接口
     *  实现接口就是使类满足接口的要求
     */
    class MyInter implements myInter{
        name: string
        sayHello(): void {
            console.log("动物名称");
            
        }
        constructor(name: string){
            this.name = name
        }
    }


})()
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

属性的封装

(function(){
    //    定义一个表示人的类
    class Person {
        /**
         * ts可以在属性前添加属性的修饰符
         * 
         * 
         * punblic 修饰的属性可以在任意位置访问(修改) 默认值(包括子类)
         * privte 私有属性，私有属性只能在类内访问
         *      -通过在类中添加方法使的私有属性可以被外部访问
         * protected 受保护的属性，只能在当前类和子类中使用
         */
        private _name:string
        private _age:number
        constructor(name,age){
            this._name = name
            this._age = age
        }

        /**
         *  属性存取器
         * getter方法用来读取属性
         * setting方法用来设置属性
         * 
         */

        // // 定义方法，用来获取name属性
        // getName(){
        //     return this._name
        // }

        // // 定义方法，用来设置name属性
        // setName(name:string){
        //     this._name = name
        // }


        // ts中设置getter方法
        get name(){
            return this._name
        }
        set name(value){
            this._name = value
        }
    }
    const person = new Person("张三",18)

    /**
     * 属性是在对象中设置的，属性可以任意修改
     * 属性可以任意被修改导致对象中的数据变得不安全
     */
    
    person.name = "李四"
    person.name
})()
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

泛型

function fn(a:number):number {
    return a
}
/**
 * 在定义函数或类时，如果遇到的类型不明确就可以使用泛型
 */

function fun<T>(a:T):T{
    return a

}


// 可以直接调用具有泛型的函数
fun(10)//不指定泛型，ts自动判读那
fun<string>("hello")//指定泛型

function func<T,K>(a:T,b:K):T {
    console.log(b);
    return a
}

interface Inter{
    length:number
}

// T extends Inter表示泛型T必须时Inter实现类（子类）
function funct<T extends Inter>(a:T):number {
    return a.length
}

funct('123')


class myClass<T>{
    name:T
    constructor(name:T){
        this.name = name
    }

}

const mc = new myClass<string>("李四")
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