TypeScript 基础编程笔记

22次阅读
没有评论

共计 1965 个字符,预计需要花费 5 分钟才能阅读完成。

简介

TypeScript 有助于提高代码质量,保证代码安全,更适合用在大型的企业级项目。不一定适合那些小型的、短期的个人项目。

TypeScript 官网在线编译页面 TypeScript Playground:http://www.typescriptlang.org/play/

TypeScript 官方提供的编译器叫做 tsc,可以将 TypeScript 脚本编译成 JavaScript 脚本。本机想要编译 TypeScript 代码,必须安装 tsc。

根据约定,TypeScript 脚本文件使用.ts 后缀名,JavaScript 脚本文件使用.js 后缀名。tsc 的作用就是把.ts 脚本转变成.js 脚本。

静态类型检查

在代码运行前进行检查,发现代码的错误或不合理之处,减小运行时异常的出现几率,此种检查叫「静态类型检查」,TypeScript 的核心就是「静态类型检查」,简言之就是把运行时的错误前置。

同样的功能,TypeScript 代码量要大于 JavaScript,但由于 TypeScript 代码结构更加清晰,在后期代码维护中 TypeScript 却远胜于 JavaScript。

编译 TypeScript

命令行编译

要把.ts 文件编译为.js 文件,需配置 Typescript 编译环境,步骤如下:

第一步:创建一个 index.ts 文件,例如:

const person = {
  name: '张三',
  age: 18,
}

console.log(` 我叫 ${person.name},今年 ${person.age} 岁 `)

第二步:全局安装 TypeScript:npm i typescript -g

第三步:使用 tsc 命令编译.ts 文件:tsc index,可省略后缀.ts。

自动化编译

第一步:创建 TypeScript 编译控制文件:tsc --init,工程中会生成一个 tsconfig.json 配置文件,其中包含着很多编译时的配置。默认编译的 JS 版本是 ES7,可以手动调整为其他版本,例如 "target": "ES6",

第二步:监视目录中.ts 文件变化:tsc--watch,实现自动编译。

第三步:小优化,当编译出错时不生成.js 文件:tsc --noEmitOnError --watch。当然,最好是修改 tsconfig.json 中的 noEmitOnError 配置项。

常用类型

TypeScript 有两个“顶层类型”(any 和 unknown),但是“底层类型”只有 never 唯一一个。

any 类型

any 类型表示没有任何限制,该类型的变量可以赋予任意类型的值。对于没有指定的类型,TypeScript 如果无法推断出类型,就会认为类型是 any。变量类型一旦设为 any,TypeScript 实际上会关闭这个变量的类型检查。

any 类型的变量,可以赋值给任意类型的变量。

unknown 类型

unknown 含义是未知,表示类型不确定,可能是任意类型,但是它的使用有一些限制,不像 any 那样自由,可以视为严格版的 any,适用于不确定数据的具体类型。

let a: unknown
a = 10
a = 'hello'

let x: string
// 第一种方式(加类型判断)if (typeof a === 'string') {x = a}
// 第二种方式(加断言)x = a as string
// 第三种方式(加断言)x = <string>a

unknown 类型跟 any 类型的不同之处在于,它不能直接使用。主要有以下几个限制:

  • unknown 类型的变量,不能直接赋值给其他类型的变量(除了 any 类型和 unknown 类型)
  • 不能直接调用 unknown 类型变量的方法和属性
  • unknown 类型变量能够进行的运算有限,只能进行比较运算(==、===、!=、!==、||、&&、?)、取反运算(!)、typeof 运算符和 instanceof 运算符这几种,其他运算都会报错

只有经过“类型缩小”,unknown 类型变量才可以使用。所谓“类型缩小”,就是缩小 unknown 变量的类型范围,确保不会出错。

never 类型

该类型为空,不包含任何值。由于不存在任何属于“空类型”的值,所以该类型被称为 never,即不可能有这样的值。

never 类型的一个重要特点是,可以赋值给任意其他类型。

void

void 用来表达“空”,通常用于函数返回值。函数返回值为空,调用者也不应依赖其返回值进行任何操作。

函数没有显示返回值的,会有一个隐式返回值,即 undefined(undefined 是 void 可以接受的一种空)。

TS 配置

target 设置 JavaScript 的标准版本
strict 严格模式
rootDir TS 源文件所在目录,可设置为 ./src
outDir TS 编译后生成的 JS 文件输出目录,可设置为 ./dist

参考

正文完
post-qrcode
 0
三毛
版权声明:本站原创文章,由 三毛 于2023-08-02发表,共计1965字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)