【vue.js之夯实基础-4】TypeScript 入门之实操（类型批准联合类型接口 Lambada函数表达式数组元组）

最新推荐文章于 2023-05-20 17:00:50 发布

alwarse

最新推荐文章于 2023-05-20 17:00:50 发布

阅读量812

点赞数

分类专栏： vuejs 文章标签： typescript vue.js javascript

本文链接：https://blog.csdn.net/alwarse/article/details/122533401

版权

vuejs 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

TypeScript 之 hello.ts

alert('hello world in TypeScript!');

tsc 编译成hello.js

alert('hello world in TypeScript!');

idea可以自动把ts文件编译成js

在这里插入图片描述

类型批注

TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的，而且可以被忽略而使用 JavaScript 常规的动态类型
//对于基本类型的批注是number, bool和string。而弱或动态类型的结构则是any类型。

function Add(left: number, right: number): number {
    return left + right;
}

tsc

function Add(left, right) {
    return left + right;
}

联合类型

var val:string|number
val = 12
console.log("数字为 "+ val)
val = "Runoob"
console.log("字符串为 " + val)

tsc

var val;
val = 12;
console.log("数字为 " + val);
val = "Runoob";
console.log("字符串为 " + val);

也可以将联合类型作为函数参数使用

function disp(name:string|string[]) {
    if(typeof name == "string") {
        console.log(name)
    } else {
        var i;
        for(i = 0;i<name.length;i++) {
            console.log(name[i])
        }
    }
}
disp("Runoob")
console.log("输出数组....")
disp(["Runoob","Google","Taobao","Facebook"])

tsc

function disp(name) {
    if (typeof name == "string") {
        console.log(name);
    }
    else {
        var i;
        for (i = 0; i < name.length; i++) {
            console.log(name[i]);
        }
    }
}
disp("Runoob");
console.log("输出数组....");
disp(["Runoob", "Google", "Taobao", "Facebook"]);

联合类型数组

var arr:number[]|string[];
var i:number;
arr = [1,2,4]
console.log("**数字数组**")

for(i = 0;i<arr.length;i++) {
    console.log(arr[i])
}

arr = ["Runoob","Google","Taobao"]
console.log("**字符串数组**")

for(i = 0;i<arr.length;i++) {
    console.log(arr[i])
}

tsc

var arr;
var i;
arr = [1, 2, 4];
console.log("**数字数组**");
for (i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
arr = ["Runoob", "Google", "Taobao"];
console.log("**字符串数组**");
for (i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

接口可以作为一个类型批注。

interface Shape {
    name: string;
    width: number;
    height: number;
    color?: string;
}

function area(shape : Shape) {
    var area = shape.width * shape.height;
    return "I'm " + shape.name + " with area " + area + " cm squared";
}

console.log( area( {name: "rectangle", width: 30, height: 15} ) );
console.log( area( {name: "square", width: 30, height: 30, color: "blue"} ) );

tsc

function area(shape) {
    var area = shape.width * shape.height;
    return "I'm " + shape.name + " with area " + area + " cm squared";
}
console.log(area({ name: "rectangle", width: 30, height: 15 }));
console.log(area({ name: "square", width: 30, height: 30, color: "blue" }));

接口 IPerson 变量 customer，employee

// customer 实现了接口 IPerson 的属性和方法。
interface IPerson {
    firstName:string,
    lastName:string,
    sayHi: ()=>string
}

var customer:IPerson = {
    firstName:"Tom",
    lastName:"Hanks",
    sayHi: ():string =>{return "Hi there"}
}

console.log("Customer 对象 ")
console.log(customer.firstName)
console.log(customer.lastName)
console.log(customer.sayHi())

var employee:IPerson = {
    firstName:"Jim",
    lastName:"Blakes",
    sayHi: ():string =>{return "Hello!!!"}
}

console.log("Employee  对象 ")
console.log(employee.firstName)
console.log(employee.lastName)

tsc

var customer = {
    firstName: "Tom",
    lastName: "Hanks",
    sayHi: function () { return "Hi there"; }
};
console.log("Customer 对象 ");
console.log(customer.firstName);
console.log(customer.lastName);
console.log(customer.sayHi());
var employee = {
    firstName: "Jim",
    lastName: "Blakes",
    sayHi: function () { return "Hello!!!"; }
};
console.log("Employee  对象 ");
console.log(employee.firstName);
console.log(employee.lastName);

联合类型和接口

//联合类型和接口
interface RunOptions {
    program:string;
    commandline:string[]|string|(()=>string);
}

// commandline 是字符串
var options:RunOptions = {program:"test1",commandline:"Hello"};
console.log(options.commandline)

// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]};
console.log(options.commandline[0]);
console.log(options.commandline[1]);

// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}};

var fn:any = options.commandline;
console.log(fn());

tsc

// commandline 是字符串
var options = { program: "test1", commandline: "Hello" };
console.log(options.commandline);
// commandline 是字符串数组
options = { program: "test1", commandline: ["Hello", "World"] };
console.log(options.commandline[0]);
console.log(options.commandline[1]);
// commandline 是一个函数表达式
options = { program: "test1", commandline: function () { return "**Hello World**"; } };
var fn = options.commandline;
console.log(fn());

接口和数组

interface namelist {
    [index:number]:string
}

//var list2:namelist = ["John",1,"Bran"] // 错误元素 1 不是 string 类型
interface ages {
    [index:string]:number
}

var agelist:ages;
agelist["John"] = 15   // 正确
//agelist[2] = "nine"   // 错误

tsc

var agelist;
agelist["John"] = 15; // 正确

接口继承

接口继承就是说接口可以通过其他接口来扩展自己。

interface Person {
    age:number
}

interface Musician extends Person {
    instrument:string
}

var drummer = <Musician>{};
drummer.age = 27
drummer.instrument = "Drums"
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

tsc

var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("年龄:  " + drummer.age);
console.log("喜欢的乐器:  " + drummer.instrument);

Typescript 允许接口继承多个接口。

interface IParent1 {
    v1:number
}

interface IParent2 {
    v2:number
}

interface Child extends IParent1, IParent2 { }
var Iobj:Child = { v1:12, v2:23}
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)

.tsc

var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + Iobj.v1 + " value 2: " + Iobj.v2);

