Skip to main content

Introduction

TypeScript​

  1. TypeScript也可叫做Typescript或TS，文件后缀为.ts。
  2. 一种静态类型编程语言，包含ES3、ES5、ES6等语言规范版本，是JavaScript的超集。
  3. 2012年由Microsoft推出的开源项目，并由其开发与维护。
  4. 用于框架、商业项目、前端、后端等一切使用JavaScript开发的业务，为了应对构建大规模JavaScript应用程序的挑战。
  5. 基于ECMAScript的语言规范进一步拓展的产物，在其基础上扩展了静态类型和完善了面向对象编程。

静态类型检查​

TypeScript在JavaScript的基础上建立了运行前的类型检查机制，静态类型检查是在代码运行之前检查所有的类型错误，以减少运行时程序出错的几率。

  1. 编写TS代码
  2. 检查TS代码类型
  3. TSC编译TS代码为JS代码
  4. 运行JS代码

Why​

类型是对一个值的使用的约束，可以限制一个值可以做哪些操作，以此来控制其行为。

考虑以下场景：

  1. 一个对象的属性到底存不存在可能是未知的，能不能访问或调用。
  2. 一个函数对参数的传递约定，在JavaScript中，很多情况下很难判断函数正常工作的参数条件。

以上这些未知的问题可能产生的情况，导致了对值的使用者有很多不必要的使用成本以及对项目维护的代码分析的成本。

TypeScript动态制定了一个更明确的对值的使用规范，因为类型定义和严格的约束是一个复杂或大型项目维护的基础条件。

index.ts
const obj = {
    a: 1,
    b: 2
}

// Property 'c' does not exist on type '{ a: number; b: number; }'.
console.log(obj.c);

TS与JS的区别​

类型​

TypeScript有可选的类型注解，而JavaScript是动态类型的。这意味着在TypeScript中，你可以明确变量、函数参数以及函数返回值的类型，在编译时，TypeScript将帮你捕获类型相关的错误。

语法​

TypeScript继承了JavaScript的语法，并在此基础上增加了如接口、类和命名空间等功能，这为大型项目提供了一个更加健壮和有条理的结构。

工具​

TypeScript有更好的工具支持，例如更好的编辑器集成，类型检查和代码重构。

兼容性​

TypeScript完全兼容现有的JavaScript代码，TypeScript转换生成的代码可以在任何JavaScript环境中使用。

运行时行为​

TypeScript不会改变JavaScript代码的运行时行为。

安装与配置​

typescript​

npm install --save-dev typescript

tsc​

一个TypeScript编译器命令行工具，安装TypeScript时会自动安装此工具。它可将TypeScript代码编译转换成JavaScript代码，使得代码与浏览器或者任何JavaScript运行时环境兼容。

tsc命令有许多选项和标记，允许用户自定义编译选项，可以使用—前缀来标记。

// 查看TS版本号
tsc -v

// 编译ts文件
tsc index.ts

// 自定义编译
tsc --target es5 --module commonjs index.ts

scripts​

可在package.json文件的scripts配置命令，方便测试与学习。

该命令会监听.ts文件的变化，并输出相应的.js文件，在产生编译错误时不会输出：

"scripts": {
  "dev": "tsc --noEmitOnError --watch"
},

ts-node​

ts-node是Node.js的TypeScript执行和REPL，具有sourceMap和原生ESM支持，可用来在Node.js环境下，运行TypeScript文件。

npm install -g ts-node

ts-node index.ts

ts-node更多信息可查看。

tsconfig.json​

tsconfig.json是TypeScript项目的配置文件，它明确了构建项目时的编译选项，帮助TypeScript编译器理解项目结构以及应该如何将TypeScript编译为JavaScript。

以下是一些通用选项：

  • target 要编译到的目标JavaScript版本
  • module 要编译到的目标模块系统
  • strict 启用或禁用严格类型检查
  • ouuDir 输出编译的文件目录
  • rootDir TypeScript文件的根目录
  • include 一个数组，哪些目录下的TypeScript文件需要被编译
  • 更多请查看

学习资源​

Last updated on