TypeScript 入门

╰半夏微凉° 2022-05-19 23:19 263阅读 0赞

*  TypeScript
    
     *  类型注解
     *  接口
     *  类
 *  运行TypeScript Web应用

# TypeScript #

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，  
而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

TypeScript是一个应用程序级的JavaScript开发语言。

*  TypeScript 是 JavaScript 的超集，可以编译成纯 JavaScript。
 *  TypeScript 跨浏览器、跨操作系统、跨主机，开源。
 *  Starts from JavaScript, Ends with JavaScript
 *  TypeScript 遵循 JavaScript 的语法和语义，方便了无数的 JavaScript 开发者。
 *  TypeScript 可以重用现有的 JavaScript 代码，调用流行的 JavaScript 库。
 *  TypeScript 可以编译成简洁、简单的 JavaScript 代码，在任意浏览器、Node.js 或任何兼容 ES3的 环境上运行。  
    ![这里写图片描述][2018081910051049]  
    
    
    > [在线 compiler 开发][compiler]

本地compiler开发

*  安装

npm install -g typescript

构建你的第一个TypeScript文件  
`greeter.ts`：

function greeter(person) { 
        return "Hello, " + person;
    }
    let user = "Jane User";
    document.body.innerHTML = greeter(user);

运行 `tsc greeter.ts` 命令生成 `greeter.js` 文件

## 类型注解 ##

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式

function greeter(person: string) { 
      return "Hello, " + person;
    }

传入非指定类型的参数，重新编译，你会看到产生了一个错误。

let user = [0, 1, 2];
    document.body.innerHTML = greeter(user);

![这里写图片描述][20180729174120183]  
尽管有错误，`greeter.js` 文件还是被创建了。 就算你的代码里有错误，你仍然可以使用TypeScript。  
但在这种情况下，TypeScript会警告你代码可能不会按预期执行。

## 接口 ##

在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。  
这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements 语句。

// 使用接口来描述一个 指定字段的值类型的的对象
    interface Person { 
        firstName: string;
        lastName: string;
    }
    // 实现接口时需要保证包含了接口要求的字段结构
    function greeter(person: Person) { 
        return "Hello, " + person.firstName + " " + person.lastName;
    }
    
    let user = { firstName: "Jane", lastName: "User" };
    document.body.innerHTML = greeter(user);

## 类 ##

最后，让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。

让我们创建一个Student类，它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作，程序员可以自行决定抽象的级别。

还要注意的是，在构造函数的参数上使用public等同于创建了同名的成员变量。

// 创建 student 类
    class Student { 
        // 成员变量
        fullName: string;
        // 构造函数的参数上使用public 等同于 创建了同名的成员变量
        constructor(public firstName, public middleInitial, public lastName) {
            this.fullName = firstName + " " + middleInitial + " " + lastName;
        }
    }
    
    interface Person { 
        firstName: string;
        lastName: string;
    }
    
    function greeter(person : Person) { 
        return "Hello, " + person.firstName + " " + person.lastName;
    }
    // 实例化类并传入参数
    let user = new Student("Jane", "M.", "User");
    
    document.body.innerHTML = greeter(user);

重新运行tsc greeter.ts，你会看到生成的JavaScript代码和原先的一样。 TypeScript里的类只是JavaScript里常用的基于原型面向对象编程的简写。

# 运行TypeScript Web应用 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>greeter</title>
    </head>
    <body>
        
        <script src="greeter.js"></script>
    </body>
    </html>

![这里写图片描述][20180729180243621]

[2018081910051049]: /images/20220520/1a6347e626a44cdba3eb11dd07542fd2.png
[compiler]: http://www.typescriptlang.org/play/
[20180729174120183]: /images/20220520/a7b19f99928f4c91b8360ddf2c29c990.png
[20180729180243621]: /images/20220520/c756cc00711b450c90300966a1bca0c1.png