seo网站推广工具,做网站维护有危险吗,建站的步骤有哪些,做推广网站费用TypeScript基本理解
为什么使用TS
JavaScript发展至今#xff0c;没有进行数据类型的验证而我们知道#xff0c;在编程阶段#xff0c;错误发现的越早越好而TS就解决了JS的这个问题
认识TypeScript
TypeScript是拥有类型的JavaScript超级#xff0c;它可以编译成普通、…TypeScript基本理解
为什么使用TS
JavaScript发展至今没有进行数据类型的验证而我们知道在编程阶段错误发现的越早越好而TS就解决了JS的这个问题
认识TypeScript
TypeScript是拥有类型的JavaScript超级它可以编译成普通、干净。完整的JavaScript代码我们可以将TypeScript理解成为 加强版的JavaScript**JavaScript拥有的特性TypeScript全部都是支持的**并且紧随着ECMAScript的标准Typescript在 实现新特性的同时总是保持和ES标准的同步甚至领先TypeScript最终会被编译成JavaScript代码
TypeScript特点
始于JavaScript归于JavaScriptTypeScript是一个强大的工具用于构建大型项目拥有先进的JavaScript
TypeScript的编译环境
前面我们知道TS最终会转成JS代码的那么TS代码运行也需要响应的环境npm install typescript -g全局安装TypeScript代码运行环境创建 index.ts文件
//let 变量名称变量类型
//String大写的是JavaScript中的包装类new String()
//string小写的是TypeScript定义变量的类型
let message: string 123
console.log(message)而后通过 tsc index.ts将ts文件编译成js文件进行使用
TypeScript的运行环境
若每次使用 tsc命令将ts转成js比较麻烦我们也可以使用ts-node直接运行使用ts-node需要全局安装两个包 npm install ts-node -gnpm install tslib type/node -g 而后运行 ts-node index.ts即可
变量定义
上面的例子中我们对变量定义进行了说明
// let/const 变量名称:数据类型类型注解 赋值
let message:string hello //string就是类型注解变量的类型推导推断
在实际书写过程中我们无需为每一个变量指定数据类型因为 TypeScript会根据赋值的内容自动推导出变量的类型
let message hello而const声明的变量则是 字面量类型
const message:hello hello
const num:1.88 1.88JavaScript和TypeScript的数据类型
TypeScript是JavaScript的一个超集 JS拥有的特性TS全部拥有 JavaScript类型-number类型
数字类型是开发中经常用到的类型不区分整数型和浮点数类型
let num:number 1.88JavaScript类型-boolean类型
let flag:boolean trueJavaScript类型-string类型
let str:string helloJavaScript类型-Array类型 明确指定数组的类型注解 1.string[]数组类型并且数组中存放的字符串类型 let names:string[] [1,2]2.Array与上述表述的一致只是另外一种写法 let num:Arraynumber [1,2,3]JavaScript类型-Object类型
//类型注解要和实际的内容相对应否则就会报错
let obj:{name:string,age:number
} {name:zhangcheng,age:18
}但是不能写成以下写法 下面的写法相当于是一个空对象在后续的操作中都会报错
let obj:object {name:zhangcheng
}JavaScript类型-null和undefined类型
let n: null null
let unde:undefined undefined函数的类型
函数的参数类型
在定义函数的时候对于传入的参数我们可以指定传入参数的类型同时参数的个数也会限制死
function sum(num1:number,num2:number){}函数的返回值类型
通常情况下是不用对函数的返回值进行类型的注解因为会自动推导出来但是明确的写明类型注解会有助于代码的阅读性 通常在小括号最后对函数的返回值进行类型注解
function sum(num1:number,num2:number):number{}匿名函数的参数
针对于匿名函数会根据上下文自动推导出参数的类型不需要特别的去指定
let arr [zhangsan,lisi]
arr.forEach((item,index,arr){})
//item,index,arr属于上下文类型不需要特殊的指定对象类型与函数类型联合使用
//参数名称:{属性1类型注解属性2类型注解....}
function printPoint(ponit: { x: number, y: number }) {console.log(ponit.x,ponit.y);
}//传入参数的时候一定要包含设定好的属性
printPoint({x:100,y:200})同时有另外一种写法
type ponitType {x: numbery: number//z表示可选属性可以传入可以不传入z?:number
}//参数名称:{属性1类型注解属性2类型注解....}
function printPoint(ponit: ponitType) {console.log(ponit.x,ponit.y);
}//传入参数的时候一定要包含设定好的属性
printPoint({x:100,y:200})TypeScript类型-any类型
在某些情况下我们无法确定一个变量的类型并且这个变量的类型可能会发生变化可以使用any类型对于 any类型的变量我们可以对变量赋值任何值
let a:any why
a 123一般在数据类型十分复杂的时候我们可以使用any类型但是不推荐到处使用any也不推荐不使用any
TypeScript类型-unknown类型 unknown是TypeScript中比较特殊的类型 unknown类型的变量做所有的操作前都是不合法的 因此在做操作前需要进行类型校验 称类型缩小
let str: unknown 123456//直接取length会报错
// console.log(str.length);//需要进行类型校验
if (typeof str string) {console.log(str.length)
}与 any类型的区别 any类型做所有的操作都是合法的无需进行类型的校验而unknown类型做所有的操作都是非法的需要进行类型的校验
TypeScript类型-void类型
void通常用来指定一个函数是没有返回值的就是void类型在TS中如果一个函数没有任何的返回值那么返回值的类型就是void类型 而js不返回任何东西默认返回的就是undefined类型 应用场景 用于指定函数返回值类型是void类型同时可以指定传入的参数是函数类型
//指定一个变量是函数 let foo:()void () {}
function delayFn(fn: () void) {setTimeout(() {fn()},1000)
}delayFn(() {console.log(123);
})TypeScript类型-never类型
开发中很少实际去定义 never类型通常是根据上下文自动推导出来的 never类型
//情况一不会自己定义never类型通常是自动推导出来的
//1.死循环
function foo(): never {while (true) {console.log(123)}
}
foo()//2.函数返回值是空的情况
function foo1() {return []
}在开发框架或者工具的时候可能会用到never
function changeMessage(message: string | number) {switch (typeof message) {case string:console.log(message.length)breakcase number:console.log(message);breakdefault://正常来说永远不会执行到default中的代码const check:never message }
}changeMessage(123)//但有一天某个人对工具函数进行了更改增加了一种boolean的情况且没有考虑boolean的case则default就会提示报错让开发者能够看到问题nerver表示永远不会发生值的类型不能接受任何值
TypeScript类型-tuple类型
元组类型与 数组类型十分相似但是也有区别 **数组类型**里面存放的数据要保持类型统一虽然可以不统一但是取值的时候不能明确类型元组类型可以存放不同的数据类型且可以通过下标进行取值取出来的值的类型是明确的
//数组的定义方法 类型[]
let arr: (string | number)[] [123, 123]//元组的定义方法 [类型1类型2]
let tuple: [string, number, boolean] [123, 123, true]
console.log(tuple[0]);
