wordpress外贸主题购买,seo工具软件,企业网站托管套餐,广州公司注册网址TypeScript 1#xff0c;TypeScript是什么?2#xff0c;类型的缺失带来的影响3#xff0c;Ts搭建环境-本博主有专门的文章专说明这个4#xff0c;使用tsc对ts文件进行编译5#xff0c;TS运行初体验简化Ts运行步骤解决方案1解决方案2#xff08;常见#xff09; 开始学习… TypeScript 1TypeScript是什么?2类型的缺失带来的影响3Ts搭建环境-本博主有专门的文章专说明这个4使用tsc对ts文件进行编译5TS运行初体验简化Ts运行步骤解决方案1解决方案2常见 开始学习1变量的声明变量的声明关键字变量的类型推导推断 2变量的类型3函数的类型 - 参数4函数的类型 - 返回值5匿名函数的参数6对象类型的使用6any类型7unKnown类型7void类型8never类型9tuple类型(元组类型) 1TypeScript是什么?
主要为解决js的类型缺失可以在开发阶段进行校验给予报错提示 特点 以js为基础构建的语言一个js的超集Ts扩展了js并添加了类型Ts可以在任何支持js的平台中执行Ts不能被js解析器直接执行得通过编译一般通过Babel/TSC编译成js也支持es的新特性
2类型的缺失带来的影响
当开发大型项目的时候项目的庞大没有类型约束会带来安全隐患多人开发的时候没有类型约束就需要对别人传入的参数进行各种验证
3Ts搭建环境-本博主有专门的文章专说明这个
npm i -v typescript -gtsc
4使用tsc对ts文件进行编译
进入命令行进入ts文件所在目录执行命令 tsc xxx.ts
5TS运行初体验
//string,TypeScript给我们定义的标识符提供的字符串类型
//StringJavaScript中的字符串的包装类
let myname: string乞力马扎罗
// myname112,这样就不可以因为上面已经明确告诉你指定类型了
console.log(myname)每次想要运行上面ts文件都通过两个步骤第一步通过tsc编译到TypeScript代码第二步在游览器或者Node环境下运行JavaScript代码有点繁琐~
简化Ts运行步骤
解决方案1
通过webpack配置本地的TypeScript编译环境和开启一个本地服务可以直接运行在游览器上通过webpack的loader将vue的各种编译转化成jscss
解决方案2常见
通过ts-node库为TypeScriot的运行提供执行环境安装ts-node
npm install ts-node -g需要依赖两个包tslib和 types/node npm install tslib types/node -g使用ts-node ts文件名运行ts文件即可
开始学习
1变量的声明
下面的数据类型也叫类型注解可省略 类似这个
let myname: string乞力马扎罗
// myname112,这样就不可以因为上面已经明确告诉你指定类型了
console.log(myname)变量的声明关键字
不建议使用var因为没有块级作用域会引起问题
变量的类型推导推断
在实际项目中不会给每个变量进行类型注解我们更希望通过ts本身的特性帮助我们推导出对应的变量类型ts在声明标识符的时候如果直接进行赋值会根据赋值的类型推导出标识符的类型注解let进行类型推导出来的是通用类型const进行类型推导出来的是字面量类型
let myname1 乞力马扎罗
//myname1112//,这样也不可以因为上面已经推导出string类型了
console.log(myname)2变量的类型 字面量类型 number类型 Ts和Js一样不区分整数类型int和浮点型double统一为number类型 boolean类型 boolean类型只有两个取值true和false 字符串类型 sting类型单引号和双引号都支持模板字符串也支持 数组类型
// 注意在开发中数组中存放的都是相同的类型
// 1,sting[],数组类型并且数组中存放的字符串类型常用写法
// 2,Arraynumber,数组类型这种的只能存放数值这种的其实是泛型的写法
let num [1, 2, 3]
let num1: string[] [1, 2, 3]
let num2: Arraynumber []
let num3: Arraystring []Object类型
// 写法一类型推导写法
let obj {name: 乞力马扎罗,age: 18
}
// 写法2
type objtype {name: stringage: number
}
let obj1: objtype {name: 乞力马扎罗,age: 18
}
// 写法3
let obj3: {name: stringage: number
} {name: 乞力马扎罗,age: 18
}
console.log(obj3.age)
// 写法4不建议它是空对象不能调用obg2.name等
// object对象类型可以用于描述一个对象不能获取和设置数据
let obj4: object {name: 乞力马扎罗,age: 18
}
// console.log(obj4.age)//报错在对象中不可以添加相同的属性名称类似这个
// 写法一
let obj {name: 乞力马扎罗,name:嘿嘿,age: 18
}
//通过采取symbol定义相同的名称因为Symbol函数返回不同的值
const s1: symbol Symbol(title)
const s2: symbol Symbol(title)
let obj3 {s1: Symbol(乞力马扎罗),s2: Symbol(乞力马扎罗),age: 18
}null类型和undefined类型
let n: null null
let u: undefined undefined3函数的类型 - 参数
当函数的参数没有给明确的类型的时候默认any类型在定义一个TypeScript中的函数的的时候都要明确指定参数的类型
function sum(num1:number, num2:number) {return num1 num2
}
sum(1,2)4函数的类型 - 返回值
函数的返回值可以自己根据返回的内容进行推导也可以指定返回值类型
//方式1
function sum(num1: number, num2: number) {return num1 num2
}
let sum2: string sum(1, 2)//报错
console.log(sum2)
//方式2
function sum(num1: number, num2: number):number {return num1 num2
}
let sum2 sum(1, 2)
console.log(sum2)
返回的类型不对提示报错 5匿名函数的参数
const arrs [1,2,3]
//匿名函数作为参数传递给另一个函数是否要类型注解?最好不要加
//forEach接收的是函数里面的值已经有明确的类型它是根据上下文推导出来的
//类似此时item并没有指定类型但是item是string类型
//这个根据上下文进行推导参数何返回值的类型的过程叫做上下文类型
arrs.forEach(function(item,index,arr){console.log(item,index,arr)
})6对象类型的使用
对象类型和函数类型的结合使用在对象我们可以添加属性并且告知ts该属性需要什么类型属性之间可以使用或者来分割最后一个分隔符是可选的每个属性的类型部分也是可选的如果不指定那么就是any类型
type Pointtype{x:numbery:number//如果不指定下面就是any类型z?:number//可选下面不传也不会报错
}
function handler(point:Pointtype){console.log(point.x)
}
handler({x:1,y:2})6any类型
给一个any类型的变量赋值任何的值比如数字字符串的值一般对于拿到的数据过于繁琐的时候采用这个any
let id 1
id 2
// id 2//报错
// 故
// any类型就表示不同标识符的任意类型并且可以在该标识符上面进行人员的操作
let id1: any 1
id1 2
id1 2//不报错定义any类型的数组
let idarrs: any[] [1,1,[2]]7unKnown类型
比较特殊的一种类型用于描述不确定的变量和any差不多但unKnown类型的值上做任何事情都是不合法的想要不报错必须先进行类型缩小
let idarrs: unknown999
idarrs2
// console.log(idarrs.length)//报错
// 解决报错必须先校验也叫类型缩小
if(typeof idarrsstring){console.log(idarrs.length)//不报错
}7void类型
void通常指定一个函数是没有返回值的那么他的返回值就是void类型定义了void后不强制不可以有返回值return当基于上下文推导出来的类型为void的时候并不会强制函数一定不能返回函数也可以将undefined赋值给void类型函数也可以返回undefined
//方式1
type Pointtype {x: numbery: number
}
function handler(point: Pointtype): void {console.log(point.x)
}
handler({ x: 1, y: 2 })
//方式2自己推导写法
const foo () { }
//方式2,用来指定函数的类型
const foo1: () void () { }
//方式3,清晰写法
type footype () void
const foo2: footype () { }
//方式4,函数调用,指定函数的类型为void传的时候必传函数
function funs(fn:()void){setTimeout((){handler({ x: 1, y: 2 })},100)
}
// funs(123)//不可以传会报错因为人家接收函数类型你传数值
funs((){})//不可以传会报错因为人家接收函数类型你传数值
8never类型
开发中很少实际去定义never类型某些情况自己出进行推导开发框架中或者封装一些类型工具的时候使用 函数中抛出异常或者死循环会抛出异常
9tuple类型(元组类型)
数组中通常建议存放相同类型的元素不同类型的元素不推荐放数组中此时就可以放在对象或者元组中其次元组中每个元素都有自己的特性的类型可以根据索引值获取到的值可以确定对应的类型
// 存放多种类型值的方法
// 1,any类型
// 2,使用对象
const info2 {name: 1,age: 2,height: 19.8
}
//使用元组类型
const info: [string, number, number] [1, 2, 2.88]
