开篇:你好,时间的朋友,今天想记录下这段时间使用typeScript的一些心得体会,那么,为什么要学习typeScript呢?,因为,'javaScript不行',开个玩笑,Js是“动态”语言,自由度有点高,Ts的存在就是限制Js的自由度,更加“静态”,存在的就是合理的,存在并且能够流行起来,那就更加证明其合理性了,typeScript存在并且流行起来,有很多原因,如:是js的超级,是开发大型应用的基石(这话说的,额...),在编写阶段就可以检查错误,还有语法提示,更重要的是由微软("爸爸")开发的...,其他的就不多说了,开始我们的正文。
正文
- 工具
- 如果要想练习typeScript的,你需要安装好nodejs,typeScript,巴拉巴拉(此处省略1000字),如果有项目使用typeScript,那就在项目里拉个页面,开始搞吧,安装和配置可以参考官方文档
- 配置(具体看官方文档)
tsc --init //会生成一个tsconfig.json文件,具体配置看官方文档
复制代码
-
数据类型:(由于ts是js的超级,js有的数据类型,ts都有,不仅有,还多出了好几个,具体下文讨论)
- 基础数据类型
- 稍微用过ts的朋友对基本的数据类型都会有一些了解,如:number,boolean,string...,可以在声明变量的时候指定数据类型(也可以利用ts的类型推断),且确定变量类型后,如果再赋值不同的数据类型,就会报错...
- 我着重谈谈我对any,never,void,null,underfined这些数据类型的看法
- any: 我们声明一个变量,没有自定类型,这个变量就会默认是any类型,我的理解是(再基础数据类型中),any是基础数据类型的父集(就是变量为any类型的变量,可以被赋值给任意的基础数据类型),我觉得这个any虽然有很多好处,但也有一些坏处:没有了ts的提示,基本上跳过了对any类型的变量检查,这和我们使用ts的初衷好像有点相违背,如果项目中都是哦耶那个any类型,那我们写的代码就重新回到回到了js(出力不讨好),更形象的说是:
anyScript
- null与undefined:这两个是所有类型的子类型(当然需要在tsconfing.json 中打开配置项"strictNullChecks": true,不建议这样做,我们可以使用联合类型来做代替),null与undefind互为子类型(它俩真的很客气)
- void: 我使用的这段时间,发现用这个void地方不多,这个主要用在函数没有返回值的地方可以指明其为void
- never: 这个用的才少呢,可能说的不全,官网上说是用在报错,死循环的情况(只是我的理解)
// 需要了解的几个名词 //1. 类型注解(你想让定义的变量成为什么数据类型) //2. 类型推断(声明并且赋值,这样就不用类型注解了,不能正确推断出类型的时候用类型注解) // 联合类型 let a: number | string (a是number或者string),注意要用联合的公有属性,在赋值的时候确 //确认其类型 // 基本数据类型示例: let myNumber: number = 1000; let myBoolean: boolean = true; // 同number let myString: string; //同number,也可以用模板字符串 `` myString = '1000' let myAny: any; //等同于let myAny; myAny = 10; //可以是任意数据类型 myAny = "string";//可以是任意数据类型 let voidFunction = ():void=>{ //没有返回值的用void console.log(321132); // return 123 // 会报错 } // null 和 undefined是所有类型的子类型,被null和undefined赋值后就会变成any类型 let a = undefined // 可以用联合类型来搞 a=null // never 报错死循环 //object: 所有的非原始数据类型 declare function test(a:number,b:number):number //函数注解,全局声明 test(10,10) 复制代码
- any: 我们声明一个变量,没有自定类型,这个变量就会默认是any类型,我的理解是(再基础数据类型中),any是基础数据类型的父集(就是变量为any类型的变量,可以被赋值给任意的基础数据类型),我觉得这个any虽然有很多好处,但也有一些坏处:没有了ts的提示,基本上跳过了对any类型的变量检查,这和我们使用ts的初衷好像有点相违背,如果项目中都是哦耶那个any类型,那我们写的代码就重新回到回到了js(出力不讨好),更形象的说是:
- 基础数据类型
-
对象数据类型
- 接口(是用来描述object的,像数组,函数,对象...,都可以用接口来描述)
- 对象类型(注解示例)
interface Person { readonly id: number //只读属性 name: string, //必须有 age?: number, //可选属性,可有可无,可少(如果想减少) [propName:string]:any // 这样就可以多了,任意属性,一定是any } let person:Person = { name: 'THAT MAN', age: 29, sex: 'man', id:1 } // person.id = 1000 //报错,因为是只读属性 复制代码
- 数组类型(注解示例)
let bb = [1,3,45,5,'sdfa'] // 传入多个类型,等价于 (string | number)[] // 下面是三种等效的写法 interface MyList { // interface写法 [index: number]:number //优先级最高,当然也可以设置其他属性,并为它们加上修饰符readonly } let numberArray: number[] = [1,3,4] //类型的写法,必须都为number类型 let genericType: Array<string> = ['1','2','4'] //泛型的写法 let c: MyList = [1,3,4] // 类数组可以用内置对象表示 interface Aegs { // 模仿内置对象的写法 [index:string]:any length:number } function test () { let a:Aegs = arguments } 复制代码
- 函数类型(注解示例)
// 函数注解的四种方式 // 1.函数声明的注解方式 // function add(a: number, b?:number,c=20, ...restOfNumber:number[]): number { //可选参数放到后面,默认值,剩余参数(必须放到最后) // return a + b+c; // } // 2.函数表达式的注解方式 const addB:(a:number,b:number)=>number =function(a,b){ return a+b } // 3.使用type(类型别名) type Add =(first:number,second:number)=>number const addC:Add =function(a,b){ return a+b } // 4. 由于函数也是对象,可以使用interface(这个比较常用) interface Add { (first:number,second:number):number } const addE:Add =function(a,b){ return a+b } // 5. 解构赋值,默认值,类型注解放到一起会是什么样子 function test({first,second}:{first:number,second:number} = {first:1,second:2}){ return first + second } console.log(test({first:1,second:4})); //5 //函数中的this,可以用interface来描述 函数的重载的意义(我觉得就是使表达的意思更加清楚,没什么用,也很少用) function reverse(x:number):number //函数重载 function reverse (x:string): string //函数重载 function reverse(x:number|string){ if(typeof x === 'number'){ return Number(`${x}`.split('').reverse().join('')) }else if(typeof x === 'string') { return x.split('').reverse().join('') } } console.log(reverse(123)); //321 console.log(reverse('that man')); //nam taht 复制代码
- 对象类型(注解示例)
- 接口(是用来描述object的,像数组,函数,对象...,都可以用接口来描述)
结束语:关于类,泛型,还有一些其他的,如:枚举,元组,如果感兴趣,请看我下篇文章,再见,时间的朋友