Typescnipt 学习笔记

TypeScript 学习笔记

一、什么是 TypeScript

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集。它添加了静态类型和面向对象的特性，并提供了更强大的工具和功能，以增强 JavaScript 的开发体验。

二、为什么要学习 TypeScript

1. 静态类型检查：TypeScript 提供了静态类型检查，可以在编译时捕捉一些常见的错误，提供更安全、更可靠的开发环境。

2. 代码智能提示：TypeScript 提供了强大的智能提示功能，可以在编码过程中提供代码补全、参数提示等功能，提高开发效率。

3. 更好的维护性和可读性：TypeScript 提供了类、接口、模块等面向对象的特性，使得代码更易于理解、扩展和维护。

4. 生态系统丰富：TypeScript 是目前最流行的 JavaScript 超集，拥有庞大的社区和生态系统，可以轻松找到各种开源库和工具。

三、基本语法

1. 声明变量:

   let a: number = 10;
   const b: string = "Hello";
   

2. 声明函数:

   function add(a: number, b: number): number {return a + b;
   }
   

3. 声明接口:

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

4. 声明类:

   class Animal {name: string;constructor(name: string) {this.name = name;}sayHello() {console.log("Hello, I'm " + this.name);}
   }
   

四、类型注解

TypeScript 具有静态类型检查的能力，可以在变量、函数、参数等地方添加类型注解，帮助编译器检查代码的正确性。

1. 声明变量类型:

   let num: number = 10;
   let str: string = "Hello";
   

2. 函数参数和返回值类型:

   function add(a: number, b: number): number {return a + b;
   }
   

3. 接口类型注解:

   interface Person {name: string;age: number;
   }
   function sayHello(person: Person) {console.log("Hello, " + person.name);
   }
   

五、类与对象

TypeScript 支持面向对象编程，可以使用类和对象来组织代码。

1. 声明类:

   class Animal {name: string;constructor(name: string) {this.name = name;}sayHello() {console.log("Hello, I'm " + this.name);}
   }
   

2. 创建对象:

   let cat = new Animal("Tom");
   cat.sayHello();
   

3. 继承和重写:

   class Dog extends Animal {sayHello() {console.log("Woof, I'm " + this.name);}
   }
   let dog = new Dog("Spike");
   dog.sayHello();
   

六、模块化

TypeScript 提供了模块化的语法，可以将代码拆分成多个文件，提高代码的可维护性和复用性。

1. 导出模块:

   // utils.ts
   export function add(a: number, b: number): number {return a + b;
   }
   

2. 导入模块:

   // main.ts
   import { add } from "./utils";
   console.log(add(10, 20));
   

七、类型推断

TypeScript 在很多情况下可以根据代码的上下文推断出变量的类型，省去了手动添加类型注解的步骤。

let num = 10; // 推断为 number 类型
let str = "Hello"; // 推断为 string 类型
function multiply(a: number, b: number) {return a * b; // 推断为 number 类型
}

八、类型联合

TypeScript 支持声明多个类型的联合类型，用于表示一个变量可以是多种类型之一。

let num: number | string = 10; // 可以是 number 或 string 类型
num = "Hello";

九、类型保护

当使用联合类型时，可以使用类型保护来判断变量的具体类型，并进行相应的操作。

function printLength(strOrArr: string | number[]) {if (typeof strOrArr === "string") {console.log(strOrArr.length); // string 类型有 length 属性} else {console.log(strOrArr.length); // number[] 类型也有 length 属性}
}

十、总结

TypeScript 是一种强类型的 JavaScript 超集，提供了更强大的工具和功能，为 JavaScript 开发提供了更安全、更可靠的环境。学习 TypeScript 可以提高开发效率、代码可维护性和复用性。以上是 TypeScript 的基本语法和特性，希望对你有所帮助。