Typescnipt 学习笔记
TypeScript 学习笔记
一、什么是 TypeScript
TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的一个超集。它添加了静态类型和面向对象的特性,并提供了更强大的工具和功能,以增强 JavaScript 的开发体验。
二、为什么要学习 TypeScript
-
静态类型检查:TypeScript 提供了静态类型检查,可以在编译时捕捉一些常见的错误,提供更安全、更可靠的开发环境。
-
代码智能提示:TypeScript 提供了强大的智能提示功能,可以在编码过程中提供代码补全、参数提示等功能,提高开发效率。
-
更好的维护性和可读性:TypeScript 提供了类、接口、模块等面向对象的特性,使得代码更易于理解、扩展和维护。
-
生态系统丰富:TypeScript 是目前最流行的 JavaScript 超集,拥有庞大的社区和生态系统,可以轻松找到各种开源库和工具。
三、基本语法
-
声明变量:
let a: number = 10; const b: string = "Hello";
-
声明函数:
function add(a: number, b: number): number {return a + b; }
-
声明接口:
interface Person {name: string;age: number; }
-
声明类:
class Animal {name: string;constructor(name: string) {this.name = name;}sayHello() {console.log("Hello, I'm " + this.name);} }
四、类型注解
TypeScript 具有静态类型检查的能力,可以在变量、函数、参数等地方添加类型注解,帮助编译器检查代码的正确性。
-
声明变量类型:
let num: number = 10; let str: string = "Hello";
-
函数参数和返回值类型:
function add(a: number, b: number): number {return a + b; }
-
接口类型注解:
interface Person {name: string;age: number; } function sayHello(person: Person) {console.log("Hello, " + person.name); }
五、类与对象
TypeScript 支持面向对象编程,可以使用类和对象来组织代码。
-
声明类:
class Animal {name: string;constructor(name: string) {this.name = name;}sayHello() {console.log("Hello, I'm " + this.name);} }
-
创建对象:
let cat = new Animal("Tom"); cat.sayHello();
-
继承和重写:
class Dog extends Animal {sayHello() {console.log("Woof, I'm " + this.name);} } let dog = new Dog("Spike"); dog.sayHello();
六、模块化
TypeScript 提供了模块化的语法,可以将代码拆分成多个文件,提高代码的可维护性和复用性。
-
导出模块:
// utils.ts export function add(a: number, b: number): number {return a + b; }
-
导入模块:
// 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 的基本语法和特性,希望对你有所帮助。