Typescript

TS是微软为了开发大型项目而开发的一种自由和开源的编程语言,它是JS的一个超集,且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. 即ts扩展了JS的一些功能,解决了JS的一些缺点.ts的主要功能是进行类型推断.ts文件后缀名:.ts,

文档地址：www.tslang.cn/docs/handbo…

Javascript

1995年网景公司Branden Eich花了10年时间开发出了js。js是一门脚本性语言,主要用来做网页交互。

TS和JS的区别

typescript	javascript
js的超集,用于解决大型项目的代码复杂性	一种脚本语言,用于创建动态网页
强类型,支持动态和静态类型	动态弱类型语言
可以在编译期间发现并纠正错误	只能在运行时发现错误
不允许改变变量的数据类型	变量可以被赋予不同类型的值

TS的优缺点:

优点:

类型推断,更好的代码提示,和vscode(由微软开发)更好适配

缺点:

不能被浏览器理解,最终需要编译成JS -有学习成本,写惯了js需要花时间去理解TS

JS的缺陷:

js不适合开发大型应用系统
js中变量没有类型,只有值有类型(太灵活很多bug是在运行时才体现出来)
复杂的继承实现

TS环境安装

1.全局安装typescript:
yarn global add typescript
或:
npm i typescript -g

2.查看是否安装成功:
tsc -- version

3.将一个ts文件编译成js文件
tsc 文件名.ts

4.生成项目的ts配置文件:
tsc --init

5.实时编译整个项目:
tsc -w

6.实时运行编译后的js:
-全局安装nodemon:yarn global add nodemon
-nodemon 文件名.js

编译整个项目:tsc

将编译后的js文件放到一个dist目录下统一管理:

在配置文件tsconfig.json中搜output,将"outDir"修改成"outDir":"./dist",会自动生成一个dist文件

TS的类型

1.基础类型: number string null undefined symbol

定义一个具有类型的变量:

隐式声明: let 变量 = 值
显式声明: let 变量:类型 = 值

默认情况下(非严格模式下),null和undefined是所有类型的子类型

(1)任何类型:any 失去类型检测,在写ts代码时,尽量避免使用any

声明:

隐式声明: let 变量:any
显示声明: let 变量  (定义变量不指定类型,不赋值)

(2)联合类型: 如要求一个变量既可以是string也可以是number

let 变量: string | number

(3)类型断言(as操作符): 不希望ts帮助推断,开发者自己推断

let 变量;
变量 as 类型

2.枚举:

应用场景:如tab栏定义评价(全部,满意,不满意)、性别、方向、星期、颜色等有穷尽的内容的类型

enum 变量{xx,xxx,xxx}(变量首字母大写)
eg.  enum Sex{男，女}
console.log(Sex.男，Sex.女)---找到内容对应的下标
console.log(Sex[0])---根据下标找到对应的内容

默认情况下，从0开始为元素编号，也可手动指定内容的值，后面的下标会累加1

eg. enum Sex {男=1,女}

3.数组

js的数组包容性很强，可以装各种类型的数据，但是大型项目开发过程中，需要数组中只装指定类型

let arr: 类型[] = []  (初始值为[])
let arr: Array<类型> = []

优点：

数组中只能装单一类型的数据
更好的类型推导

例：一个数组既能装string,又能装number

let arr: Array<string | number> = []
//需要对string类型和number进行不同操作时：
arr.forEach(v=>{
   if(typeOf v==='string'){}
   else{}
  })

元组：定义一个确定长度的数组，且每一项的类型也确定

let 变量：[类型1，类型2...]
eg. 
let x:[string,number]
x=['abc',123]

元组允许越界：

x.push('类型1或类型2的数据')
eg.
x.push('def')或x.push(456)

4.函数

约定函数参数个数和参数类型，约束返回值的结果和类型

有返回值的写法：
函数fn1，有一个类型是string的参数，有返回值，为字符串
function fn1(name:string):string{
           return `我叫${name}`
}

没有返回值的写法：
function fn2(name:string):void{
  console.log(`我叫${name}`)
}

默认参数

function add (x:number,y:numer=0):number{
       return x+y
}
add(1,2)

可选参数:z为可选参数没传参的时候，就是undefined

function add (x:number,y:number，z?:number):number{
    return x+y+z
} 

严谨的写法：
function add (x:number,y:number,z?:number):number{
    if(!z) return x+y
    else return x+y+z
} 

add(1,2,3)

可选参数和默认参数的区别,可选参数不一定会有这个参数,但是默认参数一定会有这个参数

剩余参数:

剩余参数用的是展开收起运算符的收起功能

function add(x:number,y:number,...rest:number[]):number{
    return x+y+rest.reduce((a,b)=>a+b)
}
add(1,2,3,4,5,6)求和:21

5.接口

对ts类型进行检查,也被称作"鸭式辨型法"或"结构性子类型化"

interface:用来描述对象(常用来描述后端返回值的格式)

eg.
    //定义一个狗狗的类型
interface IDog{
    color:string
    name:string
    type:string
}
  //定义一个用户的类型
interface IUser{
    name:string
    age:number
    email?:string(可选属性)
    [key:string]:any(扩展属性)
    pet?:Array<IDog>
}

//定义一个IUser类型的对象user
let user:IUser = {
     name:"张三",
     age:24,
     email:"12345@qq.com"(可选属性)
     address:'北京市xxx区'(扩展属性)
 }
 //定义一个数组,里面装IUser类型的对象
let users:Array<IUser>=[user]
//往数组中添加元素
users.push({name:"李四",age:25,gender:'男'(扩展属性)})

TypeScript和Javasrcipt随记