Typescript学习笔记总结

Typescript是一种由微软开发的开源编程语言，它是JavaScript的超集，意味着它包含了JavaScript的所有特性，同时还提供了一些额外的功能和类型检查。Typescript的目标是提高JavaScript代码的可读性、可维护性和可扩展性，同时还能够在编译时检测出一些常见的错误。

在本文中，我们将详细介绍Typescript的知识，并使用相关代码辅助介绍。

一、基础类型

Typescript支持JavaScript的所有基础类型，包括number、string、boolean、null、undefined和symbol。此外，Typescript还提供了一些额外的类型，如any、void、never和unknown。

1. number类型

number类型表示数字，可以是整数或浮点数。例如：

let num: number = 10;
let floatNum: number = 3.14;

2. string类型

string类型表示字符串，可以使用单引号或双引号。例如：

let str: string = 'hello';
let anotherStr: string = "world";

3. boolean类型

boolean类型表示布尔值，只有两个值：true和false。例如：

let isTrue: boolean = true;
let isFalse: boolean = false;

4. null和undefined类型

null和undefined类型表示空值，它们是所有类型的子类型。例如：

let n: null = null;
let u: undefined = undefined;

5. any类型

any类型表示任意类型，可以赋值给任何变量。例如：

let anyValue: any = 'hello';
anyValue = 10;

6. void类型

void类型表示没有返回值的函数。例如：

function sayHello(): void {
  console.log('hello');
}

7. never类型

never类型表示永远不会返回的函数或抛出异常。例如：

function throwError(): never {
  throw new Error('error');
}

8. unknown类型

unknown类型表示未知类型，类似于any类型，但是不能直接赋值给其他类型。例如：

let unknownValue: unknown = 'hello';
let strValue: string = unknownValue; // 报错

二、变量声明

在Typescript中，可以使用let、const和var关键字声明变量。其中，let和const是ES6新增的关键字，var是ES5中的关键字。

1. let关键字

let关键字用于声明块级作用域的变量。例如：

if (true) {
  let x = 10;
}
console.log(x); // 报错，x未定义

2. const关键字

const关键字用于声明常量，一旦赋值就不能再修改。例如：

const PI = 3.14;
PI = 3; // 报错，常量不能修改

3. var关键字

var关键字用于声明全局作用域或函数作用域的变量。例如：

function test() {
  var x = 10;
}
console.log(x); // 报错，x未定义

三、函数

在Typescript中，可以使用function关键字定义函数，也可以使用箭头函数。函数可以有参数和返回值，可以使用类型注解来指定参数和返回值的类型。

1. 函数定义

function add(x: number, y: number): number {
  return x + y;
}

const add = (x: number, y: number): number => {
  return x + y;
}

2. 可选参数

可以使用问号来表示可选参数。例如：

function sayHello(name?: string): void {
  if (name) {
    console.log(`hello, ${name}`);
  } else {
    console.log('hello');
  }
}

3. 默认参数

可以使用等号来表示默认参数。例如：

function sayHello(name: string = 'world'): void {
  console.log(`hello, ${name}`);
}

4. 剩余参数

可以使用三个点来表示剩余参数。例如：

function add(...nums: number[]): number {
  return nums.reduce((prev, curr) => prev + curr, 0);
}

四、类

在Typescript中，可以使用class关键字定义类。类可以有属性和方法，可以使用访问修饰符来控制属性和方法的访问权限。

1. 类定义

class Person {
  name: string;
  age: number;

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

  sayHello(): void {
    console.log(`hello, my name is ${this.name}, I'm ${this.age} years old`);
  }
}

2. 继承

可以使用extends关键字来实现继承。例如：

class Student extends Person {
  grade: number;

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

  study(): void {
    console.log(`I'm studying in grade ${this.grade}`);
  }
}

3. 访问修饰符

可以使用public、private和protected关键字来控制属性和方法的访问权限。例如：

class Person {
  public name: string;
  private age: number;
  protected gender: string;

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

  sayHello(): void {
    console.log(`hello, my name is ${this.name}, I'm ${this.age} years old`);
  }
}

class Student extends Person {
  grade: number;

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

  study(): void {
    console.log(`I'm studying in grade ${this.grade}`);
  }

