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

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

## 字符串特性 ##

**自动拆分字符串（可以用一个字符串模板调用一个方法）：**

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

function greeter(template, myname: string, age: number) {
        console.log(template)
        console.log(myname)
        console.log(age)
    }
    const myname = "Jane";
    const age = 20
    greeter`my name is ${myname}, age: ${age}`

输出：

![20200208095911617.png][]

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

// 用了单例设计思想
    var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
        return cooked;
    };
    function greeter(template, myname, age) {
        console.log(template);
        console.log(myname);
        console.log(age);
    }
    var myname = "Jane";
    var age = 20;
    greeter(__makeTemplateObject(["my name is ", ", age: ", ""], ["my name is ", ", age: ", ""]), myname, age);

# #

## 变量类型 ##

**:string**

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

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

![20200208101510477.png][]

**:any**

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

let count: any = 123
    count = '23'

**:number和 :boolean**

**数字和布尔类型**

let obj: boolean = true
    let count: number = 123

**方法是否有返回值   **

**:void 无返回值**

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

function test(): void{}

**:string 必须返回字符串类型**

function test(): string{}

**··· ···**

**自定义类型**

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

class Test{
        private myname: any;
        constructor(name) {
            this.myname = name
        }
    }
    let test: Test = new Test('lxc') // test变量类型为Test类型

## 函数参数 ##

**?:可选参数**

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

function test(myname:string, age ?:number){}

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

### tips: ###

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

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

export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
      Object.defineProperty(obj, key, {
        value: val,
        enumerable: !!enumerable,
        writable: true,
        configurable: true
      })
    }

[20200208095911617.png]: https://img-blog.csdnimg.cn/20200208095911617.png
[20200208101510477.png]: https://img-blog.csdnimg.cn/20200208101510477.png