TypeScript介绍

什么是TypeScript？

TypeScript是JavaScript的一个超集，支持ES6标准

TypeScript由微软开发的自由和开源的编程语言

TypeScript设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript可以运行在任何浏览器上

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

JavaScript 与 TypeScript的区别

TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的JavaScript代码，并只对其中的TypeScript代码进行编译。

TypeScript	JavaScript
JavaScript的超集用于解决大型项目的代码复杂性	—种脚本语言，用于创建动态网页
可以在编译期间发现并纠正错误	作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型	弱类型，没有静态类型选项
最终被编译成JavaScript代码，使浏览器可以理解	可以直接在浏览器中使用
支持模块、泛型和接口	不支持模块、泛型或接口
支持ES3，ES4，ES5和ES6+功能	不支持编译其他ES3，ES4，ES5或ES6+ 功能
社区的支持仍在增长，而且还不是很大	大量的社区支持以及大量文档和解决问题的支持

TS优势

更早的发现错误

任何位置都有代码提示,增加开发效率

类型系统提升了代码的可维护性,重构更容易

使用最新的ECMAScript语法，最新

TS类型推断机制,降低成本

开发环境搭建

1.安装vscode

2.安装Node.js:使用命令node -v来检查nodejs版本

3.安装TypeScript编译器: npm i typescript -g

4.tsc --init #生成配置文件

5.使用tsc命令来转换TS成JS:例如tsc hello.ts

6.自动编译tsc --watch

TS中的数据类型

1基础数据类型

number类型:双精度64位浮点值。它可以用来表示整数和分数。

boolean类型:表示逻辑值:true和false。

.string类型:一个字符系列，使用单引号()或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式

数值，字符串和布尔值是我们开发中最常使用的基础数据类型，与js中的数值，字符串和布尔完全一致,在ts中我们主要做类型校验使用

// 基础数据类型
let stn:string
stn="请问"
// stn=100
console.log(stn)let sun:number
sun=100
// sun="请问"
console.log(sun)let br:boolean
br=true
console.log(br)

2.数组

数组：声明变量的一组集合称之为数组

数组是我们前端开发过程中，最常用的引用类型之一，再发送请求获取响应时，我们往往会使用到数组类型，因此我们务必要掌握好数组的集中定义方式

// 数组
let str:string[]
str=["请问","阿斯顿","自行车"]
// str=["请问","阿斯顿","自行车",100,true]
console.log(str)//方法二
let sun:Array<number>
sun=[1,2,3,4]
// sun=[1,2,3,4,"自行车",true]
console.log(sun)//方法三  联合类型
let union:(number|string)[]
union=[100,"请问"]//方法四  任意类型
let test:any[]
test=["请问","阿斯顿","自行车",20,true]

3.元组

元组类型Tuple

TS中的元组类型其实就是数组类型的扩展

元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同

定义：['','',...]

作用：元组用于保存定长定数据类型的数据

let tup:[string,number,boolean]
tup=["自行车",100,true]
// tup=[100,"自行车",true]  //报错 按顺序来
// tup=["自行车",100,true,10] //报错  超出
console.log(tup);

4.any与void

any

any:表示任意类型,当我们不清楚某个值的具体类型的时候我们就可以使用any

在TS中任何数据类型的值都可以负责给any类型

使用场景

变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查

改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查

定义存储各种类型数据的数组时

void

void:当一个函数没有返回值时，你通常会见到其返回值类型是void

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。

在Ts中只有null和undefined可以赋值给void类型

定义了一个不可以保存任意类型数据的变量，只能保存null和undefined

注意点: null和undefined是所有类型的子类型，所以我们可以将null和undefined赋值给任意类型

//严格模式下会null报错

5.null与undefined

TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined和null。和void相似，它们的本身的类型用处不是很大

非严格模式下，可以把 null和undefined赋值给number类型的变量。

let x:undefined=undefined
let y:null=null;let money:number=100;
// money=null;
// money=undefined;

6.never与object

never类型:

表示的是那些永不存在的值的类型;

never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型;

变量也可能是never类型，当它们被永不为真的类型保护所约束

注意点;never类型是任何类型的子类型，也可以赋值给任何类型，然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外)。

即使any也不可以赋值给never

object类型:

object表示非原始类型，也就是除number ，string, boolean，symbol,null或undefined之外的类型

定义了一个只能保存对象的变量

我们后面更常用的是|接口与类型别名

7.枚举

enum类型是对javaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

枚举用于表示固定的几个取值

例如:人的性别只能是男或者女

注意点:TS中的枚举底层实现的本质其实就是数值类型，所以赋值一个数值不会报错

注意点:TS中的枚举类型的取值，默认是从上至下从0开始递增的

虽然默认是从0开始递增的，但是我们也可以手动的指定枚举的取值的值

注意点:如果手动指定了前面枚举值的取值，那么后面枚举值的取值会根据前面的值来递增

