【TypeScript】第一部分 TypeScript 认识

文章目录

【TypeScript】第一部分 TypeScript 认识
1. TypeScript 认识
总结

1. TypeScript 认识

1.1 TypeScript简介

TypeScript是JavaScript的超集。
它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。
相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

1.2 TypeScript 开发环境搭建

下载Node.js
安装Node.js
使用npm全局安装 typescript
- 进入命令行
- 输入：npm i -g typescript
创建一个ts文件
使用tsc对 ts 文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令：tsc 文件名.ts

1.3 基本类型

类型声明

类型声明是TS非常重要的一个特点
通过类型声明可以指定TS中变量（参数、形参）的类型
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

语法：

let 变量: 类型;
    
let 变量: 类型 = 值;
		
let 变量 = 值;
    
function fn(参数: 类型, 参数: 类型): 类型{
     ...
}

自动类型判断

TS拥有自动的类型判断机制
当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

// 1. 将a的类型设置为number,在以后的使用过程中a的值只能是number
let a:number;
a = 10;
// a = 'hello'; 报错

// 2. 当声明变量和赋值同时进行可以省略设置类型,类型为赋值的类型
// let b:boolean = true;
let b = true;
b = false;
// b = 123; 报错

// 3. 不仅可以给参数进行类型设置,也可以给返回值的类型进行设置
function add (num1:number,num2:number):number{
    return num1+num2;
}

let res = add(123,456);

类型	例子	描述
number	1, -33, 2.5	任意数字
string	‘hi’, “hi”, `hi`	任意字符串
boolean	true、false	布尔值true或false
字面量	本身的值	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:‘孙悟空’}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

根据上述表格所列举的类型举的例子：

// 1. 可以直接使用字面量进行类型声明
let a:10; //此时限制变量的值就是该字面量的值也就是 10
// a = 12; 报错


// 2. 可以使用 | 来连接多个类型
let b:'male'|'female';
b = 'male';
b = 'female';

let c: number | string;
c = 123;
c = 'hello'


// 3. any类型为任意类型，一个变量如果设置any类型相当于关闭了
// TS类型检测，不建议使用any类型，因为一旦有变量和他有接触都会变成any类型
// 只是声明变量不指定类型，TS解析器会自动判断变量的类型为any类型
let d: any;
d = 123;
d = 'hello';
d = true;

let e: string;

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


//4. unknown类型，该类型为安全的any类型
let f:unknown;
f = 123;
f = true;
f = 'hello';

// f 的类型是uknown ,e的类型是string ，类型不同不能进行赋值
// e = f; 此时就会报错

// 如果想要解决uknown赋值报错的可以使用以下方法：

// 一. 加判断
if(typeof f === 'string')
{
    e = f 
}

// 二. 类型断言：可以告诉解析器变量的实际类型
/* 
    两种语法：
        (1) 变量 as 类型
        (2) <类型> 变量
*/
e = f as string
e = <string> f


//5. void 类型 用来表示为空，表示没有返回值的函数
function fn (num):void {
    console.log('Hello TS'+num)
}


//6. never 表示永远没有返回的结果
// 用于程序运行报错
function fn1 ():never{
    throw new Error('报错了！！！')
}


//7. object 类型
// {}用来去指定对象中可以包含哪些属性
// 语法： {属性名:类型，属性名:类型}
// 在属性名后面加上？表示该属性是可选的
let obj:{name:string,age?:number}
obj = {name:'jack',age:18}
obj = {name:'mark'}

// [propName:stirng]:any,表示任意类型的属性
let obj1:{name:string,[propName:string]:any}
obj1 = {name:'lili',age:56,gender:'female'}


// 8. 函数类型
// 语法：(形参:类型，形参:类型)=>返回值类型
let fun:(a:number,b:number)=>number

fun = function(num1,num2){
    return num1+num2
}

fun(123,456)



// 9.数组类型
// 语法：类型[] 也可以这样写  Array<类型>

let arr:string[]
arr = ['hello','你好']

let arr2:Array<number>
arr2 = [123,456,789]


// 10.元组（tuple），也即是固定长度的数组
// 语法：[类型，类型]
let arr3: [string,string]
arr3 = ['hello','xxx']


// 11.enum 枚举,对于性别这种明确个数和值，可以使用枚举
// 语法：enum 类名{}
// 下面代码的意思是：创建一个Gender的枚举类
enum Gender{
    male,
    female
}

let person:{name:string,age:number,gender:Gender}
person = {
    name:'jack',
    age:18,
    gender:Gender.male
}

console.log(person.gender === Gender.male)

// 12. & 表示同时
let s: {name:string} & {age:number}
s = {name:'jack',age:15}


// 13. 类型的别名
// 语法：type 别名 = 类型
type myType = 1|2|3|4|5
let k:myType
let j:myType
k = 1;
k = 5;
j = 4;
j = 2;