项目里使用到的技巧,记录一下,会持续更新。

JS的技巧完全可以使用到TS上哦。

JS

向下取整

Math.floor(4.5); //

简写:

var num = 4.5;
~~num;
num << 0;
num >> 0;
num >>> 0;

四种写法都会返回向下取整后的值,即4。

但是要注意,简写的方式用在负数上会得到错误的结果:

Math.floor(-4.1); // -5
~~-4.1; // -4
-4.1 << 0; // -4
-4.1 >> 0; // -4
-4.1 >>> 0; //

或者说在负数上变成了向上取整,另外由于 >>> 是无符号的位移操作,所以会得到一个巨大的正数。另外一点:没有 <<< 这个操作符哦。

字符串转数字

parseInt("4.5"); //
parseFloat("4.5"); // 4.5
parseInt({a:1}); // NaN

简写:

var num = "4.5";
+num; // 4.5 num = {a:1};
+num; // NaN

转Boolean值

Boolean(5.99); // true
Boolean(0); // false
Boolean(1); // true
Boolean(null); // false
Boolean(undefined); // false
Boolean(""); // false
Boolean("1"); // true
Boolean({}); // true

简写:

!!5.99; // true
!!0; // false
!!1; // true
!!null; // false
!!undefined; // false
!!""; // false
!!"1"; // true
!!{}; // true

void 0

如果编写的代码会直接发布,尽可能用 void 0 代替 null 和 undefined,因为在某些浏览器中,undefined可以被赋值导致判断全部错误。

比如在TS中,编译后,使用到的undefined都会替换为 void 0。

TS

多使用接口方式

比如传递参数时,这么写:

func(a: Point);

只能接受Point类型的变量,如果用下面的写法:

func(a: {x:number, y:number});

就可以接受带有x和y的所有变量,可以更好的复用该函数。

快速得到属性

一般的写法:

let x = point.x;
let y = point.y;

简写:

let {x, y} = point;

一般的写法:

let arr = "100;200;300".split(';');
let a = arr[0];
let b = arr[1];
let c = arr[2];

简写:

let [a, b, c] = "100;200;300".split(';');

快速写入属性

一般的写法:

let a = 0;
let b = "heelo";
let obj = {a: a, b: b};

简写:

let a = 0;
let b = "heelo";
let obj = {a, b};

参数类类型控制

比如我们需要传递一个参数,该参数是MyClass类的类型,而不是实例时,一般只能用any,实际上是可以指定类型的,写法如下:

public func(classType: { new(): MyClass }): void;

传入类型,得到该类型的实例

一般用于工厂或对象池等:

export function getInstance<T>(Class: {new () : T}): T {
return new Class();
}

单例的简写方式

static get instance(): Obj {
return this._instance || (this._instance = new Obj());
}

类属性控制

interface IObj {
// 可选属性
name?: string;
// 只读属性
readonly age: number;
}

控制动态属性:

interface Map<T> {
[key: string]: T;
}

用接口来规范一个对象

比如我们有一个接口,可以用下面的方法来规范一个对象,而不用编写一个实现该接口的类:

 export interface IPoint {
x: number;
y: number;
} export function foo(point: IPoint) {
// ...
} foo(<IPoint> {x: 100, y: 100});

如果打错属性名称或缺少必须的属性会报错,属性类型不匹配也会报错,可以大大降低写错的问题。另外添加额外属性是允许的。

TypeScript和JavaScript的一些小技巧记录的更多相关文章

  1. ( 译、持续更新 ) JavaScript 上分小技巧(三)

    最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...

  2. ( 译、持续更新 ) JavaScript 上分小技巧(四)

    后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...

  3. ( 译、持续更新 ) JavaScript 上分小技巧(二)

    考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) Java ...

  4. ( 译、持续更新 ) JavaScript 上分小技巧(一)

    感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...

  5. 19个JavaScript简化编码小技巧

    这篇文章适合任何一位基于JavaScript开发的开发者.我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基础.希望这些代码能从不同的角度帮助你更好 ...

  6. Javascript字符串拼接小技巧

    在Javascript中经常会遇到字符串的问题,但是如果要拼接的字符串过长就比较麻烦了. 如果是在一行的,可读性差不说,如果要换行的,会直接报错. 在此介绍几种Javascript拼接字符串的技巧. ...

  7. docker的小技巧记录(如果使用了更多会继续添加)

    docker小技巧 复制本地sql脚本到docker容器mysql中进行使用 # 找到容器 docker ps # 复制文件 cp ./xxx.sql container-id:/tmp/ # 进入容 ...

  8. JavaScript的一些小技巧(转)

    本文是一篇翻译文章,原文信息如下: 原文:45 Useful JavaScript Tips, Tricks and Best Practices 作者:Saad Mousliki JavaScrip ...

  9. js_开发小技巧记录(一)

    (一) 生成从minNum到maxNum的随机数 <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

随机推荐

  1. SparkException: Could not find CoarseGrainedScheduler or it has been stopped.

    org.apache.spark.SparkException: Could not find CoarseGrainedScheduler or it has been stopped. at or ...

  2. 牛客练习赛35-背单词-线性DP

    背单词 思路 :dp[ i ]  [ 0 ]表示 第i 位放的元音  dp[ i ]  [ 1 ]表示 第i 位放的辅音 ,cnt [ i ]含义是 长度为 i 的方案数. 转移  :dp[ i ]  ...

  3. visual studio 加入zen-codding

    大家都知道zen codding的强大之处大家都知道了,那如何让visual studio也支持呢,直接下载插件安装即可: 插件下载地址:zen-codding for visual studio下载 ...

  4. pandas 基本操作

    1.     一维数据结构Series a.   概念:Series 是pandas 的一维数据结构,有重要的两个属性 index 和values b.  初始化: 可以通过 python 的 Lis ...

  5. 发布网站配置IIS(把网上找到的解决方法综合了一下)

    1.由于权限不足而无法读取配置文件,无法访问请求的页面(参考网址:http://blog.csdn.net/yinjingjing198808/article/details/7185453) 2.处 ...

  6. BZOJ.5339.[TJOI2018]教科书般的亵渎(拉格朗日插值) & 拉格朗日插值学习笔记

    BZOJ 洛谷 题意的一点说明: \(k\)次方这个\(k\)是固定的,也就是最初需要多少张亵渎,每次不会改变: 因某个怪物死亡引发的亵渎不会计分. 不难发现当前所需的张数是空格数+1,即\(m+1\ ...

  7. 使用 TestNG 测试的时候事务总是roll back的解决办法

    为要测试方法加上 @Rollback(false) 注解

  8. BZOJ4095 : [Usaco2013 Dec]The Bessie Shuffle

    首先将排列和整个序列以及询问都反过来,问题变成给定一个位置$x$,问它经过若干轮置换后会到达哪个位置. 每次置换之后窗口都会往右滑动一个,因此其实真实置换是$p[i]-1$. 对于每个询问,求出轮数, ...

  9. JS_高程3.基本概念(1)

    1.语法 (1)ECMAScript中的一切(变量,函数名和操作符)都是区分大小写的. (2)标识符 标识符的第一个字符必须是字母,下划线或是美元符号. 其他字符可以是字母,下划线,美元符号和数字. ...

  10. JS冲刺

    1.简单/复杂数据类型1)基本数据类型把数据名和值直接存储在栈当中复杂数据类型在栈中存储数据名和一个堆的地址,在堆中存储属性及值,访问时先从栈中获取地址,再到堆中拿出相应的值简单数据类型:number ...