TypeScript 入门

开发环境

1.安装Node.js

https://nodejs.org/zh-cn/

通过 node -v 命令查看本机是否安装，如果没有安装，参考node.js安装指南 根据电脑系统环境进行安装

2.初始化一个 TypeScript 项目

mkdir project && cd project
npm init -y
npm install -save-dev typescript

3.创建 tsconfig.json 文件

方法一：在vscode 中，点击右下角版本号

创建 tsconfig.json 文件

方法二：

node_modules/.bin/tsc --init --locale zg-CN

通过这种方法创建，tsconfig.json 包含所有编译器参数以及参数说明

4.TS Playground 工具

https://www.typescriptlang.org/play

鼠标悬停在类型名上查看其类型，ctrlctrl + click查看定义和引用

5.运行 index.ts 文件

Node 不能直接运行 TypeScript 文件，需要用转换成 JavaScript 文件

执行以下命令将 TypeScript 转换为 JavaScript 代码：

tsc index.ts

使用 node 命令来执行 index.js 文件

node index.js

6.ts-node 的安装和使用

使用 ts-node 插件，不用再编译，而使用 ts-node 就可以直接看到编写结果

全局安装

npm install -g ts-node

使用

ts-node index.ts  

基础知识

1.TypeScript 程序由以下几个部分组成

• 模块
• 函数
• 变量
• 语句和表达式
• 注释

2.空白和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。

空格、制表符通常用来缩进代码，使代码易于阅读和理解。

3.TypeScript 区分大小写

TypeScript 区分大写和小写字符。

4.分号是可选的

每行指令都是一段语句，你可以使用分号或不使用， 分号在 TypeScript 中是可选的，建议使用。

如果语句写在同一行则一定需要使用分号来分隔，否则会报错。

5.TypeScript 注释

• 单行注释 ( // ) − 在 // 后面的文字都是注释内容。
• 多行注释 (/* */) − 这种注释可以跨越多行。

基础类型

值空间与类型空间

只包含类型声明的 namespace 不会产生 JS 代码,不会引入变量

instanceof 操作符只作用于值空间

如何判断符号是在哪个空间?

1. 转译后消失的符号 → 类型空间
2. 作为类型注解、别名的符号 → 类型空间

( type T = typeof Person; const p: Person）

1. 类型断言后的符号 → 类型空间 ( target as/is HTMLElement )
2. const,、let、var 后面的符号 → 值空间
3. class、enum、namespace 后的符号 → 值空间 + 类型空间

有一些操作符在两个空间都存在，但是含义完全不同:

typeof

在值空间，typeof 返后面表达式对应的 JavaScript 类型的字符串表示

( string , number , bigint , boolean , symbol , undefined , object , function )在类型空间，typeof返回标识符对应的 TypeScript 类型

（索引访问操作符 Indexed Access Operator）

在值空间，valfield 或 val.field 返回 val 对应属性的值

在类型空间，TypeT 返回对应 TS 类型

this关键字

在值空间，this 指向...比较复杂

在类型空间，this 可以作为类方法的返回值来实现链式调用

&| 运算符

在值空间表示 “按位与” 和 “按位或” (Bitwise AND，OR)

在类型空间表示类型的交叉和联合

const

在值空间用来声明常量

在类型空间与 as 连用,即 “as const” 常量断言，收窄类型

extends

在值空间用于定义子类（class A extends B）

在类型空间用来进行类型约束（T extends number）或接口继承（interface A extends B）

in

在值空间用于for循环（for （key in object）{ ...}）和判断属性是否存在（ name in person）

在类型空间用于映射类型的 key 的声明（Mapped Type）