TypeScript简介及前言

青竹_正版
108 阅读4分钟

参考

概念

TypeScript(TS) 是由微软开发的基于JS的编程语言，可看作是JS的超集，最主要的是对JS添加了类型

JS是弱类型语言(动态类型)，及一个变量，既可以是数值，也可以是字符串，还可以是对象，没有使用限制，运算符可接受各种类型的值。这在系统运行时，值不稳定的类型就会是一个灾难，可能会埋下深坑，而TS可以弥补JS这个缺陷，TS是静态类型，及一个值是数字，再给它赋值字符串， 就会提示报错

静态类型优缺点

优点:

  1. 有利于代码的静态分析: 开发阶段的静态类型检查即可排查简单异常
  2. 利于发现错误
    • 每个值、每个变量、每个运算符都有严格的类型约束，TypeScript 就能轻松发现拼写错误、语义错误和方法调用错误
  3. 更好的 IDE 支持，做到语法提示和自动补全
  4. 提供了代码文档： 类型信息可以部分替代代码文档
  5. 有助于代码重构

缺点

  1. 丧失了动态类型的代码灵活性
  2. 增加了编程工作量
  3. 更高的学习成本
  4. 引入了独立的编译步骤

以上，TS对于小型的，短期的个人项目，不一定适用，可以根据项目情况考虑使用

值与类型

需要注意的是，TS只是JS中值的类型，可以将类型看做值的原属性，每一个值在TS中都有类型 例如：3是一个值，类型为number，TS代码只涉及到类型，不涉及到值，值相关的处理，都是由JS完成， 所以，TS代码中，可以理解存在两种代码，一种是'值代码'，一种是顶层的"类型代码"，在TS编译过程，就是将“类型代码”全部拿掉的过程

类型推断

TS中类型不是必须需要声明，如果没有，TS会自动进行类型推断

let str = 'abc' // 类型推断自定给str变量加上类型string
str = 123 // 报错

TS设计思想是类型声明是可选，故JS代码也是合法的TS代码，只是无法保证能正常推断出类型

TS文件代码编译

ts文件使用tsc编译器

npm install -g typescript

// hello.ts 文件
let word: string = 'hello world'
console.log(word)

tsc hello.ts

经过tsc指令，会生成对应的.js文件，可以在浏览器端运行

通常即便.ts文件异常也可以通过tsc指令编译为JS文件，如果要求更严格的测试，及如果有异常不编译成.js文件，可以增加编译参数--noEmitOnError

npx tsc --noEmitOnError hello.ts
// 当hello.ts有语法错误时，无法通过tsc编译生成.js文件

降级编译

我们可以在tsconfig.js(ts init指令生成)设置编译js的目标是ES6/5或者更早的js版本

{
  "compilerOptions": {
    "target": "es5",  
}
/* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */

严格模式

{
  "compilerOptions": {
    "strict": true,
    "alwaysStrict": false, // 打开strict也允许关闭其中一项
  }
}

使用strict相当于同时打开以下设置，

  • alwaysStrict: 脚本头部不用写"use strict"也会严格模式解析
  • strictNullChecks: 对null和undefined进行严格类型检查
  • strictBindCallApply：对函数的call()、bind()、apply()这三个方法进行类型检查
  • strictFunctionTypes：对函数更严格的参数检查
  • strictPropertyInitialization：设置类的实例属性都必须初始化
  • noImplicitAny：没有明确的类型描述且编译器无法推断报错，即any类型会报错
  • noImplicitThis：this被推断为any类型是否报错

tsc常用指令

tsc 默认使用当前目录下的配置文件tsconfig.json，但也可以接受独立的命令行参数。命令行参数会覆盖tsconfig.json，命令行参数与tsconfig.json属性基本一一对应

--init：在当前目录创建一个全新的tsconfig.json文件，里面是预设的设置。
--declaration：为 TS 脚本生成一个类型生成文件
--declarationDir：指定生成的类型声明文件的所在目录
--module：指定编译生成的模块格式
--noEmit：不生成编译产物，只进行类型检查。
--noEmitOnError：一旦报错，就停止编译，没有编译产物。
--noImplicitAny：类型推断只要为any类型就报错。
--outDir：指定编译产物的存放目录。
--skipLibCheck：跳过.d.ts类型声明文件的类型检查，加快编译速度
--watch（或者-w）：进入观察模式，只要文件有修改，就会自动重新编译。

ts-node

ts-node可以直接不编译TS文件直接运行，非官方的npm模块，由开发社区维护

npm install -g ts-node
ts-node script.ts

TS在线编译

avatar
文章
阅读
粉丝