Typescript基础

介绍

typescript 是 javascript 的一个超集，typescript 可以运行于任何系统，并且是开源免费的。

typescript 有以下几个特点

• typescript 会在编译时对代码进行严格的静态类型检查，可以在编码阶段就发现问题，而不是在上线运行时才发现
• typeScript 语法遵循 ES 规范，更细速度快，不断支持最新的 ECMAScript 新特性，如装饰器、public/private 修饰符
• typescript 支持 OOP（面向对象）的接口，抽象类，多态特性
• typescript 可以为 IDE 提供更好的代码补全、接口提示、跳转到定义

安装环境

node

首先需要安装 node.js (opens new window)我相信做前端的都已经安装了

全局安装 TS

执行以下命令安装 typescript

npm install -g typescript

mac 系统也可以执行

brew install typescript

安装后执行以下命令检查是否安装成功

PS D:\thl\ts_demo> tsc -v
Version 5.2.2

项目安装 TS

除了全局安装外，也可以在项目中独立安装 typescript，这可以限定项目使用的 typescript 版本

npm init -y

安装 typescript

npm install -D typescript

查看版本

tsc -v

编译 TS

使用 tsc 命令可以将 ts 文件编译为 js 文件，如果在编译过程中有 ts 错误将在命令行报出

tsc index.ts

动态监听

tsc index.ts -w

常见问题

windows

如果在 windows 系统中执行 tsc 命令报以下错误

需要以管理员身份执行 powerShell，然后执行以下命令，在出现的提示选择 Y

set-ExecutionPolicy RemoteSigned  //选择A

配置文件

初始化

执行以下命令创建配置项

tsc --init

然后执行以下命令使用配置项的定义进行监测

tsc -w

也可以使用 vscode 终端 > 运行任务 >typescript菜单运行监视

配置选项

配置	说明
noImplicitAny	禁止使用隐含的 any 类型，如函数参数没有设置具体类型
strictNullChecks	开启时不否允许将 null、undefined 赋值给其他类型比如字符串
target	转换成 JS 的版本
strict	是否严格模式执行
module	使用的模块系统

代码注释

单行注释

单行注释使用双斜线“//”来表示，并且不允许换行。

// let lh: object
// lh = { naem: "隆海" }
// lh = {}
// lh = []
// lh = Object.prototype

多行注释

/**
 * function fn(a: number, b: number) {
    return a + b
}
const lh: string = "晚生隆海"
 */

多行注释以“/”符号作为开始并以“/”符号作为结束。正如其名，多行注释允许换行。

区域注释

区域注释不是一种新的注释语法，它借助单行注释的语法实现了定义代码折叠区域的功能

//#region定义了代码折叠区域的起始位置，//#endregion定义了代码折叠区域的结束位置

//#region
function fn(a: number, b: number) {
  return a + b;
}
const pl: number = 94742;
const wslh: Array<string> = [];
wslh.push("我是一咸鱼");
wslh.push("不怕咸");
console.log(wslh);
let userInfo: { name: string; age: number; hobby?: string };
userInfo = { name: "隆海", age: 18 };
userInfo = { name: "晚生", age: 18, hobby: "火锅" };
//#endregion

数据类型

字符串

字符串使用 string 来声明

const lh: string = "晚生隆海";

数值

在 TS 中不区分整数与浮点数，都使用 number 来声明

const pl: number = 94742;

数组

数组值类型为字符串

const lh: string[] = ["晚生", "隆海"];

使用泛型来声明数组

var lh = ['晚生', '隆海'];
var wslh = [];
wslh.push('我是一咸鱼');
wslh.push('不怕咸');
console.log(wslh); #[ '我是一咸鱼', '不怕咸' ]

元组

明确数组每个成员值类型的数组为元组

let lh: [string, number, boolean];

lh = ["111", 222, true];

对象

声明对象类型但不限制值类型

let lh: object;
lh = { naem: "隆海" };
lh = {};
lh = []; //数组是对象
lh = Object.prototype;

限定对象值类型

let userInfo: { name: string; age: number };
userInfo = { name: "隆海", age: 18 };

后面跟上? 用来指定 url 为可选值，这样的属性是非必填项

let userInfo: { name: string; age: number; hobby?: string };

userInfo = { name: "隆海", age: 18 };
userInfo = { name: "晚生", age: 18, hobby: "火锅" };

any

使用 any 指包含所有值的顶部类型，所以 any 不进行类型检查，等于关闭了 TS 对该变量的严格类型校验

• 使用 any 类型等同于使用纯 JavaScript 的开发方式
• any 类型是顶部类型，所有其他类型是他的子类型
• 使用 any 类型将失去 typescript 静态类型的强制检测
• 只有在描述一个根本不知道的类型时使用 any