什么是 TypeScript ? 极快上手 TypeScript

一只小可乐吖

2024-04-27 帮助1人

什么是 TypeScript ？

TypeScript是一种由微软开发的开源编程语言，它是JavaScript语言的一个超集，支持JavaScript中的所有语法和特性，并在此基础上添加了一些新的特性。

TypeScript与JavaScript最大的不同是它引入了静态类型检查机制，通过在编译时检查变量的类型，可以帮助程序员更快速地找出代码中潜在的错误。

TypeScript 特点

类型系统：TypeScript支持静态类型、动态类型的检查，还有类型推断功能，让程序员能够更好地编写易于维护、可扩展且可读性高的代码。
强大的开发工具：TypeScript具有完整的编辑器和开发工具支持，包括语法高亮、自动补全、重构等功能，还支持多种常用的构建工具。
容易上手：TypeScript基于JavaScript语言，对于已经掌握JavaScript开发的开发者们来说，学习成本相应较低，只需要花费少量时间阅读文档和实践即可。
增强代码质量：TypeScript能够在编译时发现代码中的潜在错误，减少运行时异常导致的问题，同时提高代码的可读性和可维护性。
兼容性：TypeScript兼容JavaScript的所有版本和第三方库，可以无缝地向已有的JavaScript项目中引入TypeScript。
社区支持：TypeScript拥有庞大的社区支持，有丰富的文档和资源可供使用，并且在GitHub上有着很高的活跃度。

TypeScript和JavaScript相比优势在哪里？

更好的可维护性：由于TypeScript的类型系统，它能够更好地发现潜在的编程错误，提高了代码的可维护性和健壮性。同时，TypeScript支持面向对象编程，增加了代码结构化和重用的可能性。
更为丰富的开发工具：TypeScript支持编辑器自动补全、语法检查等功能，还支持调试、重构和格式化等高级开发功能，提高了开发效率和代码质量。
容易上手：TypeScript和JavaScript有很多共同点，如果已经熟悉JavaScript的开发人员可以快速学习并掌握TypeScript。
更好的可扩展性：TypeScript允许使用模块化编程，支持命名空间和模块导入等机制，在项目规模逐渐变大时，仍能保持可维护和可扩展。
家喻户晓的背景与社区支持：TypeScript是微软开源的项目，在开发者中得到广泛认知和应用；同时拥有庞大的社区支持和活跃的更新频率，在解决问题和分享经验方面要比JavaScript更加便捷。

总之，尽管使用TypeScript需要额外的类型定义和编写工作，但它能够带来更高的代码质量和可维护性，同时提高了开发效率。而JavaScript则更适用于快速的原型开发、小规模应用等场景。

安装 TypeScript

有两种主要的方式来获取TypeScript工具：

通过npm（Node.js包管理器）
安装Visual Studio的TypeScript插件

这里，我们通过npm来安装/更新typescript

TypeScript解释器npm install -g typescript -g 全局安装，在本机上哪里都能用
tsc空格-v命令用来测试是否安装成功

快速上手

创建并编辑TypeScript文件：创建一个 .ts 后缀的TypeScript文件，使用任何文本编辑器打开并开始编写代码。在TypeScript中可使用ECMAScript标准的语法及新特性；同时要根据需要，声明变量的类型。
编译TypeScript文件：使用tsc命令将TypeScript文件编译成JavaScript文件，在终端中输入 tsc 文件名.ts 并按回车键即可生成同名.js后缀的JavaScript文件。
引入JavaScript文件：在HTML页面中引入编译好的JavaScript文件即可。注意JavaScript文件路径和引用方式的正确性。
运行浏览器：在浏览器中打开HTML文件，查看运行结果。

完成以上步骤，即可在Web项目中使用TypeScript。

TypeScript 语法

TypeScript 是 JavaScript 的超集，基本语法都与 JavaScript 类似。但是 TypeScript 在原有的语法上新增了一些特性，主要包括以下内容：

类型注解

使用 : 表示变量的类型，在定义变量或函数时需要给出类型说明。 TypeScript 中的类型注解通过冒号（:）来指定类型。例如：

