【TypeScript】TypeScript 初识

什么是 TypeScript

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。

2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript

TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。

TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。

TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码开源于 GitHub 上

TypeScript 三大特点

• 始于JavaScript，归于JavaScript

TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。

• 强大的类型系统

类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

• 先进的 JavaScript

TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件

TypeScript 快速上手

安装 TypeScript

首选安装好 node 环境

下载地址：https://nodejs.org/zh-cn/

命令行运行如下命令，全局安装 TypeScript

npm install -g typescript

安装完成后，在控制台运行如下命令，检查安装是否成功

tsc -V

TypeScript 程序

src/main.ts

(() => {
    function hello(name: string) {
        return "你好啊！" + name;
    }

    console.log(hello('NoNo'))
})()

手动编译

手动编译，因为是 .ts 文件，文件不能被 浏览器 运行，需要编译成 js 文件

在终端中打开，输入tsc main.ts，自动生成编译好的 mian.js 文件

vscode 自动编译

命令行生成配置文件tsconfig.json

tsc --init

修改tsconfig.json 配置

"outDir": "./src", // 指定编译输出目录
"strict": false,   // 关闭严格模式

依次点击启动监视任务，当文件保存了改变，就会自动编译

终端 -> 运行任务 -> 所有任务 ->  监视tsconfig.json

类型注解

TypeScript 的带来的高级功能

// 基本类型的注解
function hello(name: string) {
        return "你好啊！" + name;
    }

接口 实现复杂注解

使用接口，实现复杂注解

interface Person {
        firstName: string,
        lastName: string
    }

function hello(name: Person) {
    return "你好啊！" + name.firstName + '·' + name.lastName;
}
let user = {
    firstName: 'No',
    lastName: 'No'
}
console.log(hello(user))

类

TypeScript 支持 JavaScript 的新特性，比如支持基于类的面向对象编程。

class Person {
        firstName: string // 属性
        lastName: string
        // 构造函数
        constructor(firstName: string ,lastName: string){
            this.firstName = firstName
            this.lastName = lastName
        }
    }

function hello(name: Person) {
    return "你好啊！" + name.firstName + '·' + name.lastName;
}
let user = new Person('No','No')
console.log(hello(user))