深入浅出 TypeScript | 青训营笔记

49 阅读2分钟

课程介绍

本课程从TS基础入手,由基础类型一步步延伸到高级类型,通过示例来深入浅出的了解TypeScript的各种姿势。

笔记

TS(TypeScript)是一种基于JavaScript的静态类型语言,它可以在编译时检查和消除错误,提高代码的可读性和可维护性。TS是由微软开发的,目前在GitHub上有超过7万个星标,社区非常活跃。TS的优点是可以利用最新的JavaScript特性,同时享受类型系统带来的智能提示和重构支持。TS的缺点是需要额外的学习成本,以及编译后的代码可能不符合预期。本文将从以下几个方面介绍TS的基本概念和进阶用法:

  • TS常用类型基本概念
  • 进阶用法:类、泛型及使用场景
  • 工程向:代码检测、编译配置、tsconfig介绍
  • 工程中最佳实践、迁移工具

TS常用类型基本概念

TS中有两种类型:基础类型和对象类型。基础类型包括:

  • 布尔值(boolean)
  • 数字(number)
  • 字符串(string)
  • 数组(array)
  • 元组(tuple)
  • 枚举(enum)
  • 任意值(any)
  • 空值(void)
  • null和undefined
  • never

对象类型包括:

  • 对象字面量(object literal)
  • 接口(interface)
  • 类(class)
  • 函数(function)

TS中可以使用类型注解来显式地指定变量或参数的类型,例如:

ts
let name: string = 'Alice';
function greet(name: string): void {
console.log('Hello, ' + name);
}

  
TS中也可以使用类型断言来强制转换某个值的类型,例如:  
  
```ts  
let someValue: any = 'This is a string';  
let strLength: number = (someValue as string).length;  

进阶用法:类、泛型及使用场景

TS中的类和JavaScript中的类非常相似,都支持继承、实例化、静态属性和方法等特性。不同的是,TS中的类可以使用访问修饰符(public、private、protected)来控制成员的可见性,以及使用抽象类和接口来实现多态和约束。例如:

abstract class Animal {  
abstract makeSound(): void;  
move(): void {  
console.log('Moving...');  
}  
}  
  
interface Flyable {  
fly(): void;  
}  
  
class Bird extends Animal implements Flyable {  
constructor(public name: string) {  
super();  
}  
makeSound(): void {  
console.log('Tweet!');  
}  
fly(): void {  
console.log('Flying...');  
}  
}  
  
let bird = new Bird('Sparrow');  
bird.makeSound(); // Tweet!  
bird.move(); // Moving...  
bird.fly(); // Flying...  

TS中的泛型是一种类型参数化的技术,它可以让函数或类支持多种类型的输入和输出,而不失类型安全。泛型可以提高代码的复用性和灵活性。例如:

function identity<T>(arg: T): T {  
return arg;  
}  
  
let num = identity<number>(1); // num is of type number  
let str = identity<string>('Hello'); // str is of type string  

工程向:代码检测、编译配置、tsconfig介绍

TS的一个重要特性是可以在编译时检查代码中的错误,这可以避免运行时出现意外的问题。为了让TS能够正确地检查代码,我们需要配置一些编译选项,这些选项可以写在一个名为tsconfig.json的文件中,放在项目根目录下。