typeScript入门 — 变量类型及函数参数

叁歲伎倆 2023-07-04 04:48 18阅读 0赞

字符串特性

自动拆分字符串(可以用一个字符串模板调用一个方法):

用一个字符串模板调用一个方法时,普通字符串会被分割,放到一个数组中去,对应的变量会被输出:

  1. function greeter(template, myname: string, age: number) {
  2. console.log(template)
  3. console.log(myname)
  4. console.log(age)
  5. }
  6. const myname = "Jane";
  7. const age = 20
  8. greeter`my name is ${myname}, age: ${age}`

输出:

20200208095911617.png

上边ts文件 编译成js文件,源码也很有意思,在全局上(window)挂载了一个方法,方法最后返回的还是生成的数组,只不过是添加了一个row属性,数组中添加了一个不可被枚举的row属性,值为数组本身,最后把数组返回:

  1. // 用了单例设计思想
  2. var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
  3. if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
  4. return cooked;
  5. };
  6. function greeter(template, myname, age) {
  7. console.log(template);
  8. console.log(myname);
  9. console.log(age);
  10. }
  11. var myname = "Jane";
  12. var age = 20;
  13. greeter(__makeTemplateObject(["my name is ", ", age: ", ""], ["my name is ", ", age: ", ""]), myname, age);

#

变量类型

:string

可在变量之后定义类型,没有定义的变量,以值的类型为准

  1. let obj: string = '123'
  2. let count = 123 // 说明count类型为数字类型,下次为count赋值别的类型ts中会报错

20200208101510477.png

:any

任意类型的值,变量可以被赋值为任意类型

  1. let count: any = 123
  2. count = '23'

:number和 :boolean

数字和布尔类型

  1. let obj: boolean = true
  2. let count: number = 123

方法是否有返回值

:void 无返回值

写在括号后边,方法不需要任何返回值

  1. function test(): void{}

:string 必须返回字符串类型

  1. function test(): string{}

··· ···

自定义类型

可自定义类,作为变量的类型

  1. class Test{
  2. private myname: any;
  3. constructor(name) {
  4. this.myname = name
  5. }
  6. }
  7. let test: Test = new Test('lxc') // test变量类型为Test类型

函数参数

?:可选参数

下边age是可选参数,可传可不传,如果age后边还有参数,age之后参数必须为默认值参数

  1. function test(myname:string, age ?:number){}
  2. function test(myname:string, age ?:number, height:number=180){}

tips:

如果在方法体里用到可选参数,需要提前处理可选参数的值,通常可选参数可当作boolean值来使用,比如:

在vue源码中,可选参数的应用,其实它是定义了一个对象的属性是否可被枚举,enumerable是可选属性,如果没有传,enumerable为undefined,!!undefined为false

  1. export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
  2. Object.defineProperty(obj, key, {
  3. value: val,
  4. enumerable: !!enumerable,
  5. writable: true,
  6. configurable: true
  7. })
  8. }

发表评论

表情:
评论列表 (有 0 条评论,18人围观)

还没有评论,来说两句吧...

相关阅读