二、了解并快速入门

TypeScript

# 概述

TypeScript是一个基于JavaScript之上的编程语言,是JavaScript的超集(superset)。和Flow一样,也是旨在解决JavaScript类型系统的问题。下图我们可以清楚的看出:JavaScriptES6TypeScript的关系

TypeScript静态类型的语言,在开发的时候使用TypeScript,但是浏览器环境是不支持TypeScript运行的,必须在生产环境进行编译成JavaScript才支持,所以需要提前进行编译。同时,TypeScript不是强类型语言,因为需要兼容JavaScript的隐式类型转换,它只是提前了类型检查的时机,并没有让类型系统本身变得更严格。

# TypeScript优缺点

# 优势

  • 解决JavaScript类型系统不足,在开发阶段就进行类型检查,可以大大提高代码的可靠程度。
  • 渐进式开发,如果不会TypeScript,一开始使用JavaScript也是支持的,可以学一个特性用一个特性。
  • TypeScript相比较Flow的类型检查,功能更加强大,生态也更加健全、完善。
  • 逐渐应用广泛,AngularVue3.0都已经开始使用了,TypeScript已经成为前端领域的第二语言。

# 缺点

  • 语言本身多了很多概念,提高了学习成本
  • 项目初期,引入TypeScript会增加一些成本,还需要进行编译处理

# 起步

# 安装

npm-typescript (opens new window)

# yarn
yarn add typescript --dev

# npm
npm install -g typescript
1
2
3
4
5

安装完成后,在node-Modules/bin 目录下有tsc的文件,我们可以使用tsc去将ts文件转化成js文件

# 创建文件

src文件夹中添加一个后缀是.ts 的文件

// 随便写写,先按照js原生写,使用ES6新特性
const hello = (name: string) => {
  console.log(name)
}

hello('TypeScript')
1
2
3
4
5
6

# 执行编译命令

# yarn
yarn tsc hello-TypeScript.ts

# npm
tsc .\src\hello-TypeScript.ts
1
2
3
4
5

会在同名目录下添加一个编译后的js文件

// 已经全部转换成es3语法(默认是es3)
var hello = function (name) {
    console.log(name);
};
hello('TypeScript');
1
2
3
4
5
更新时间: 2021-09-15 12:03