TypeScript基础(一)工作流、基本类型、高级类型

系列文章目录

	TypeScript入门
		认识Typescript
		TypeScript工作流
		TypeScript的类型
			Number数字类型
			String字符串类型
			Boolean布尔类型
			Array数组类型
			Tuple元组类型
			Union联合类型
			Literal字面量类型
			Any任意类型
			unknown未知类型
			void、nudefuned、neverleix
			TypeAssertions类型适配
		本章小结

提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

TypeScript是微软开发的一个开源编程语言,通过JavaScript的基础上添加静态类型定义构建而成。
提示:这里可以添加本文要记录的大概内容:

提示:以下是本篇文章正文内容,下面案例可供参考

一、TypeScript是什么?

TypeScript是一种由微软开发的开源编程语言,它是javaScript语言的一个超集,支持JavaScript中的所有语法和特性,并在这些基础上新增了一些特性。

二、 TypeScript的作用

我们都知道。JavaScript是一个弱类型语言,对于一些类型的限制并不是很明确。比如说我们编码一个在两个输入框中输入数字求和的加法程序,这个时候直接输入到文本框的数字会被自动转换为字符串形式,就会得到1+1=11的奇怪结果。那么这个时候TypeScript就可以大显身手,实现1+1=2.

a.规范我们的代码
b.代码编译阶段就能及时发现问题
c.在原生js基础上加上了一层类型定义

三、TypeScript工作流

TSC(把ts文件转换为js文件)的作用相当与Babel(把高级语法和代码转换为浏览器能识别的低级语法和代码)。

四、TypeScript的类型

相比于JavaScript的原始类型(基本数据类型)和对象类型(引用数据类型),TypeScript也有自己的数据类型,内容如下:
基本类型:boolean、string、number、array、tuple、enum、null、nudefined、object、void、never、any
高级类型:union组合类型、Nullable可控类型、Literal预定义类型

接下来,我们逐步认识...

**Number数字类型**
对数字类型的定义只有一个笼统的Number表示,既能表示整数、也能表示浮点数,甚至可以表示正整数。
	let num1 = 2;
	let num2 = 6;
	function add(n1:number,n2:number){
		return n1+n2
	}
	console.log(add(num1,num2))
**Srting字符串类型**
与JavaScript书写方式及使用方法均一致。

let myName:string = “前端Programmer”;
console.log(‘myName’,myName);

**Boolean布尔类型**
表示真、假,常用于处理判断逻辑。

let isTrue:boolean = true;
console.log(‘isTrue’,isTrue);

Array数组类型
数组中可以存放任意类型的数据,JS中数组的容度非常大,TS也能继承了这一点。
以下三战写法(list1、list2、list3)表示的完全一致,鼠标移动至list上编译器均提示number[],表示数组类型,

let list1: number[] = [1,2,3.4];
let list2:Array = [1,2,3,4];
let list3 = [1,2,3,4];

下面的list4为(string | number)[],表示字符串和数字类型。

	let list4 = [1,'前端Programmer']

下面的list5为any[],表示任意类型。

let list5:any[] = [1,'前端Programmer'true]

Tuple元组类型
固定长度,固定类型的Array,声明的元组的时候一定要事先指定类型。

let person: [number,string] = [1,""]
//此时,元组的长度和类型都被固定住了,当我们尝试修改元素的长度和类型都会报错。
person[0] = 'TS' //鼠标移至报错位置
person[1] = 1; //编译器将提示不能将类型xx分配给类型xx
person[2] = '测试';
//注:元组类型有个Bug,可以调用push()方法改变元组的长度

Union联合类型
联合类型表示一个变量同时支持两个或者多个不同类型。

let union: string | number;
nuion = 1;
union = '前端Programmer';
union = true; //由于此联合类型没有Boolean类型,所以此行报错

Literal字面量类型
可以混合使用不同的类型。

let literal:1 | '前端Programmer'|true | [1,2,3]
//示例:merge求和(分为数字和字符串两种方式)
function merge(n1:number | string, n2: number | string, resultType:"as-number" | "as-string"){
	if(resultType==='as-string'){
		return n1.toString() + n2.toString()
	}
	if(typeof n1 === "string" || typeof n2 === "string"){
		return n1.toString() = n2.toString()
	}else{
		return n1 + n2
	}
}
let mergeNumber1 = merge(1,1,"as-number") ;
let mergeNumber2 = merge(1,1,"as-string");
let mergeString = merge("前端","Programmer","as-string");
console.log(mergeNumber1);
console.log(mergeNumber2);
console.log(mergeNumber);

Enum枚举类型
枚举允许我们定义一组命名的常量。默认情况下,我们获取到对象的某个属性打印出来的是该属性的索引,神奇的是我们可以给对象里面的属性赋值,这时候再获取到对象的某个属性时打印出来的就是我们给的属性赋的值了。

enum Color {
	red,
	yellow = '黄色',
	blue = 'bule'
}
let color1 = Color.red;
console.log(color1);
let color2 = Color.blue;
console.log(color2);
let color3 = Color.yellow;
console.log(color3);

Any任意类型
Any 这个类型可以让我们随意定义类型,当我们“懒得”定义复杂类型结构的时候,可以合理的使用它;

let randomValue: any = 123;
randomValue = true;
randomValue = '前端Programmer';
randomValue = {};

unknown未知类型
unknown不保证类型,但可以保证类型安全,当我们出现错误编码时(下面的数字123不能调用toUpperCase()方法),使用unknow编译器会有报错提示。
let randomValue: unknown = 123;
randomValue = true;
randomValue = ‘前端Programmer’;
randomValue = {};
randomValue.toUpperCase();

我们可以做出一下适配,让编译器不报错。

let randomValue: unknown = 123;
randomValue = true;
randomValue = '前端Programmer';
randomValue = {};
if(type of randomValue === 'string'){
	randomValue();
}
if(typeof randomValue === 'string'){
	randomValue.toUpperCase();
}

void、undefined、never类型
不存在时用void,undefuned表示必须存在但可以不赋值,永远不会执行完时用never。此时使用了void(默认就是void,可加可不加),不添加返回值也一切正常。

在这里插入代码片

总结

提示:这里对文章进行总结:

例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

  • 33
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值