let num: number = 10;
let str: string = 'hello';
function add(num1: number, num2: number): number {
return num1 num2;
}

在上面的代码中，变量num和str分别被注释为number和string类型。函数add也被注释为接受两个参数（都是number类型）并返回一个number类型的函数。

通过使用类型注解，可以帮助开发人员更准确地描述数据的类型，提高代码的可读性和可维护性，以及减少类型相关的错误。

类（Class）

TypeScript是JavaScript的上层语言，可以被编译成JavaScript。在TypeScript中，可以定义类，类是一种面向对象编程的基本结构。类是一种模板，它描述了一些对象共同的属性和方法。类的实例被称为对象。

定义类的语法如下：

class ClassName {
// 类的属性和方法
}

类可以包含属性和方法，属性是类的特征，方法是类的行为。属性和方法可以是公共的（public）、私有的（private）或受保护的（protected）。公共属性和方法可以在类的外部访问，私有属性和方法只能在类的内部访问，受保护属性和方法只能在类和子类中访问。

下面是一个示例：

class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
public sayHello() {
console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
}
}
let p = new Person('Tom', 18);
p.sayHello();

在上面的示例中，定义了一个Person类，它有两个属性（name和age），一个构造函数和一个方法（sayHello）。构造函数用于创建实例对象，方法用于输出实例对象的信息。在创建实例对象时，需要传入name和age两个参数。然后调用实例对象的sayHello方法输出实例对象的信息。

接口（Interface）

TypeScript 接口（Interface）是一个约定，用于指定代码中对象的属性和方法。它们提供了一种结构化的方式来定义对象的类型。

在 TypeScript 中，可以使用接口来描述对象的形状，包括对象的属性和方法。例如：

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

上面的代码定义了一个名为 Person 的接口，该接口指定了对象应具有的属性和方法。具体来说，该对象必须包括一个名为 name 的字符串属性、一个名为 age 的数值属性、以及一个名为 sayHello 的方法，该方法不需要返回值（void）。

使用接口可以帮助 TypeScript 在编译时检查代码的类型，从而帮助开发人员发现和修复可能出现的错误。

枚举（Enum）

TypeScript 枚举（Enum）是一种将一组相关值定义为常量的方式。枚举类型提供了一种更具表现力的方式来表示一组相关的值，而不是使用基本类型或对象来表示这些值。

以下是一个简单的示例，演示如何声明和使用 TypeScript 枚举：

enum Color {
Red,
Green,
Blue
}
let c: Color = Color.Green;
console.log(c); // 输出 1

在上面的示例中，我们声明了一个 Color 枚举，该枚举具有三个可能的值：Red、Green 和 Blue。请注意，在默认情况下，从 0 开始为枚举值进行自动编号。

然后，我们创建了一个名为 c 的变量，并将其设置为枚举的值 Green。最后，我们将 c 输出到控制台，以查看其值。

枚举类型还提供了其他一些有用的功能，例如在枚举中指定自定义数值和字符串标签，以及将枚举与命名空间结合使用。

泛型（Generics）

TypeScript 泛型（Generics）是一种用于创建可重用代码组件的工具。泛型使您能够在编写函数、类和接口时编写一些不仅适用于当前数据类型的代码，而是适用于任何数据类型。

以下是一个简单的示例，演示如何声明和使用 TypeScript 泛型：

function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("hello");
let output2 = identity<number>(42);
console.log(output1); // 输出 "hello"
console.log(output2); // 输出 42

在上面的示例中，我们声明了一个名为 identity 的泛型函数。在尖括号内，我们指定 T 作为类型变量，表示该函数将接受任何类型的参数。函数的参数和返回值类型都是 T 类型，这意味着函数将返回与输入参数类型相同的值。

然后，我们使用了 identity 函数来创建两个变量 output1 和 output2。在这两种情况下，我们使用尖括号将数据类型传递给泛型函数，以告诉函数要使用的数据类型。

最后，我们将这两个变量输出到控制台，以查看它们的值。由于 identity 函数返回的类型与输入参数类型相同，因此输出将分别为字符串和数字。

