禹神3小时快速上手typescript

学如逆水行舟~

已于 2024-09-16 11:31:39 修改

阅读量726

点赞数 10

分类专栏： typescript 文章标签： typescript

于 2024-09-16 10:29:22 首次发布

本文链接：https://blog.csdn.net/wk964269669/article/details/142285510

版权

typescript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、TypeScript简介

在这里插入图片描述

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

二、为何需要TypeScript

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

JavaScript 当年诞⽣时的定位是浏览器脚本语⾔，⽤于在⽹⻚中嵌⼊简单的逻辑，且代码
量很少。
随着时间的推移，JavaScript 变得越来越流⾏，如今的 JavaScript 已经可以全栈编程
了。
现如今的 JavaScript 应⽤场景⽐当年丰富的多，代码量也⽐当年⼤很多，随便⼀个
JavaScript 项⽬的代码量，可以轻松的达到⼏万⾏，甚⾄⼗⼏万⾏！
然⽽ JavaScript 当年“出⽣简陋”，没考虑到如今的应⽤场景和代码量，逐渐就出现了很多
困扰。

2. JavaScript 中的困扰

不清楚的数据类型

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

有漏洞的逻辑

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

访问不存在的属性

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

低级的拼写错误

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')