什么是 TypeScript ? 快速上手 TypeScript

什么是 TypeScript ?

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

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

TypeScript 特点

  1. 类型系统:TypeScript支持静态类型、动态类型的检查,还有类型推断功能,让程序员能够更好地编写易于维护、可扩展且可读性高的代码。

  2. 强大的开发工具:TypeScript具有完整的编辑器和开发工具支持,包括语法高亮、自动补全、重构等功能,还支持多种常用的构建工具。

  3. 容易上手:TypeScript基于JavaScript语言,对于已经掌握JavaScript开发的开发者们来说,学习成本相应较低,只需要花费少量时间阅读文档和实践即可。

  4. 增强代码质量:TypeScript能够在编译时发现代码中的潜在错误,减少运行时异常导致的问题,同时提高代码的可读性和可维护性。

  5. 兼容性:TypeScript兼容JavaScript的所有版本和第三方库,可以无缝地向已有的JavaScript项目中引入TypeScript。

  6. 社区支持:TypeScript拥有庞大的社区支持,有丰富的文档和资源可供使用,并且在GitHub上有着很高的活跃度。

 TypeScript和JavaScript相比优势在哪里?         

  1. 更好的可维护性:由于TypeScript的类型系统,它能够更好地发现潜在的编程错误,提高了代码的可维护性和健壮性。同时,TypeScript支持面向对象编程,增加了代码结构化和重用的可能性。

  2. 更为丰富的开发工具:TypeScript支持编辑器自动补全、语法检查等功能,还支持调试、重构和格式化等高级开发功能,提高了开发效率和代码质量。

  3. 容易上手:TypeScript和JavaScript有很多共同点,如果已经熟悉JavaScript的开发人员可以快速学习并掌握TypeScript。

  4. 更好的可扩展性:TypeScript允许使用模块化编程,支持命名空间和模块导入等机制,在项目规模逐渐变大时,仍能保持可维护和可扩展。

  5. 家喻户晓的背景与社区支持:TypeScript是微软开源的项目,在开发者中得到广泛认知和应用;同时拥有庞大的社区支持和活跃的更新频率,在解决问题和分享经验方面要比JavaScript更加便捷。

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

安装 TypeScript 

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

  • 通过npm(Node.js包管理器)
  • 安装Visual Studio的TypeScript插件

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

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

快速上手 

  1. 创建并编辑TypeScript文件:创建一个 .ts 后缀的TypeScript文件,使用任何文本编辑器打开并开始编写代码。在TypeScript中可使用ECMAScript标准的语法及新特性;同时要根据需要,声明变量的类型。

  2. 编译TypeScript文件:使用tsc命令将TypeScript文件编译成JavaScript文件,在终端中输入 tsc 文件名.ts 并按回车键即可生成同名.js后缀的JavaScript文件。

  3. 引入JavaScript文件:在HTML页面中引入编译好的JavaScript文件即可。注意JavaScript文件路径和引用方式的正确性。

  4. 运行浏览器:在浏览器中打开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 枚举,该枚举具有三个可能的值:RedGreenBlue。请注意,在默认情况下,从 0 开始为枚举值进行自动编号。

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

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

泛型(Generics)

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

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

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

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

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

        最后,我们将这两个变量输出到控制台,以查看它们的值。由于 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,javascript,开发语言)