TypeScript 介绍及使用说明

Typescript

它不是一门语言，是js的超集，它包含了目前的es5标准，也包含了未来的es6\7\8的标准
还提供了很多后端的功能，比如静态类型检查，接口，泛型等。
主要给js带来了强类型定义的实际功能，相当于在原生js上加了一层类型定义

它不能直接运行在浏览器，需要通过tsc编译成js

ts的编译器叫tsc,就像es6的编译器叫babel

扩展

  • es3\es5目前支持所有浏览器
  • es6=es2015，es7=es2016，es8=2017，目前浏览器不支持，需要转换

Typescript作用好处

可以提供静态类型检查，对IDE有友好提示，规范代码编写，在代码编译阶段就能及时发现错误

比如：最常见的加法运算，当我们传入字符串类型代码也能正常运行，只是结果变成了字符串拼接而不是加法运算，这就是js的缺点，如果有了Ts的存在，就会检查类型，如果不是数字类型就会报错

配置TS运行环境

通过npm安装 命令：npm install -g typescript
ts官方文档中强调，要使用let const 去声明变量，避免使用var关键字

理论基础

  • TS变量：数字 字符串 数组 元组
  • 联合枚举（enum）any unknown void never
  • 类型适配(类型断言) 函数类型
  • 泛型 class interface module

实际演示

基本数据类型

function add (num1: number, num2: number) =>{}
let isTrue:boolean = true
let name:string = ""

数组
他们表示数组类型，并且数组里的元素都是数字

let list1:number[] = [1,2,3,4]

这种是泛型的写法

let list2:Array<number> = [1,2,3,4]

let list3:any[] = [1,'3', [1]]

元祖 tuple
元祖是，固定长度，固定类型，固定位置，的特殊数组

let list1:[number,string] = [1,'2']

联合类型 <|竖线写法>
只能保存定义好的数据类型，也就是或则算法二选其一

let union:string | number = '3'
function merge (n1:string|number,n2:number)=>{}

字面量类型 literval
表示literval的值只能是数字类型中的1，2，3

let literval:1|2|3 = 3

枚举类型 Enum
默认取值返回下标值，也可以设置默认值

enum Color {red blue green}
let c1 = Color.blue ===> 1
enum Color2 {red=2, green=3, blue=5}
enum Color3 {red='red', green='green', blue=3}

any 任意类型
它的值可以是任意类型

let renderValue:any = 7;
renderValue = true
renderValue = {}

unkonwn
比any更保险 需要手动判断

let randomValue:unkonwn = 6

void
表示函数没有任何返回的时候就是一个void类型

function printResult():void =>{}
funtion printResule():undefined =>{}

never 阻止函数执行完成

function throwErorr(msg:string,code:number):never=>{}

类型适配（类型断言）
代码执行到这里，IDE提示仍然是any类型TS并没有联想转换，如何能正确的转换成字符串

let message:any
message = 'abc';
message.endsWith('c');

第一种适配方法

let dd = (<string>message).endsWidth('c');

第二种适配方法

let dd = (message as string).endsWith('c')

函数类型
不论是可选参数还是默认值都要放到参数的末尾，加到第一个参数会报错

let log = (msg:string) =>{}
code参数是可选的
let log1 = (msg:string,code?:number) =>{} 
code的默认值为200
let log2 = (msg:string,code:number=200) =>{}

对象

const person: {name:string,age:number}={name:'xx',age:12}

上面的写法略显复杂，可以简写让Ts自己去匹配

const person:object={}

any和object有什么区别，object更为精确，object类型是any类型的子集

interface 接口
通过Point接口给传入的参数做了限制

interface Point {x:number,y:number}
let drawPoint = (point: Point) => {}

interface最好是结合class类一起用，能够满足高内聚低耦合的需求

interface Node {x:number,y:number,node()=> void}
class Nodes implements Node {
	y?:number,x?:number
	constructor(x:number,y:number){this.x = x;this.y = y}
}

其实可以用这些属性省略上面的一些写法 public(公有) private(私有) protected

class Nodes implements Node {
	constructor(public x:number,public y:number){}
}

module
引入文件时 结尾不需要叫后缀

import {point} from './ponit'

泛型

let list:Array<string> = ['1','2','3']

两个写法都可以

let last = <T>(arr:T[]) =>{}
let last = <T>(arr:array<T>) =>{}

调用上面的last方法也可以申明输出输入的类型

const ll = last<string|number>(['a','b'])

下面的x,y值可以是任意数据类型

let makeTuple = (x,y) => [x,y]

给他们安排不同的泛型

let makeTuple = <T,Y>(x:X,y:Y) => [x,y]

调用上面的方法也可以申明输出输入的类型

let v2 = makeTuple<boolean,number>(true,1)

泛型也可以设置默认类型

let makeTuple = <T,Y=number>(x:X,y:Y) => [x,y]

再次调用函数是可以省略第二个参数

let v2 = makeTuple<boolean>(true,1)

实际应用

用ts去编写一个弹框组件，通过函数的方式向外提供接口，具体的功能还是需要class类去实现

首先用interface接口规范配置参数，参数为可选

class类通过constructor来接受options形参，如何变成对象的属性？，在参数上加private，就可以通过this关键字获取，《也可以是public等》

如何添加默认属性？通过浅拷贝的形式，也可以用es6的展开运算符(…)来解决，如果浅拷贝的对象下还有对象，就不能用浅拷贝了

在这里插入图片描述

创建组件的interface接口，做一个组件的规范，做一个约束=

通过implements去约束类对象

在这里插入图片描述

引用temp模版，否则会提示未使用
在这里插入图片描述
在这里插入图片描述