禹神3小时快速上手typescript

一、TypeScript简介

• TypeScript 由微软开发，是基于 JavaScript 的⼀个扩展语⾔。
• TypeScript 包含了 JavaScript 的所有内容，即： TypeScript 是 JavaScrip
  t 的超集。
• TypeScript 增加了：静态类型检查、接⼝、 泛型等很多现代开发特性，更适合⼤型项⽬
  的开发。
• TypeScript 需要编译为 JavaScript ，然后交给浏览器或其他 JavaScript 运⾏环
  境执⾏。

二、为何需要TypeScript

1. 今⾮昔⽐的 JavaScript（了解）

• JavaScript 当年诞⽣时的定位是浏览器脚本语⾔，⽤于在⽹⻚中嵌⼊简单的逻辑，且代码
  量很少。

• 随着时间的推移，JavaScript 变得越来越流⾏，如今的 JavaScript 已经可以全栈编程
  了。

• 现如今的 JavaScript 应⽤场景⽐当年丰富的多，代码量也⽐当年⼤很多，随便⼀个
  JavaScript 项⽬的代码量，可以轻松的达到⼏万⾏，甚⾄⼗⼏万⾏！

• 然⽽ JavaScript 当年“出⽣简陋”，没考虑到如今的应⽤场景和代码量，逐渐就出现了很多
  困扰。

2. JavaScript 中的困扰

1. 不清楚的数据类型

let welcome = 'hello'
welcome() // 此⾏报错：TypeError: welcome is not a function

2. 有漏洞的逻辑

const str = Date.now() % 2 ? '奇数' : '偶数'
if (str !== '奇数') {
 alert('hello')
} else if (str === '偶数') {
 alert('world')
}

3. 访问不存在的属性

const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

4. 低级的拼写错误

const message = 'hello,world'
message.toUperCase()

3. 『静态类型检查』

• 在代码运⾏前进⾏检查，发现代码的错误或不合理之处，减⼩运⾏时出现异常的⼏率，此种检
  查叫『静态类型检查』，TypeScript 和核⼼就是『静态类型检查』，简⾔之就是把运⾏时的
  错误前置。
• 同样的功能，TypeScript 的代码量要⼤于 JavaScript，但由于 TypeScript 的代码结构更加
  清晰，在后期代码的维护中 TypeScript 却胜于 JavaScript。

三、编译TypeScript

浏览器不能直接运⾏ TypeScript 代码，需要编译为 JavaScript 再交由浏览器解析器执⾏。

1.命令行编译

要把 .ts ⽂件编译为 .js ⽂件，需要配置 TypeScript 的编译环境，步骤如下：
如果不想全局安装typescript，也可以在文件夹下依次执行：npm init; npm i typescript，之后执行tsc命令时都在前面加上npx，如：npx tsc demo.ts
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/0433305764c947afb2d23aa79dc11620.png)

2.自动化编译

没有全局安装typescript，则执行 npx tsc --init；
下面建议使用tsconfig.json中的 onEmitOnError配置，不要用命令

四、类型声明

使⽤ : 来对变量或函数形参，进⾏类型声明：

let a: string //变量a只能存储字符串
let b: number //变量b只能存储数值
let c: boolean //变量c只能存储布尔值
a = 'hello'
a = 100 //警告：不能将类型“number”分配给类型“string”
b = 666
b = '你好'//警告：不能将类型“string”分配给类型“number”
c = true
c = 666 //警告：不能将类型“number”分配给类型“boolean”
// 参数x必须是数字，参数y也必须是数字，函数返回值也必须是数字
function demo(x:number,y:number):number{
 return x + y
}
demo(100,200)
demo(100,'200') //警告：类型“string”的参数不能赋给类型“number”的参数
demo(100,200,300) //警告：应有 2 个参数，但获得 3 个
demo(100) //警告：应有 2 个参数，但获得 1 个

在 : 后也可以写字⾯量类型，不过实际开发中⽤的不多。

let a: '你好' //a的值只能为字符串“你好”
let b: 100 //b的值只能为数字100
a = '欢迎'//警告：不能将类型“"欢迎"”分配给类型“"你好"”
b = 200 //警告：不能将类型“200”分配给类型“100”

五、类型推断

六、类型总览

// 原始类型字符串
let str = 'hello';
// 当访问str.length时，JavaScript引擎做了以下⼯作：
let size = (function() {
 // 1. ⾃动装箱：创建⼀个临时的String对象包装原始字符串
 let tempStringObject = new String(str);
 // 2. 访问String对象的length属性
 let lengthValue = tempStringObject.length;
 // 3. 销毁临时对象，返回⻓度值
 // （JavaScript引擎⾃动处理对象销毁，开发者⽆感知）
 return lengthValue;
})();
console.log(size); // 输出: 5

七、常用类型与语法

1.any

2.unknown

3.never

4.void

5.object

关于 object 与 Object ，直接说结论：实际开发中⽤的相对较少，因为范围太⼤了。

