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

字符串特性

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

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

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}`

输出：

上边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中会报错

: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')

函数参数

?:可选参数

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

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

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

tips:

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

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

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