TS初相识

目录前言关于TS使用TS之前的环境搭配TS的数据类型numberstringnullundefined根类型数组类型元组函数类型前言js的缺点错误出现的时机靠后数据类型并不是连续的内存空间js没有类型检测机制弱类型关于TS融合了后端面向对象思想的超级版的javaScript语言。typescript是微软2012年10月开发的一个开源的编程语言typescript是javascript的一个超集扩展了JS为它添加了类型支持来源于JS归于JSTS通过TS编译器或Babel转译为JS代码TS可以编译出普通、干净、完整的JS代码可运行任何浏览器任何操作系统任何可运行JS的地方使用TS之前的环境搭配首先需要安装node.js安装好Node.js后打开cmd窗口输入以下命令npm install -g typescript //安装typescript下载 npm i -g ts-node 可以直接运行ts文件不需要转成jsnpm i -g ts-node //安装ts的node 辅助工具直接运行ts文件ts-node 02.one.ts //安装好之后就可以直接运行ts文件了npx tsx...建立tsconfig.json文件src:用来写ts文件dist 用来放编译后的js文件html文件用来运行js文件初始化tsconfig.json//来到对应的文件夹终端下tsc --init修改tsconfig.jsonrootDir:./src 用来配置编译src文件夹下的ts文件outeDir:./dist 用来放ts编译后的js文件target: ES2016,编译ts文件npx tsc或者tsc -w //监听所有的ts 文件的变化,动态变化jsTS的数据类型基本类型string、number、boolean、symbol、bigint、null、undefined引用类型array、 Tuple(元组)、 object(包含Object和{})、function特殊类型any、unknow、void、nerver、Enum(枚举)其他类型联合类型、交叉类型、字面量类型等等numberTypeScript里的所有数字都是浮点数。双精度 64 位浮点值。它可以用来表示整数和分数。let binaryLiteral: number 0b1010; // 二进制 let octalLiteral: number 0o12; // 八进制 let decLiteral: number 10; // 十进制 let hexLiteral: number 0xa; // 十六进制 console.log(binaryLiteral,octalLiteral,decLiteral,hexLiteral) //10,10,10,10string一个字符系列使用单引号或双引号来表示字符串类型。反引号来定义多行文本和内嵌表达式。let name: string Runoob; let str: string 我的存款是 let years: number 5; let words: string 您好今年是 ${ name } 发布 ${ years 1} 周年; console.log(words) //您好今年是 Runoob 发布5周年 //字符串和数字之间能够一起拼接 console.log(stryears) //我的存款是5nullundefined// undefined let data1:anyundefined let data2:unknownundefined let data3:undefinedundefined // null let data1:nullnull let data2:anynull let data3:unknownnull根类型Object{} 除了undefined/null其他都可以赋值// 根类型 Object{} 除了undefined/null其他都可以赋值 let obj1: Object 123 let obj2: Object 123 let obj3: Object { name: tom } let obj4: Object [1, 2, 3] // let obj5: object undefined//报错 // let obj6: object null//报错 // 两个容易犯错误的小栗子 // 例1 let obj{username:jack,age:18} console.log(obj.username); //jack console.log(obj[username]);//jack // let usernameusername // console.log(obj[username]); //报错因为username变量值可能会改变 // usernamelisi//例如 const usernameusername //这就对了因为const定义的变量不能修改 console.log(obj[username]); // 例2 let obj:Object{username:jack,age:18} console.log(obj.username);//报错因为Object上没有username属性数组类型类型名称 []Array数据类型let arr1: number[] [1, 2, 3] let arr2: Arraynumber [1, 2, 3] let arr2: Arraynumber [1, 2, 3] // error //要想是数字类型或字符串类型需要使用 let arr3: Arraynumber | string [1, 2, 3] //ok元组满足以下3点的数组就是元组(1)在定义时每个元素的类型都确定(2)元素值的数据类型必须是当前元素定义的类型(3)元素值的个数必须和定义时个数相同语法[类型类型类型]//元组类型在定义数组的时候类型的数据的个数一开始就已经限定了 let arr:[string,number,boolean] [你好,100.254,true] //注意元组类型在使用的时候 //数据的类型的位置和数据的个数应该和定义元组的时候的数据类型及位置应该一致 console.log(arr[0].split()) //[你,好] console.log(arr.toFixed(2)) //100.25函数类型有两种方式一种为function 另一种为箭头函数在书写的时候也可以写入返回值的类型如果写入则必须要有对应类型的返回值但通常情况下是省略因为TS的类型推断功能够正确推断出返回值类型{ // 限制形参的类型 // function getSum(a: number, b: number) { // return a b // } // // getSum(a, b)// 报错 // getSum(1, 2) // 限制返回值的类型 // function getSum(a: number, b: number): number { // return a b // } // // getSum(a, b)// 报错 // getSum(1, 2) // 箭头函数 // const getSum(a:number,b:number):number{ // return ab // } // Function类型 // const getSum: Function function () { } // 定义变量getSum类型是函数函数的返回值是number // const a: number 1 // const getSum: (a: number, b: number) number (a, b) { return 1 } // 将类型提出 type TGetSum (a: number, b: number) number const getSum: TGetSum (a, b) { return a b } getSum(1, 2) }