6.tuple

元组 (Tuple) 是⼀种特殊的数组类型，可以存储固定数量的元素，并且每个元素的类型是已
知的且可以不同。元组⽤于精确描述⼀组值的类型， ? 表示可选元素。

// 第⼀个元素必须是 string 类型，第⼆个元素必须是 number 类型。
let arr1: [string,number]
// 第⼀个元素必须是 number 类型，第⼆个元素是可选的，如果存在，必须是 boolean 类型。
let arr2: [number,boolean?]
// 第⼀个元素必须是 number 类型，后⾯的元素可以是任意数量的 string 类型
let arr3: [number,...string[]]
// 可以赋值
arr1 = ['hello',123]
arr2 = [100,false]
arr2 = [200]
arr3 = [100,'hello','world']
arr3 = [100]
// 不可以赋值，arr1声明时是两个元素，赋值的是三个
arr1 = ['hello',123,false]

7.enum

枚举（ enum ）可以定义⼀组命名常量，它能增强代码的可读性，也让代码更好维护。

如下代码的功能是：根据调⽤ walk 时传⼊的不同参数，执⾏不同的逻辑，存在的问题是调⽤ w
alk 时传参时没有任何提示，编码者很容易写错字符串内容；并且⽤于判断逻辑的 up 、 dow
n 、 left 、 right 是连续且相关的⼀组值，那此时就特别适合使⽤ 枚举（ enum ）。

function walk(str:string) {
 if (str === 'up') {
 console.log("向【上】⾛");
 } else if (str === 'down') {
 console.log("向【下】⾛");
 } else if (str === 'left') {
 console.log("向【左】⾛");
 } else if (str === 'right') {
 console.log("向【右】⾛");
 } else {
 console.log("未知⽅向");
 }
}
walk('up')
walk('down')
walk('left')
walk('right')

8.type

9.一个特殊情况

先来观察如下两段代码：


官⽅⽂档的说明：Assignability of Functions

10.复习类相关知识

11.属性修饰符

12.抽象类

• 概述：抽象类是⼀种⽆法被实例化的类，专⻔⽤来定义类的结构和⾏为，类中可以写抽象
  ⽅法，也可以写具体实现。抽象类主要⽤来为其派⽣类提供⼀个基础结构，要求其派⽣类
  必须实现其中的抽象⽅法。
• 简记：抽象类不能实例化，其意义是可以被继承，抽象类⾥可以有普通⽅法、也可以有抽
  象⽅法。

通过以下场景，理解抽象类：

• 我们定义⼀个抽象类 Package ，表示所有包裹的基本结构，任何包裹都有重量属性 weigh
  t，包裹都需要计算运费。但不同类型的包裹（如：标准速度、特快专递）都有不同的运费计算
  ⽅式，因此⽤于计算运费的calculate ⽅法是⼀个抽象⽅法，必须由具体的⼦类来实现。

ExpressPackage 类继承了 Package ，实现了 calculate ⽅法：

13.interface(接口)

• interface 是⼀种定义结构的⽅式，主要作⽤是为：类、对象、函数等规定⼀种契约，这样
  可以确保代码的⼀致性和类型安全，但要注意 interface 只能定义格式，不能包含任何实
  现 ！

14.一些相似概念的区别

14.1.interface与type的区别

• 相同点： interface 和 type 都可以⽤于定义对象结构，在定义对象结构时两者可以
  互换。
• 不同点：
  1️⃣ interface ：更专注于定义对象和类的结构，⽀持继承、合并。
  2️⃣ type ：可以定义类型别名、联合类型、交叉类型，但不⽀持继承和⾃动合并。

14.2.interface与抽象类的区别

• 相同点：都能定义⼀个类的格式（定义类应遵循的契约）
• 不相同：
  1️⃣ 接⼝：只能描述结构，不能有任何实现代码，⼀个类可以实现多个接⼝。
  2️⃣ 抽象类：既可以包含抽象⽅法，也可以包含具体⽅法， ⼀个类只能继承⼀个抽象类。
  

八、泛型

• 泛型允许我们在定义函数、类或接⼝时，使⽤类型参数来表示未指定的类型，这些参数在具体
  使⽤时，才被指定具体的类型，泛型能让同⼀段代码适⽤于多种类型，同时仍然保持类型的安
  全性。
  举例：如下代码中 就是泛型，（不⼀定⾮叫 T ），设置泛型后即可在函数中使⽤ T 来表
  示该类型：

九、类型声明文件

• 类型声明⽂件是 TypeScript 中的⼀种特殊⽂件，通常以 .d.ts 作为扩展名。它的主要作⽤
  是为现有的 JavaScript 代码提供类型信息，使得 TypeScript 能够在使⽤这些 JavaScript 库
  或模块时进⾏类型检查和提示。
  

原文地址：https://blog.csdn.net/wk964269669/article/details/142285510

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！