  showGender(): void {
    console.log(`My gender is ${this.gender}`); // 可以访问父类的protected属性
  }
}

const person = new Person('Tom', 20, 'male');
console.log(person.name); // 可以访问public属性
console.log(person.age); // 报错，不能访问private属性

const student = new Student('Jerry', 18, 'male', 1);
console.log(student.gender); // 报错，不能访问protected属性
student.showGender(); // 可以访问protected属性

五、接口

在TypeScript中，可以使用interface关键字定义接口。接口用于描述对象的形状，可以包含属性、方法和索引签名。

1. 接口定义

在TypeScript中，可以使用interface关键字定义接口。接口用于描述对象的形状，可以包含属性、方法和索引签名。例如，下面的代码定义了一个Person接口，它包含一个name属性、一个age属性和一个sayHello方法：

interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

const person: Person = {
  name: 'Tom',
  age: 20,
  sayHello() {
    console.log(`hello, my name is ${this.name}, I'm ${this.age} years old`);
  }
}

在上面的代码中，我们定义了一个Person接口，它包含一个name属性、一个age属性和一个sayHello方法。然后我们创建了一个person对象，它符合Person接口的定义，因此可以将它赋值给一个类型为Person的变量。

2. 可选属性

有时候我们并不需要一个对象的所有属性都是必须的，这时可以使用问号来表示可选属性。例如：

interface Person {
  name: string;
  age?: number;
}

const person1: Person = {
  name: 'Tom'
}

const person2: Person = {
  name: 'Jerry',
  age: 18
}

在上面的代码中，我们定义了一个Person接口，它包含一个name属性和一个可选的age属性。然后我们创建了两个person对象，person1只包含name属性，而person2包含name和age属性。

3. 只读属性

有时候我们希望一个对象的某些属性只能在创建时被赋值，不能被修改。这时可以使用readonly关键字来定义只读属性。例如：

interface Person {
  readonly id: number;
  name: string;
}

const person: Person = {
  id: 1,
  name: 'Tom'
}

person.id = 2; // error: Cannot assign to 'id' because it is a read-only property.

在上面的代码中，我们定义了一个Person接口，它包含一个只读的id属性和一个name属性。然后我们创建了一个person对象，它包含一个id和一个name属性。由于id属性是只读的，因此我们不能在后面修改它的值。

4. 继承接口

在TypeScript中，接口可以继承其他接口，从而扩展接口的定义。例如：

interface Person {
  name: string;
  age: number;
}

interface Student extends Person {
  grade: number;
}

const student: Student = {
  name: 'Tom',
  age: 20,
  grade: 3
}

在上面的代码中，我们定义了一个Person接口，它包含一个name属性和一个age属性。然后我们定义了一个Student接口，它继承了Person接口，并添加了一个grade属性。最后我们创建了一个student对象，它符合Student接口的定义，因此可以将它赋值给一个类型为Student的变量。

5. 函数类型接口

在TypeScript中，接口不仅可以描述对象的形状，还可以描述函数的形状。例如：

interface Add {
  (x: number, y: number): number;
}

const add: Add = (x, y) => x + y;

在上面的代码中，我们定义了一个Add接口，它描述了一个函数类型，它接受两个参数x和y，返回一个数字类型的值。然后我们定义了一个add函数，它符合Add接口的定义，因此可以将它赋值给一个类型为Add的变量。

6. 索引类型接口

在TypeScript中，接口还可以描述对象的索引类型。例如：

interface StringArray {
  [index: number]: string;
}

const arr: StringArray = ['hello', 'world'];

在上面的代码中，我们定义了一个StringArray接口，它描述了一个索引类型，它的索引是数字类型，值是字符串类型。然后我们创建了一个arr数组，它符合StringArray接口的定义，因此可以将它赋值给一个类型为StringArray的变量。

六、总结

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集，可以编译成纯JavaScript代码。在TypeScript中，可以使用interface关键字定义接口，接口用于描述对象的形状，可以包含属性、方法和索引签名。接口还可以继承其他接口，从而扩展接口的定义。接口不仅可以描述对象的形状，还可以描述函数的形状和对象的索引类型。通过使用TypeScript的类型检查功能，可以提高代码的可维护性和可读性。