学习 TypeScript 时，有一些关键的概念和特性是需要掌握的。以下是一些主要的内容：

TypeScript

联合类型 可以选择多种类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function printLength(value: number | string): void {

  if (typeof value === "number") {

​    console.log("Number length:", value.toString().length);

  } else if (typeof value === "string") {

​    console.log("String length:", value.length);

  }

}



printLength(10);     // 输出 Number length: 2

printLength("Hello");   // 输出 String length: 5

断言

1
2
3
4
5
6
let myVariable: any = "Hello, TypeScript!";

let length: number = (<string>myVariable).length;

console.log(length);
//把myVariable断言成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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
class Dog{

  private name:string;

  private age:number;

  constructor(name:string,age:number){

​    this.name=name

​    this.age=age

  }

  bark():void{

​    console.log('123');

  }



  getDogInfo():string{

​    return `Name:${this.name},Age:${this.age}`

  }

}

const myDog=new Dog('mike',3)

myDog.bark()

console.log(myDog.getDogInfo());



class Penson{

  name:string;

  constructor(name:string){

​    this.name=name

  }

  sayHello():void{

​    console.log('你好');

  }
  msg():string{

​    return `名字是${this.name}`

  }

}

const obj=new Penson('mike')

obj.sayHello()

console.log(obj.msg());

泛型函数

1
2
3
4
5
6
7
8
9

function confirm<V>(msg: V): V {
    return msg
}
let res: number = confirm(5)
let rep: string = confirm('123')
console.log(res);
console.log(rep);

数字枚举和字符串枚举

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//数字枚举

enum Direction {
   
  Up,    // 0

  Down,   // 1

  Left,   // 2

  Right   // 3

}

let move:string=Direction[0]

console.log(move);  //输出up

let move1: number = Direction.Up;

console.log(move1); // 输出 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//字符串枚举

enum Penson {

  name1 = 'mike',

  name2 = 'john',

  name3 = 'amy'

}

let allPerson: string = Penson.name1

console.log(allPerson);

类型守卫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function logLength(value: string | number): void {

  if (typeof value === "string") {

​    console.log(value.length); // 在这个块中，value 被收窄为 string 类型

  } else {

​    console.log(value); // 在这个块中，value 被收窄为 number 类型

  }

}

let t:void=logLength('nihao')

console.log(t); // 输出5

对象类型守卫

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
class Animal {
  name: string;
  constructor(name: string) {
​    this.name = name;
  }
}
class Dog extends Animal {
  breed: string;
  constructor(name: string, breed: string) {
​    super(name);
​   this.breed = breed;

  }
}
function printName(animal: Animal): void {
  if (animal instanceof Dog) {
​    console.log(animal.breed); // 在这个块中，animal 被收窄为 Dog 类型
  } else {
​    console.log(animal.name); // 在这个块中，animal 被收窄为 Animal 类型
  }

}

// 创建 Animal 对象

// let animal = new Animal("Tom");

// printName(animal); // 输出 "Tom"



// 创建 Dog 对象

let dog = new Dog("Buddy", "Labrador");

printName(dog); // 输出 "Labrador"

类继承接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 定义一个接口
interface Animal {
    name: string;
    makeSound(): void;
}

// 实现接口的类
class Dog implements Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }
    
    makeSound() {
        console.log(`${this.name} barks`);
    }

}

// 使用实现了接口的类
const myDog = new Dog("Buddy");
myDog.makeSound(); // 输出: Buddy barks