注意点:如果手动指定了后面枚举值的取值，那么前面枚举值的取值不会受到影响

注意点:我们还可以同时修改多个枚举值的取值，如果同时修改了多个，那么修改的是什么最后就是什么

我们可以通过枚举值拿到它对应的数字

我们还可以通过它对应的数据拿到它的枚举值

数字枚举

1.数字枚举的取值可以是字面量,也可以是常量,也可以是计算的结果

⒉.如果采用字面量对第一个成员进行赋值，下面的成员会自动递增

3.如果采用常量或计算结果进行赋值，则下面的成员也必须初始化

字符串枚举

1.如果采用字面量对第一个成员进行赋值，下面的成员也必须赋值

⒉采用[index]的形式不能获取到内容,需要传入[key]

3.字符串枚举不能使用常量或者计算结果给枚举值赋值

4.它可以使用内部的其它枚举值来赋值

异构枚举:枚举中既包含数字又包含字符串,我们就称之为异构枚举

如果是字符串枚举,那么无法通过原始值获取到枚举值

8.bigint与symbol

bight类型:表示非常大的数

symbo1类型:表示全局唯一引用

ES2020可用

// bight类型:表示非常大的数
// symbo1类型:表示全局唯一引用
// ES2020可用// bigint
const Hundred1 : bigint=BigInt(100)
const Hundred2 : bigint=100n
console.log(Hundred1)
console.log(Hundred2)// symbol
let name1 =Symbol("name")
let name2 =Symbol("name")
// console.log(name1)
// console.log(name2)if (name1===name2) {console.log("一样")
} else {console.log("不一样")
}

9.变量的声明与解构

与js中完全一致，我们简单复习—下解构

数组解构与对象解构

//数组解构
// let goddess=["邱淑贞","赵雅芝"];
// let [firstName,secondName]=goddess;
// console.log(firstName);
// console.log(secondName);// let goddess=["赵今麦","蒋依依","古力娜扎","张子枫"];
// let[third,...rest]=goddess;
// console.log(third);
// console.log(rest);// let goddess=["赵今麦","蒋依依","古力娜扎","张子枫"];
// let [,forth,,fifth]=goddess;
// console.log(forth);
// console.log(fifth);//对象解构
let beauty={uname : "杨超越",age: 20,sex: "女",
}
let {uname,age,sex} = beauty;
console.log(uname);
console.log(age);
console.log(sex);

10.类型断言

什么是类型断言?

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

通俗的说就是我相信我自己在定义什么类型

语法格式

<类型>值

值 as 类型

let str="当你看不到未来的时候，只需要努力就好了，时间会给你答案"// 方式一
let len=(<string>str).length
console.log(len)// 方式二
let len2=(str as string).length
console.log(len2)function typeAs(x:string|number){if (typeof x=="string") {let len3 = (x as string).lengthconsole.log(len3)} else {console.log(x)}
}
typeAs("登高者必自卑，行远者必自迩，在这个世界上，重要的不是你正站在哪里，而是你正朝什么方向移动！")
typeAs(100)

11.type别名

类型别名就是给一个类型起个新名字,但是它们都代表同一个类型

// 第一种
type zlwz = "张三"|"李四"|"王五"|"赵六"
let one:zlwz="李四"
// let two:zlwz=100
console.log(one)// 第二种
type myfun = (a:number,b:number)=>number
let fun:myfun=(a:number,b:number)=>a+b
let result=fun(10,20)
console.log(result);type myGoddass={name: string,age: number,sex:boolean
}
let yifi:myGoddass={name: "刘亦菲",age:18,// sex:"女",//报错，不符合定义的类型sex:true
}
console.log(yifi);

接口

接口的基本信息

什么是接口？

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法

接口也是一种数据类型

格式:

interface interface_name {}

接口的基本使用

export default {}interface IFullName{firstName:stringlastName:string
}let goddassName:IFullName={firstName:"蒋",lastName:"依依"
}
console.log(goddassName.firstName,goddassName.lastName)function say({firstName,lastName}:IFullName):void{console.log(`我的女神是${firstName}${lastName}`);
}
say(goddassName)

可选属性与只读属性

可选属性使用:?

只读属性使用: readonly

readonly与const的区别:做为变量使用的话用const，若做为属性则使用readonly

//可选属性  用?修饰
interface IFullName{firstName:stringlastName:stringsex?:string
}
let goddassName:IFullName={firstName:"蒋",lastName:"依依"
}
console.log(goddassName.firstName,goddassName.lastName)//只读属性 readonly(就是只能看，不能修改值)
interface IInfo{readonly uname:stringreadonly uage:number
}
let beauty:IInfo = {uname:"张子枫",uage:20
}
// info.name="林青霞"
// info.age=21

索引签名

定义:索引签名用于描述那些"通过索引得到"的类型

格式:如[props: string] : any

