01. TypeScript

发表于 分类于 ，

安装 ts 语言最简单的方式使用 npm 工具。使用命令 npm install -g typescript 来全局安装 ts。

当安装成功后，可以 tsc -v 或 tsc --version 进行验证。

ts 是 js 类型的超集。

基础数据类型

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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
const anExampleVariable = "Hello World 123"
console.log(anExampleVariable)

let isDone: boolean = false;
console.log(isDone)

// 数字
let decLiteral: number = 2023;
let binaryLiteral: number = 0b11111100111;
let octalLiteral: number = 0o3747;
let hexLiteral: number = 0x7e7;

let nickName: string = "Jacky";

let list: number[] = [1, 2, 3];
// 使用数组泛型，Array<元素类型>
let list2: Array<number> = [1, 2, 3];

// 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。
let x: [string, number];
x = ['hello', 10]; // OK

// 枚举
enum Color {Red, Green, Blue};
let c: Color = Color.Green;

// 有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 unknown 类型来标记这些变量。
let notSure: unknown = 4;
notSure = 'maybe a string instead';
notSure = false;

// 当一个函数没有返回值时，你通常会见到其返回值类型是 void
function test(): void {
   console.log('This is function is void');
}

// TypeScript 里，undefined 和 null 两者各自有自己的类型分别叫做undefined和null
let u: undefined = undefined;
let n: null = null;

// 联合类型（Union Types）表示取值可以为多种类型中的一种
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;


// 条件语句
var num:number = 5
if (num > 0) { 
   console.log('数字是正数') 
}

// switch…case 语句
var grade:string = 'A'; 
switch(grade) { 
    case 'A': { 
        console.log('优'); 
        break; 
    } 
    case 'B': { 
        console.log('良'); 
        break; 
    } 
    case 'C': {
        console.log('及格'); 
        break;    
    } 
    case 'D': { 
        console.log('不及格'); 
        break; 
    }  
    default: { 
        console.log('非法输入'); 
        break;              
    } 
}


// 函数是一组一起执行一个任务的语句，函数声明要告诉编译器函数的名称、返回类型和参数。TypeScript 可以创建有名字的函数和匿名函数
// 有名函数
function add(x: any, y: any) {
  return x + y;
}

// 匿名函数
let myAdd = function (x: number, y: number) {
  return x + y;
};

console.log(myAdd(1, 2))

// 可选参数
function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + ' ' + lastName;
    else
        return firstName;
}

let result1 = buildName('Bob');
let result2 = buildName('Bob', 'Adams'); 

// 剩余参数
// 剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以有任意个。 可以使用省略号（ ...）进行定义
function getEmployeeName(firstName: string, ...restOfName: string[]) {
  return firstName + ' ' + restOfName.join(' ');
}

let employeeName = getEmployeeName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');
console.log(employeeName)

// ES6 版本的 TypeScript 提供了一个箭头函数，它是定义匿名函数的简写语法，用于函数表达式，它省略了function关键字。箭头函数的定义如下，其函数是一个语句块：
function testNumber(num: number) {
  if (num > 0) {
    console.log(num + ' 是正数');
  } else if (num < 0) {
    console.log(num + ' 是负数');
  } else {
    console.log(num + ' 为0');
  }
}

let testArrowFun = (num: number) => {
  if (num > 0) {
    console.log(num + ' 是正数');
  } else if (num < 0) {
    console.log(num + ' 是负数');
  } else {
    console.log(num + ' 为0');
  }
}

// 类
class Person {
  private name: string
  private age: number

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  public getPersonInfo(): string {
    return `My name is ${this.name} and age is ${this.age}`;
  }
}
let person1 = new Person('Jacky', 18);
person1.getPersonInfo();

// 继承
class Employee extends Person {
  private department: string

  constructor(name: string, age: number, department: string) {
    super(name, age);
    this.department = department;
  }

  public getEmployeeInfo(): string {
    return this.getPersonInfo() + ` and work in ${this.department}`;
  }
}

// 模块
// 任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加export关键字来导出v

// 迭代器
// 当一个对象实现了 Symbol.iterator 属性时，我们认为它是可迭代的。一些内置的类型如Array，Map，Set，String，Int32Array，Uint32Array 等都具有可迭代性。

let someArray = [1, "string", false];

// for..in 迭代的是对象的键，而 for..of 则迭代的是对象的值。
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

for (let i in someArray) {
    console.log(i); // "0", "1", "2",
}

高级主题

类型保护

1
2
3
if (pet instanceof Cat) {

}
1
2
3
4
5
6
7
8
9
// 定义了一个联合类型
type Animal = Cat | Dog
function getPet(pet : Animal) {
  if ('helloCat' in pet) {

  } else {

  }
}

参考