Typescript学习笔记

构建日期：2022年12月20日

学习node版本：v16.18.1

开发工具

首选vscode，安装必备插件：

1. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
2. Live Server 插件
3. Javascript And TypeScript Nightly

备注：vscode历史版本下载：https://code.visualstudio.com/updates

离线下载vscode插件：https://marketplace.visualstudio.com/

• Iconify IntelliSense - Iconify 图标插件
• windicss IntelliSense - windicss 提示插件
• I18n-ally - i18n 插件
• Volar - vue 开发必备
• ESLint - 脚本代码检查
• Prettier - 代码格式化
• Stylelint - css 格式化
• DotENV - .env 文件 高亮

参考学习教程

1. 小满TypeScript基础教程全集（完结）

   https://www.bilibili.com/video/BV1wR4y1377K/

2. 小满zs的博客_CSDN博客-Vue3,typeScript,nest-js领域博主

   https://blog.csdn.net/qq1195566313?type=blog

3. TypeScript 中文手册

   https://typescript.bootcss.com/

4. 【尚硅谷】Vue3全套教程Web前端丨vuejs轻松掌握

   https://www.bilibili.com/video/BV1NR4y1x7Ab

   https://24kcs.github.io/vue3_study/

安装Typescript

1. 先安装nodejs

2. 全局安装typescript

   npm install typescript -g
   

3. 安装时临时切换为淘宝镜像

   npm install typescript -g --register=https://registry.npm.taobao.org
   

编译ts文件

tsc app.ts

编译为同名js文件，比如app.js，运行时使用node来运行：

node app.js

在vscode中自动编译

1. 生产tsconfig.json；

   tsc --init

2. 修改参数 outDir 和 strict；outDit修改为目录，strict修改为true

   “outDir”: “./js”,

   “strict”: false,

3. 在vscode中点击 终端–>运行任务–>显示所有任务–>选择tsc:watch

   tsc -p tscconfig.json --watch

扩展

–help -h 显示帮助信息

–watch -w 监听模式

–project -p 指定编译配置文件

–outfile 指定编译后的文件名

–target -t 设置编译版本，默认是es3，可选 es3, es5, es6/es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, esnext

tsc app.ts -t es5

编译错误提示

error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.

错误提示指编译到版本ES5或以上，可以在编译时指定版本，默认编译版本是ES3

tsc app.ts -t es5

变量

变量在定义时要指定类型。

// 定义字符串
let str:string = "hello"

// 定义整型
let num:number = 100

// 定义布尔型
let bo:boolean = true

// 定义空值类型
let vu:void = undefined
let vn:void = null
// 函数没有返回值，类型可以用void表示
function fn(): void {
   }

// 定义undefined
let u:undefined = undefined

// 定义null类型
let n:null = null

void 和 undefined、null的区别

与 void 相比，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 string 类型的变量，而 void 类型的则不行。

// 定义任意类型 any 和 unknown
let anys:any = "hello"
let anys:any = 100
let anys:any = true
let anys:any = {
   }
let anys:any = []
let anys:any = null
let anys:any = undefined
let anys:any = Symbol()

let un:unknown = "hello"
let un:unknown = 100
let un:unknown = true
let un:unknown = {
   }
let un:unknown = []
let anys:unknown = null
let anys:unknown = undefined
let anys:unknown = Symbol()

any 和 unknown 的区别

any 和 unknown 可以赋值为任意类型，但是 unknown 赋值为对象时不能调用对象中的属性和方法，从这个特性上看，unknown 比 any 更严谨、更安全。当你使用 any 的时候可以考虑使用 unknown。

注意：一旦变量定义成unknown类型，那么这个变量就只能赋值为 unkonwn 和 any 类型了，不能再赋值为其它类型了。

数组

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种，可以在元素类型后面接上[]，表示由此类型元素组成的一个数组：

let arr: number[] = [1, 2, 3];
let arr: (number | string)[] = [1, 2, 3];

第二种方式是使用数组泛型，Array<元素类型>：

let arr: Array<number> = [1, 2, 3];
let arr: Array<number | string> = [1, 2, 3, "hello"];

元组Tuple

元组类型允许表示一个 已知元素 数量 和 类型 的数组，各元素的类型不必相同。比如，你可以定义一对值分别为string和number类型的元组。

let tu:[string, number] = ["hello", 100]

枚举enum

索引枚举

enum Color {
   Red, Green, Blue};
let co: Color = Color.Green;  // 1

枚举类型提供的一个便利是你可以由枚举的值得到它的名字(反向映射)。

例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：

enum Color {
   Red, Green, Blue}
let val: string = Color[2] // Blue

枚举在默认情况下，索引（下标）从0开始，但也可以手动指定索引：

enum Color {
   Red = 1, Green, Blue}
enum Color {
   Red = 1, Green = 2, Blue = 4}

字符串枚举

enum Color {
   red="red", green="green", blue="blue"}

异构枚举（枚举成员可以同时含有字符串、数字