应用场景:解决参数问题

注意点:如果使用接口来限定了变量或者形参，那么在给变量或者形参赋值的时候,多一个或者少一个都不行

实际开发中往往会出现多或者少的情况，怎么解决?

少一个或者少多个属性

解决方案:可选属性

多一个或者多多个属性

方案一:使用变量

方案二:使用类型断言

索引签名?

索引签名用于描述那些“通过索引得到”的类型

注意点:对象中的键，会被转化为字符串

interface IFullName{firstName:stringlastName:stringage?:numbersingName?:string[props:string]:any
}// 少一个或少多个属性
// 解决方案：可选属性
let goddass1:IFullName={firstName:"蒋",lastName:"依依"}
let goddass2:IFullName={firstName:"蒋",lastName:"依依",age:21}// 多一个或者多多个属性
// 方案一：使用变量
let info = {firstName:"蒋",lastName:"依依",age:21,filmname:"江山美人"}
let goddass3:IFullName=info// 方案二：使用类型断言
let goddass4:IFullName = ({firstName:"蒋",lastName:"依依",age:21,filmname:"江山美人"}) as IFullName// 索引签名
interface Ibeauty{[props:string]:string
}
let name:Ibeauty={name1:"蒋依依",name2:"张子枫"}interface Iage{[props:string]:number
}
let afe:Iage={age1:21,age2:20}// 方案三
let goddass5:IFullName = {firstName:"蒋",lastName:"依依",age:21,filmname:"江山美人"}

函数接口

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。

它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

//定义函数接口
interface ImakeMoney {(salary:number,reward:number):number
}
let sum:ImakeMoney = function (x:number,y:number ): number {return x + y;
}
let res = sum(10,20);
console.log(res);

接口的继承

接口继承就是说接口可以通过其他接口来扩展自己。

Typescript 允许接口继承多个接口。

继承使用关键字extends。

//单继承
interface IPerson {age : number
}interface IName extends IPerson {name : string
}
let lady : IName = {name : "蒋依依", age: 21
}//多继承
interface IFatherMoney {m1: number
}
interface IMotherMoney {m2: number
}
interface ISonMoney extends IFatherMoney,IMotherMoney {s1 :number}
let money :ISonMoney = {m1:100,m2 : 100,s1: 100}
console.log(`儿子一共有${money.m1 + money.m2 + money.s1}万元`);

接口与类型别名的异同

相同点:

都可以描述属性或方法

都允许拓展

不同点:

type可以声明基本数据类型，联合类型，数组等; interface只能声明变量

当出现使用type和interface声明同名的数据时;type会直接报错;interface会进行组合

type不会自动合并; interface会

TypeScript相关推荐

超简单的react和typescript和引入scss项目搭建流程
1.首先我们先创建一个react项目,react官网也有react项目搭建的命令 npx create-react-app my-app cd my-app 2.安装我们项目需要的样式依赖,这个项目我 ...
老码农绝密：使用 TS（TypeScript）的 10 大理由
最近,小编读了一篇名为<放弃 TypeScript 的 7 个非常好的理由>,这篇文章的阅读量不低.里面有些观点确实有趣,不过在这里我要向你介绍使用 TypeScript 的 10 个理由 ...
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“；”分号（JavaScript、TypeScript格式化）
Ctrl+Shift+S→编辑器→Code Style→JavaScript或TypeScript→Punctuation 1.每行代码结尾自动加上;分号: Use(下拉框选Use)semiconlo ...
为TypeScript项目生成API文档
为TypeScript项目生成文档使用typedoc为TypeScript项目生成API文档. 1. 使用typedoc生成HTML文档需要安装 typedoc. npm i typedoc 可以 ...
TypeScript 1
TypeScript 的由来 TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程语言. TypeSc ...
TypeScript学习笔记之接口（Interface）
在java中,接口是用来定义一些规范,使用这些接口,就必须实现接口中的方法,而且接口中的属性必须是常量. javascript中是没有接口的概念的.所以TypeScript在编译成 JavaScrip ...
c# typescript_在任何IDE中从C＃，Java或Python代码获取TypeScript接口的简单方法
c# typescript by Leonardo Carreiro 莱昂纳多·卡雷罗(Leonardo Carreiro) 在任何IDE中从C#,Java或Python代码获取TypeScript接 ...
如何在React中使用Typescript
TypeScript can be very helpful to React developers. TypeScript对React开发人员可能非常有帮助. In this video, Ben ...
使用Typescript的巧妙React上下文技巧-不是Redux
by Bill Girten 比尔·吉尔滕(Bill Girten) 使用Typescript的巧妙React上下文技巧- 不是 Redux (Clever React context tricks ...
使用TypeScript映射和条件类型使React组件更出色
by Deepu K Sasidharan 通过Deepu K Sasidharan 使用TypeScript映射和条件类型使React组件更出色 (Make your React component ...

TypeScript