这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

第四课 TypeScript

配置TS环境

1. 下载Node.js
2. 安装Node.js
3. 使用npm全局安装typescript
   • 进入命令行
   • 输入：npm i -g typescript
   • 之后可以tsc -v查看版本
   • 可以tsc ts文件名去编译生成对应的js文件
   • 但是在VScode用tsc会报红色错误
     • 以管理员身份运行 PowerShell，并执行命令set-ExecutionPolicy RemoteSigned将PowerShell的执行策略更改为RemoteSigned
       • 具体步骤如下：
       • ① 使用 win+x 快捷键，会出现如下弹窗，鼠标左键单击Windows PowerShell 即可打开shell.
       • ② 运行 set-ExecutionPolicy RemoteSigned 命令，在询问更改执行策略的时候选择敲Y或者A
       • ③ 运行 get-ExecutionPolicy 命令，可看到脚本的执行策略已被更改为 RemoteSigned
       • ④ 回到vscode的终端，输入命令 tsc -v 不再报错，也可对ts文件进行编译。
4. 创建一个ts文件
5. 使用tsc对ts文件进行编译

• 进入命令行
• 进入ts文件所在目录
• 执行命令：tsc xxx.ts
• 并且在一个没有任何设置的普通项目中，vscode编辑器会把当前打开的 ts 文件当作一个整体的作用域，进行验证，所以同名的会出现问题，不过这里我们只是学习基础知识，在后面的正式项目中不会有这个问题。这里解决方案就是，把冲突的文件关闭就可以了。

一、TypeScript 的发展与基本语法

1.1、为什么什么是TypeScript

JS：动态类型（在执行阶段才去确定一个类型的匹配）、弱类型语言（类型转换）

TS：静态类型（提前有一个编译流程）、弱类型语言

及编译过程是在执行时还是在执行前

• 静态类型：
  • 代码可读性增强：基于语法解析TSDoc生成文档，而且基于静态类型ide增强
  • 可维护性增强：在编译阶段暴露大部分错误
  • 多人合作的大型项目中，获得更好的稳定性和开发效率
• 是JS的超集：
  • 包含于兼容多有JS特性，支持与JS一起存在
  • 支持渐进式引入与升级

1.2 基本语法

• 通过interface关键字来自定义类型IBytedancer
  • readonly：只读状态
  • 在冒号前加问好即可选属性
  • [key:string]:any任意属性

// 也可以直接使用字面量进行类型声明
let a: 10;
// 指的是a的类型是10，就像是常量
a = 10;
// a = 11;不行

// 可以使用 | 来连接多个类型（联合类型）
let b: "male" | "female";
// b可以赋值两个常量
b = "male";
b = "female";

let c: boolean | string;
c = true;
c = 'hello';

// any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时，不建议使用any类型
// let d: any;

// 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any （隐式的any）
let d;
d = 10;
d = 'hello';
d = true;

// unknown 表示未知类型的值
let e: unknown;
e = 10;
e = "hello";
e = true;

let s:string;

// d的类型是any，它可以赋值给任意变量
// s = d;

e = 'hello';

// unknown 实际上就是一个类型安全的any
// unknown类型的变量，不能直接赋值给其他变量
if(typeof e === "string"){
    s = e;
}

// 类型断言，可以用来告诉解析器变量的实际类型
/*
* 语法：
*   变量 as 类型
*   <类型>变量
*
* */
s = e as string;
s = <string>e;

// void 用来表示空，以函数为例，就表示没有返回值的函数
function fn(): void{
}