泛型还有其他一些有用的功能，例如在泛型中使用类型约束、创建泛型类和接口等等。

装饰器（Decorators）

TypeScript 装饰器（Decorators）是一种特殊的声明，用于将元数据附加到类、方法、属性或参数等程序元素上。使用装饰器，我们可以在编写代码时附加元数据，并可以使用元数据来实现某些运行时行为，例如验证、日志记录和性能跟踪等。

以下是一个简单的示例，演示如何使用装饰器来记录类方法的调用：

function log(target: Object, key: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Method ${key} called with args: ${JSON.stringify(args)}`);
const result = originalMethod.apply(this, args);
console.log(`Method ${key} returned ${JSON.stringify(result)}`);
return result;
};
return descriptor;
}
class MyClass {
@log
myMethod(arg1: string, arg2: number) {
console.log(`myMethod called with ${arg1} and ${arg2}`);
return { value: arg1 arg2 };
}
}
const myInstance = new MyClass();
myInstance.myMethod("hello", 42);

在上面的示例中，我们声明了一个名为 log 的装饰器函数。该函数接受三个参数：目标对象、属性名和属性描述符。在装饰器函数中，我们将原始方法保存到 originalMethod 变量中，然后将新的方法定义为一个函数，它会记录方法的调用和返回值，然后调用原始方法并返回结果。

在 MyClass 类中，我们使用了 @log 装饰器来修饰 myMethod 方法。在运行时，装饰器会修改 myMethod 方法的行为，使其记录方法调用和返回值。

最后，我们创建一个 MyClass 实例，并调用 myMethod 方法，查看其输出。

这只是 TypeScript 装饰器的一小部分功能。还可以使用装饰器来实现许多其他有用的功能，例如依赖注入、路由映射和数据绑定等等。

命名空间（Namespace）

TypeScript 命名空间（Namespace）是一种组织代码的方式，用于解决在大型应用程序中命名冲突的问题。命名空间可以包含变量、函数、类和其他命名空间。

命名空间可以使用 namespace 关键字来定义，例如：

namespace MyNamespace {
export const myVariable = "Hello";
export function myFunction() {
console.log("Hello from myFunction!");
}
export class MyClass {
constructor(public name: string) {}
sayHello() {
console.log(`Hello from ${this.name}!`);
}
}
}

在上面的示例中，我们定义了一个名为 MyNamespace 的命名空间，该命名空间包含一个常量 myVariable、一个函数 myFunction 和一个类 MyClass。

注意，在命名空间中，如果要将变量、函数或类暴露给外部使用，必须使用 export 关键字将它们标记为公共的可见成员。

我们可以在命名空间之外使用 import 关键字导入命名空间中的成员，例如：

import { MyNamespace } from "./my-namespace";
console.log(MyNamespace.myVariable);
MyNamespace.myFunction();
const myInstance = new MyNamespace.MyClass("Bob");
myInstance.sayHello();

在上面的示例中，我们从 my-namespace.ts 文件中导入了 MyNamespace 命名空间，然后使用 MyNamespace 中的成员。

需要注意的是，命名空间的使用已经逐渐被淘汰，现在推荐使用 ES6 的模块化方案来组织代码。

元组（Tuple）

在TypeScript中，元组（Tuple）是指具有固定数量元素的数组，元素的类型可以是不同的。元组可以用于表示某些具有固定结构的数据，例如日期和时间等。

元组的语法格式为：

let tupleName: [type1, type2, ...];

例如：

let myTuple: [string, number] = ["hello", 123];

这里定义了一个元组 myTuple，它包含两个元素，第一个元素的类型是 string，第二个元素的类型是 number。可以使用下标访问元组中的元素：

console.log(myTuple[0]); // 输出 "hello"
console.log(myTuple[1]); // 输出 123

需要注意的是，元组的长度固定，无法添加或删除元素。同时，元素类型也是固定的，不可以修改。

以上是 TypeScript 中新增的部分语法，除此之外，TypeScript 也可以使用 ES6/ES7 的新特性，如箭头函数、let 和 const 模板字符串等。

这篇好文章是转载于：学新通技术网

什么是 TypeScript ? 极快上手 TypeScript