函数表达式

var msg = function() :String {
    return "hello world";
}
console.log(msg());

tsc

var msg = function () {
    return "hello world";
};
console.log(msg());

匿名函数自调用

(function () {
    var x = "Hello!!";
    console.log(x)
})()

tsc

(function () {
    var x = "Hello!!";
    console.log(x);
})();

内置构造函数

TypeScript 也支持使用 JavaScript 内置的构造函数 Function() 来定义函数：
var res = new Function ([arg1[, arg2[, …argN]],] functionBody)

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);

tsc

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);

递归函数

function factorial(number) {
    if (number <= 0) {         // 停止执行
        return 1;
    } else {
        return (number * factorial(number - 1));     // 调用自身
    }
};

console.log(factorial(6));

tsc

function factorial(number) {
    if (number <= 0) { // 停止执行
        return 1;
    }
    else {
        return (number * factorial(number - 1)); // 调用自身
    }
}
;
console.log(factorial(6));

函数参数类型先不指定，使用时先判断再使用

var func = (x)=> {
    if(typeof x=="number") {
        console.log(x+" 是一个数字")
    } else if(typeof x=="string") {
        console.log(x+" 是一个字符串")
    }
}
func(12)
func("Tom")

tsc

var func = function (x) {
    if (typeof x == "number") {
        console.log(x + " 是一个数字");
    }
    else if (typeof x == "string") {
        console.log(x + " 是一个字符串");
    }
};
func(12);
func("Tom");

函数单个参数时，lambada表达式 () 是可选的

var display = x => {
    console.log("输出为 "+x)
}
display(12)

tsc

var display = function (x) {
    console.log("输出为 " + x);
};
display(12);

无参数时可以设置空括号

var disp2 =()=> {
    console.log("Function invoked");
}
disp2();

tsc

var disp2 = function () {
    console.log("Function invoked");
};
disp2();

函数重载

//重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。

//每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。
//参数类型不同：数量不同：顺序不同

function disp(s1:string):void;
function disp(n1:number,s1:string):void;

function disp(x:any,y?:any):void {
    console.log(x);
    console.log(y);
}
disp("abc")
disp(1,"xyz");

tsc 由于js是动态检查，所以定时时，没法区分函数重载

function disp(x, y) {
    console.log(x);
    console.log(y);
}
disp("abc");
disp(1, "xyz");

Array 数组

Array申明，初始化

var numlist:number[] = [2,4,6,8]

var sites:string[];
sites = ["Google","Runoob","Taobao"]
console.log(sites[0]);
console.log(sites[1]);

tsc

var numlist = [2, 4, 6, 8];
var sites;
sites = ["Google", "Runoob", "Taobao"];
console.log(sites[0]);
console.log(sites[1]);

new Array()

var arr_names:number[] = new Array(4)

for(var i = 0; i<arr_names.length; i++) {
    arr_names[i] = i * 2
    console.log(arr_names[i])
}

var sites:string[] = new Array("Google","Runoob","Taobao","Facebook")

for(var i = 0;i<sites.length;i++) {
    console.log(sites[i])
}

tsc

