• typescript


    1. typescript 含义

    TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集...

    就是 js 的扩展,融入了大量 es6 的语法,文件后缀为 .ts  ,可通过安装 typescript (npm install -g typescript ) ,运行  tsc hello (js 文件名) 生成对应 js 文档 ,或者在线编译

    2.细节点

    2.1 多行字符串   ``

    const str = `ss
    asa`;
     
    2.2 字符串模板   `${name}`  `${get()}`
    var str2=`eee${str}`
     
    2.3  自动拆分字符串
    function get(tmp,name,age){...} 
    get `saa${name}ssasa`
     
    2.4  类型  / 自动推断类型
    var name:string='wj'     ( number  boolean )
    var name='wj'
     
    2.5 任意类型
    var name:any='wj'
     
    2.6  函数传参 及返回值限制
    function test(name:string):void{ return '' }
     
    2.7  自定义类型
    class Person{name:string,age:number}

    var zhang:Person= new Person ();
    zhang.name=''

    2.8  省略参数   ...arg    es6扩展运算符 三个点

    定义:扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中

    基本用法:省略

    function a(...arg){ arg.forEach(val){ console.log(val) } }

    将一个数组,变为参数序列

    function push(array, ...items) {  
    array.push(...items);  
    }  
    function add(x, y) {  
    return x + y;  
    }  
    var numbers = [4, 38];  
    add(...numbers) // 42
    View Code

    替代数组的 apply 方法

    // ES5 的写法  
    function f(x, y, z) {  
    // ...  
    }  
    var args = [0, 1, 2];  
    f.apply(null, args);  
    // ES6 的写法  
    function f(x, y, z) {  
    // ...  
    }  
    var args = [0, 1, 2];  
    f(...args);
    View Code

    应用Math.max方法

    // ES5 的写法  
    Math.max.apply(null, [14, 3, 77])  
    // ES6 的写法  
    Math.max(...[14, 3, 77])  
    //  等同于  
    Math.max(14, 3, 77);
    View Code

    push数组

    // ES5 的写法  
    var arr1 = [0, 1, 2];  
    var arr2 = [3, 4, 5];  
    Array.prototype.push.apply(arr1, arr2);  
    // ES6 的写法  
    var arr1 = [0, 1, 2];  
    var arr2 = [3, 4, 5];  
    arr1.push(...arr2);  
    View Code

    合并数组

    // ES5  
    [1, 2].concat(more)  
    // ES6  
    [1, 2, ...more]  
    var arr1 = ['a', 'b'];  
    var arr2 = ['c'];  
    var arr3 = ['d', 'e'];  
    // ES5 的合并数组  
    arr1.concat(arr2, arr3);  
    // [ 'a', 'b', 'c', 'd', 'e' ]  
    // ES6 的合并数组  
    [...arr1, ...arr2, ...arr3]  
    // [ 'a', 'b', 'c', 'd', 'e' ]
    View Code

    与解构赋值结合

    // ES5  
    a = list[0], rest = list.slice(1)  
    // ES6  
    [a, ...rest] = list  
    下面是另外一些例子。  
    const [first, ...rest] = [1, 2, 3, 4, 5];  
    first // 1  
    rest // [2, 3, 4, 5]  
    const [first, ...rest] = [];  
    first // undefined  
    rest // []:  
    const [first, ...rest] = ["foo"];  
    first // "foo"  
    rest // []
    View Code

    将字符串转为真正的数组

    [...'hello']  
    // [ "h", "e", "l", "l", "o" ] 
    类数组转为真数组
    [...arguments] // 替换es5中的Array.prototype.slice.call(arguments)写法

    对象扩展运算符

    let bar = { a: 1, b: 2 };
    let baz = { ...bar }; // { a: 1, b: 2 }

    等价于

    let bar = { a: 1, b: 2 };
    let baz = Object.assign({}, bar); // { a: 1, b: 2 }    //Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。(如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性)。

    常见用法:修改对象的部分属性

    let bar = {a: 1, b: 2};

    let baz = {...bar, ...{a:2, b: 4}}; // {a: 2, b: 4}

    2.9 参数默认值  末尾值(默认)

    function a(name,age:20,...arg){ arg.forEach(val){ console.log(val) } }

    2.10 可选参数 必须位于必选参数后面   b?:string
     
    2.11 generator 函数

    function* dosomething(){
    console.log('start');
    yield '100'
    console.log('end');
    }

    var func1=dosomething();
    func1.next()
    ...
    func1.next()

    2.12 析构表达式

    对象析构表达式
    变量取用、起别名 、多层变量 二次析构

    getStock(){

      return {

      code:'10010',

      price:{

      priceEnd:'$100'

    }

           str:''  //  无关代码

           ...

    }

    var {code:codex,price:{priceEnd}}=getStock()       //  codex  变量表示将取出来的code重命名

    2.13 数组析构表达式

    var arr=[1,2,3,4]
    var [arr1,arr2]=arr;     // arr1  1    arr2   2
    var [arr1,,,arr2]=arr;   / arr1  1    arr2   4
    var [arr1,arr2,...oth]=arr;    / arr1  1    arr2   2     oth  [3,4]

    2.14 箭头表达式

    var sum = (arg1,arg2) => arg1+arg2
    var sum = (arg1,arg2) => {
    return arg1+arg2
    }
    var sum = arg1=> arg1
    var sum = ()=> {}

    arr.filter(val => val % 2 === 0 )      //  [2,4]

    2.15 箭头函数 - 保持 this 定义指向

    setTimeout ...

    2.16  forEach  for in    for of

    var arr=[1,2,3]
    forEach 自定义属性循环不出来 可以  break continue return 中断
    for in 自定义属性可以循环出来 可以  break continue return 中断    ( 循环中 i 代表属性,自定义属性可遍历出来 )
    for of 定义属性循环不出来 可以  break continue return 中断     ( 循环中 i 代表索引,自定义属性不可遍历出来 )

    2.17  类

    继承 extends privite
    泛型 只能放一类
    var workers:Array<Person> = []
    workers[0]=new Person('wj');
    workers[1]=new Employee('wj','29');
    workers[2]=2    //err

    2.18  接口  interface

    interface IPerson {
    name:string,
    age:number
    }
    class Person{
    constructor (public config:IPerson){}
    }

    2.19 接口的实现  implements

    interface Animal{
    eat()
    }
    class Sheep implements Animal{
    eat(){
    ...
    }
    }

    2.20  模块  import  export

    第三方常用文件   *.d.ts

    3.相关文档

    在线编译网站

    typescript

    babel

    安装第三方 *.d.ts 文件

    typings

    DefinitelyTyped 

  • 相关阅读:
    发球
    Java学习笔记
    驼峰式命名法
    公式编辑测试
    Python3.5 在Ubuntu16.04上无法画图的解决方案
    Ubuntu16.04 安装flash player
    Spring切面通知执行的顺序(Advice Order)
    修改别人写的利用AOP实现日志监控的问题
    传感器系列之4.10 酒精传感器
    传感器系列之4.8光敏传感器
  • 原文地址:https://www.cnblogs.com/justSmile2/p/11110884.html
Copyright © 2020-2023  润新知