这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
重点内容
在本次课程中，我们主要关注的内容为typescript的基本使用，包括ts的变量格式、数据类型、函数和类的基本概念。
知识点介绍
变量格式
变量命名：
格式一：
let 变量名: 变量类型 = 初始化值;
格式二：
let 变量名: 变量类型 | undefined;
变量名 = 变量值;
数据类型
布尔类型
let flag: boolean = true;
console.log(flag);
数字类型
整数型：
let num: number = 1;
console.log(num);
浮点型：
let num: number = 3.14;
console.log(num);
字符串类型
let str: string = "TypeScript";
console.log(str);
数组类型
第一种方式：
let arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log(arr);
第二种方式：
let arr: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log(arr);
元组类型
元组属于数组的一种，但元组中的元素可以不必全部保持类型一致。
let user: [number, string];
let userId = 10086;
let userName = "Nick";
let randomBoolean = true;
user = [userId, userName]; // 正确
user = [userId, randomBoolean]; // 错误
枚举类型
enum 枚举名 {
标识符[= 整型常数/字符串],
标识符[= 整型常数/字符串],
...
标识符[= 整型常数/字符串],
};
示例：
enum Flag {
success,
error,
overtime
};
let s: Flag = Flag.overtime;
console.log(s);//2
如果标识符没有赋值，它的值就是下标。
enum Flag {
success = 200,
error = 404,
overtime = 500
};
let s: Flag = Flag.overtime;
console.log(s);//500
如果标识符已经赋值，它的值就是被赋的值。
enum Flag {
success,
error = 100,
overtime
};
let s: Flag = Flag.overtime;
console.log(s);//101
如果标识符没有赋值，它的值就是下标，如果从中间突然指定了一个值，那么它之后的值都会从当前值开始重新计算。
null类型
let n: null = null;
undefined类型
let u: undefined = undefined;
any类型
表示任意数据类型。
void类型
void 类型表示没有任何类型，一般用于定义方法的时候方法没有返回值。
function success(): void {
console.log('执行成功了，我不需要返回值');
}
组合类型
支持一个变量可以赋予多种不同的变量类型，多个变量类型使用 | 分隔。
let num: number | null | undefined;
基本函数
函数定义
函数是由一连串的子程序所组成，可以被外部程序调用，向函数传递参数之后，函数可以返回一定的值。
函数格式
格式一：
function 函数名(参数列表): 返回值类型 {
函数体 ...
[return 返回值;]
}
格式二：
let 函数名 = function (参数列表): 返回值类型 {
函数体 ...
[return 返回值;]
};
//必选参数：在调用函数的时候，必须要传入的参数
function getInfo(name: string, age: number): string {
return `${name} --- ${age}`;
}
//可选参数：某些参数可以不用传递；可选参数必须配置到参数的最后面。
function getInfo(name: string, age?: number): string {
return `${name} --- ${age}`;
}
默认参数
默认参数：为了解决在函数传参的时候，某些参数可以不用传递，但是我们又需要该参数的值，即给这个参数设定默认值。
function getInfo(name: string, age: number = 20): string {
return `${name} --- ${age}`;
}
剩余参数
剩余参数：在参数的类型确定而参数个数不确定的情况时，我们需要用到剩余参数，它使用 ... 将接收到的参数传到一个指定类型的数组中。
//剩余参数必须配置到参数的最后面。
function sum(init: number, ...result: number[]): number {
let sum = init;
for (let i = 0; i < result.length; i++) {
sum += result[i];
}
return sum;
}
console.log(sum(100, 1, 2, 3, 4, 5, 6));
重载函数
重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。 重载是通过为同一个函数提供多个函数类型声明来实现函数重载的功能的。
//重载函数声明
function getInfo(name: string): string;
function getInfo(name: string, age: number): string;
function getInfo(name: string, age?: string | number): string {
if (age) {
return "我叫：" + name + "，年龄：" + age;
} else {
return "我叫：" + name;
}
}
箭头函数
setTimeout(function () {
console.log("匿名函数执行");
}, 1000);
setTimeout(() => {
console.log("箭头函数执行");
}, 1000);
类
定义
class Person {
name: string;//属性，前面省略了public关键词
constructor(n: string) {//构造函数，实例化类的时候触发的方法
this.name = n;//使用this关键字为当前类的name属性赋值
}
run(): void {//方法
console.log(this.name+ "在跑步");
}
}
类的继承
类的继承：实现继承使用 extends 关键字，一旦实现了继承关系，子类便拥有了父类的属性和方法，而在执行方法过程中，首先从子类开始找，如果有，就使用，如果没有，就去父类中找。类的继承只能单向继承。
class Person {
name: string;//父类属性
constructor(n: string) {//构造函数，实例化父类的时候触发的方法
this.name = n;//使用this关键字为当前类的name属性赋值
}
run(): void {//父类方法
console.log(this.name + "在跑步");
}
}
class Chinese extends Person {
age: number;//子类属性
constructor(n: string, a: number) {//构造函数，实例化子类的时候触发的方法
super(n);//使用super关键字调用父类中的构造方法
this.age = a;//使用this关键字为当前类的age属性赋值
}
speak(): void {//子类方法
super.run();//使用super关键字调用父类中的方法
console.log(this.name + "说中文");
}
}
var c = new Chinese("张三", 28);
c.speak();
修饰符
TypeScript 里面定义属性的时候给我们提供了三种修饰符
- public：公有类型，在当前类里面、子类、类外面都可以访问
- protected：保护类型，在当前类里面、子类里面可以访问，在类外部没法访问
- private：私有类型，在当前类里面可以访问，子类、类外部都没法访问
默认是公有类型（public）。
静态属性
静态属性：被静态修饰符修饰的属性就是静态属性，静态属性可以通过类名直接调用。
class Person {
name: string;//属性，前面省略了public关键词
static sex: string = "男";//被静态修饰符static修饰的属性
constructor(n: string) {//构造函数，实例化类的时候触发的方法
this.name = n;
}
run(): void {//方法
console.log(this.name+ "在跑步");
}
}
console.log(Person.sex);
静态方法
静态方法：被静态修饰符修饰的方法就是静态方法，静态方法可以通过类名直接调用，但是在静态方法内部，不能直接调用当前类的非静态属性、非静态方法。
class Person {
name: string;//属性，前面省略了public关键词
static sex: string = "男";//被静态修饰符static修饰的属性
constructor(n: string) {//构造函数，实例化类的时候触发的方法
this.name = n;
}
run(): void {//方法
console.log(this.name + "在跑步");
}
static print(): void {//被静态修饰符static修饰的方法
console.log('性别：' + Person.sex);//正确
}
}
Person.print();
抽象类
它是提供其他类继承的基类，不能直接被实例化。
用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类（也就是其子类）中实现，abstract抽象方法只能放在抽象类里面。
我们常常使用抽象类和抽象方法用来定义标准。
//动物抽象类，所有动物都会跑（假设），但是吃的东西不一样，所以把吃的方法定义成抽象方法
abstract class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
abstract eat(): any;//抽象方法不包含具体实现并且必须在派生类中实现
run() {
console.log(this.name + "会跑")
}
}
class Dog extends Animal {
constructor(name: string) {
super(name);
}
eat(): any {//抽象类的子类必须实现抽象类里面的抽象方法
console.log(this.name + "吃骨头");
}
}
var d: Dog = new Dog("小狼狗");
d.eat();
多态
多态：父类定义一个方法不去实现，让继承它的子类去实现 ，每一个子类有不同的表现，多态属于继承。
//动物抽象类，所有动物都会跑（假设），但是吃的东西不一样，所以把吃的方法定义成抽象方法
abstract class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
abstract eat(): any;//抽象方法不包含具体实现并且必须在派生类中实现
run() {
console.log(this.name + "会跑")
}
}
class Dog extends Animal {
constructor(name: string) {
super(name);
}
eat(): any {//抽象类的子类必须实现抽象类里面的抽象方法
console.log(this.name + "吃骨头");
}
}
var d: Animal = new Dog("小狼狗");
d.eat();
个人总结
typescript与JavaScript在使用上有许多相通之处，在了解掌握js基本知识及使用的情况下对学习ts有一定帮助。
