Juqery/Jquery-ui/ES6/TypeScript语法相关笔记

最新推荐文章于 2022-12-16 11:20:49 发布

转载最新推荐文章于 2022-12-16 11:20:49 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/linqing/p/8521000.html

本文介绍JavaScript模板字符串、扩展运算符等新特性，并解决Vue+TypeScript开发中遇到的问题，如语法错误和类型调用签名缺失。

Q.javascript 模版字符串新语法糖：

跟C#的新字符串语法糖类似.

let testobj = {str : 'hello world.'};
let str = `$hi, ${testobj.str} `;
console.log(str);

Q.javascript(js)的三个点(...)运算符：

1.spread运算:

　　语法糖，可快速向数组添加数组:

let arr = [{id :'a'},{id :'b'},{id :'c'}];  
let arr1 = [{id :'d'},{id :'e'},{id :'f'}];
/**
* arr新的数据为：[{"id":"a"},{"id":"b"},{"id":"c"},{"id":"d"},{"id":"e"},{"id":"f"}]；
**/

2.可变函数参数,rest运算:

　　函数参数动态化：

　　跟c++的(...)和C#的params object[]一样的东西.都是用于可变参数(C++还可以用于可变模板类型数)：

function test(...aaa){console.log(aaa);}
test('a',12312,{id :1231});
///aaa的数据结构为：["a", 12312, {id:1231}]

3.JavaScript深拷贝:

　　以前做深拷贝要么用JSON.stringify和JSON.parse，要么自己扩展clone函数遍历属性

　　现在可以用ES6的(...)语法，实现深拷贝：

let t = {id: 1};
let t1 = {...t};
t.id = 10000;

console.log('t:', t,'t1:' t1);
/**
* t = {id:10000};t1 = {id:1};   
*/

Q.Vue下的TypeScript 编程报无法调用类型缺少调用签名的表达式。类型“VueRouter”没有兼容的调用签名。(TS2349)：

如vue-Router

declare interface Vue {
$router: (options?: any) => VueRouter
}

Q.Vue下的TypeScript 编程报 Syntax Error: Unexpected token：

通常是引用脚本是没注意.

需要指定lang="ts"才行例如：

Q.TypeScript的Jquery和JqueryUI：

虽然有

@types/Jquery

@types/jqueryui

这俩个包，但是还是觉得直接引用脚本比较方便。

以Vue+TypeScript为例。

在Vue-Cli脚手架下的

首先，在Index.html 里添加

    <!-- jquery ui -->
    <link rel="stylesheet" href="./static/lib/JqueryUI/jquery-ui.min.css">
    <script src="./static/lib/JqueryUI/jquery-2.2.4.min.js"></script>
    <script src="./static/lib/JqueryUI/jquery-ui.min.js"></script>
    <!-- jquery ui -->

然后，需要用到的Ts或gobal.d.ts文件里添加以下代码（其他全局对象同理如Moment.js）：