var arr_names = new Array(4);
for (var i = 0; i < arr_names.length; i++) {
    arr_names[i] = i * 2;
    console.log(arr_names[i]);
}
var sites = new Array("Google", "Runoob", "Taobao", "Facebook");
for (var i = 0; i < sites.length; i++) {
    console.log(sites[i]);
}

数组解构

var arr:number[] = [12,13]
var[x1,y1] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x1)
console.log(y1)

tsc

var arr = [12, 13];
var x1 = arr[0], y1 = arr[1]; // 将数组的两个元素赋值给变量 x 和 y
console.log(x1);
console.log(y1);

数组迭代 for(x in arrs)

var j:any;
var nums:number[] = [1001,1002,1003,1004]

for(j in nums) {
    console.log(nums[j])
}

tsc

var j;
var nums = [1001, 1002, 1003, 1004];
for (j in nums) {
    console.log(nums[j]);
}

多维数组

var multi:number[][] = [[1,2,3],[23,24,25]]
console.log(multi[0][0])
console.log(multi[0][1])
console.log(multi[0][2])
console.log(multi[1][0])
console.log(multi[1][1])
console.log(multi[1][2]);

tsc

var multi = [[1, 2, 3], [23, 24, 25]];
console.log(multi[0][0]);
console.log(multi[0][1]);
console.log(multi[0][2]);
console.log(multi[1][0]);
console.log(multi[1][1]);
console.log(multi[1][2]);

箭头函数表达式（lambda表达式）

lambda表达式 ()=>{something}或()=>something 相当于js中的函数,它的好处是可以自动将函数中的this附加到上下文中

var shape = {
    name: "rectangle",
    popup: function() {

        console.log('This inside popup(): ' + this.name);

        setTimeout(function() {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 1000);

    }
};

shape.popup();

console.log('=====================');
var shape2 = {
    name: "rectangle",
    popup: function() {
        console.log('This inside popup2(): ' + this.name);

        setTimeout( () => {
            console.log('This inside setTimeout2(): ' + this.name);
            console.log("I'm a2 " + this.name + "!");
        }, 3000);

    }
};

shape2.popup();

tsc

var shape = {
    name: "rectangle",
    popup: function () {
        console.log('This inside popup(): ' + this.name);
        setTimeout(function () {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 1000);
    }
};
shape.popup();
console.log('=====================');
var shape2 = {
    name: "rectangle",
    popup: function () {
        var _this = this;
        console.log('This inside popup2(): ' + this.name);
        setTimeout(function () {
            console.log('This inside setTimeout2(): ' + _this.name);
            console.log("I'm a2 " + _this.name + "!");
        }, 3000);
    }
};
shape2.popup();

Map

let nameSiteMapping = new Map();

// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);

// 获取键对应的值
console.log(nameSiteMapping.get("Runoob"));     // 2

// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false

// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size);                // 3

// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob"));    // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
//nameSiteMapping.clear();             // 清除 Map
console.log(nameSiteMapping);

// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
    console.log(key);
}

// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {
    console.log(value);
}

// 迭代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);
}

// 使用对象解析
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);
}

tsc

var nameSiteMapping = new Map();
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob")); // 2
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao")); // true
console.log(nameSiteMapping.has("Zhihu")); // false
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size); // 3
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob")); // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
//nameSiteMapping.clear();             // 清除 Map
console.log(nameSiteMapping);
// 迭代 Map 中的 key
for (var _i = 0, _a = nameSiteMapping.keys(); _i < _a.length; _i++) {
    var key = _a[_i];
    console.log(key);
}
// 迭代 Map 中的 value
for (var _b = 0, _c = nameSiteMapping.values(); _b < _c.length; _b++) {
    var value = _c[_b];
    console.log(value);
}
// 迭代 Map 中的 key => value
for (var _d = 0, _e = nameSiteMapping.entries(); _d < _e.length; _d++) {
    var entry = _e[_d];
    console.log(entry[0], entry[1]);
}
// 使用对象解析
for (var _f = 0, nameSiteMapping_1 = nameSiteMapping; _f < nameSiteMapping_1.length; _f++) {
    var _g = nameSiteMapping_1[_f], key = _g[0], value = _g[1];
    console.log(key, value);
}

元组

创建元组

var mytuple2 = [10,"Runoob"]; // 创建元组
console.log(mytuple2[0])
console.log(mytuple2[1])

var mytuple = [];
mytuple[0] = 120
mytuple[1] = 234

tsc

var mytuple2 = [10, "Runoob"]; // 创建元组
console.log(mytuple2[0]);
console.log(mytuple2[1]);
var mytuple = [];
mytuple[0] = 120;
mytuple[1] = 234;

解构元组

var a =[10,"Runoob"]
var [b,c] = a
console.log( b )
console.log( c )

tsc

var a = [10, "Runoob"];
var b = a[0], c = a[1];
console.log(b);
console.log(c);