TypeScript 入门

2021-08-23 18:29:17 浏览数 (1)

开发环境

1.安装Node.js

代码语言:txt复制
https://nodejs.org/zh-cn/

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

2.初始化一个 TypeScript 项目

代码语言:txt复制
mkdir project && cd project
npm init -y
npm install -save-dev typescript

3.创建 tsconfig.json 文件

方法一:在vscode 中,点击右下角版本号

创建 tsconfig.json 文件创建 tsconfig.json 文件

方法二:

代码语言:txt复制
node_modules/.bin/tsc --init --locale zg-CN

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

4.TS Playground 工具

代码语言:txt复制
https://www.typescriptlang.org/play

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

5.运行 index.ts 文件

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

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

代码语言:txt复制
tsc index.ts

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

代码语言:txt复制
node index.js

6.ts-node 的安装和使用

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

全局安装

代码语言:txt复制
npm install -g ts-node

使用

代码语言:txt复制
ts-node index.ts  

基础知识

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

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

2.空白和换行

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

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

3.TypeScript 区分大小写

TypeScript 区分大写和小写字符。

4.分号是可选的

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

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

5.TypeScript 注释

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

基础类型

数据类型

关键字

描述

任意

any

声明为 any 的变量可以赋予任意类型的值。

数字

number

双精度 64 位浮点值。它可以用来表示整数和分数。

字符串

string

一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。 |

布尔

boolean

表示逻辑值:true 和 false。

数组

在元素类型后面加上[],或者使用数组泛型

元组

元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。

枚举

enum

枚举类型用于定义数值集合。

void

void

用于标识方法返回值的类型,表示该方法没有返回值。

null

null

表示对象值缺失。

undefined

undefined

用于初始化变量为一个未定义的值

never

never

never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。

值空间与类型空间

只包含类型声明的 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)

0 人点赞