php开发网站项目心得,手机网站设计,怎么创建一个自己的网站,东莞新闻最新消息今天文章目录 TypeScript一、简介二、类型声明三、数据类型anyunknownnervervoidobjecttupleenumType一些特殊情况 TypeScript
是JavaScript的超集#xff0c;代码量比JavaScript复杂、繁多#xff1b;但是结构更清晰
一、简介
为什么需要TypeScript#xff1f;
JavaScript的… 文章目录 TypeScript一、简介二、类型声明三、数据类型anyunknownnervervoidobjecttupleenumType一些特殊情况 TypeScript
是JavaScript的超集代码量比JavaScript复杂、繁多但是结构更清晰
一、简介
为什么需要TypeScript
JavaScript的困扰 不清楚的数据类型不会指明代码的逻辑漏洞访问不存在的属性低级的拼写错误 Typescript会进行静态类型检查在代码运行前对代码进行检查标红将代码错误前置
如何编译TypeScript
要将.ts编译成.js文件需要配置TypeScript的编译环境 全局安装TypeScriptnpm i TypeScript -g 初始化tsc --init 生成一个编译控制文件tsconfig.json 监视ts文件tsc --watch index.ts 会生成一个对应的js文件一有变化就会更新并生成一个配置文件tsconfig.json 修改配置文件取消注释 noEmitOnError:true 只要ts文件语法正确的时候才会更新ts
二、类型声明
声明变量时需要对其进行类型声明使用:来进行类型声明
let a: string // a是字符串变量只能赋值字符串官方推荐小写
let b: String // 字符串对应的包装对象function sum(a: number, b: number): number {return a b
} //sum函数的参数必须的number返回值也必须是number三、数据类型
any 任意类型意味着放弃类型检查即可以存任意类型的值也可以赋值给任意类型的变量 unknown 未知类型类型安全的any但是不能将unknown数据类型赋给其他类型 若要将unknown赋值给其他类型可以这么做
let a: unknown
a hello
let b: string
b a as stringlet str:unknown
str world
str.toUppercase() //有警告
(str as string).toUppercase() //无警告nerver 不是任何值我们一般不用不然声明的变量将无用。一般是TypeScript主动推断出来的或者是特殊的函数不需要任何返回值 void 通常用于函数返回值的类型声明这个类型是函数返回值为空undefined且不依赖函数返回值进行任何操作。 function fn():undefined{ ... }
let result1 fn() // 编码者可以利用函数的返回值
function fn():void{ ... }
let result2 fn() // 编码者不可以利用函数的返回值object
object(小写)非原始数据类型
Object(大写)可以调用到Object方法的类型通俗讲除了null和undefined都可以。
声明对象类型 let person: { name: string, age?: number, [key: string]: any }//age?表示可选// [key: string]: any 表示索引签名任意数量的属性key是any类型value是string类型。声明函数类型 let sum: (a: number, b: number) number //指明传入的参数类型number返回类型也为numbersum function (x, y) {return x y}声明数组类型 let arr1:srtring[] //字符串数组let arr2:Arraystring //数字数组tuple 元组类型 - 特殊的数组类型。元素固定数量可以是不同类型 !注意元组不是关键字 let arr1 [number,string] //两个元素一个数字一个字符串
let arr2 [number,...[string]] //一个数字和任意个stringenum 枚举类型定义一组命名常量增强可读性可维护性程序员编写代码时不容易出错 数字枚举 enum Direction{ Up, Down, Left, Right }function walk(data:Direction){ //使用例子if(data Direction.Up){console.log(向【上】走);}else if(data Direction.Down){console.log(向【下】走)}else if(data Direction.Left){console.log(向【左】走)}else if(data Direction.Right){console.log(向【右】走)}}字符串枚举 enum Direction{Up up,Down down,Left left,Right right}常量枚举 使用const关键字定义在编译时内联避免产生额外的代码 那么何为内联 在TypeScript编译时将成员引用替换成实际值不生成额外枚举对象减少Javascript代码量提高运行速度。 Type 为任意数据类型创建别名一般开头用大写 创建别名 type num number // num是数字类型联合类型(高级类型) type Status number|string //Status是数字或字符串类型
type Gender 男|女 //Gender是字符男or女交叉类型 type Area {height : number;width : number;speak():void;
};一些特殊情况 当使用类型声明限制函数的返回值为空时TypeScript并不会严格限制函数的返回值为空 补充 数组方法map()find()都是有返回值的操作而forEach()是单纯遍历数组没有返回值 type LogFunc () viod
const fn:LogFunc () {return 100 //允许返回非空值
}为什么如此呢就是为了兼容以下代码
let src [1, 2, 3]
const dst [0]
src.forEach((e1) dst.push(e1)) //forEach本身没有返回值但是由于如果箭头函数只有一段代码可以不加{}如果严格限制返回值必须为空的话这样写就会不合法所以提前用限制函数为void的话不是严格要求返回值必须是空
