夏天夏 夏天夏
首页
  • 技术分享

    • 小白都能看懂的闭包
    • 关于后台管理应用
    • 关于技术的取舍
    • 前端工程化
    • 切换node版本
    • 如何优雅的写事件代理
    • 我所不了解的技术
    • 我喜欢的parcel
    • angular1使用
    • npm script打造前端工作流
  • 发布一个node插件

    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • 年终总结

    • 2019年总结
    • 2020年总结
    • 2021年总结
  • JavaScript
  • CSS
  • 框架
  • Node
  • 服务
  • web3
  • 其他
我的作品
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夏天夏

我也不饶岁月
首页
  • 技术分享

    • 小白都能看懂的闭包
    • 关于后台管理应用
    • 关于技术的取舍
    • 前端工程化
    • 切换node版本
    • 如何优雅的写事件代理
    • 我所不了解的技术
    • 我喜欢的parcel
    • angular1使用
    • npm script打造前端工作流
  • 发布一个node插件

    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • 年终总结

    • 2019年总结
    • 2020年总结
    • 2021年总结
  • JavaScript
  • CSS
  • 框架
  • Node
  • 服务
  • web3
  • 其他
我的作品
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • JavaScript

    • JavaScript
    • 虚拟DOM
    • DOM和事件
    • ES6
    • 数组操作
    • JavaScript的深浅拷贝
    • JavaScript的执行
    • JavaScript对象
    • JavaScript类型
    • JS概念
    • js设计模式
    • js深入浅出
    • Promise
    • this的指向
    • typescript
    • CSS

    • 框架

    • Node

    • 服务

    • 其他

    • 设计模式

    • web3

    • react

    • 学习笔记
    • JavaScript
    夏天夏
    2022-05-15
    目录

    typescript

    # 安装

    • npm install typescript@2.9.2 -g ————安装ts
    • npm install ts-node@7.0.0 -g ————让nodejs支持ts

    # 类型

    • 参数类型
      • 在参数名称后面后面使用冒号来指定参数的类型
    • 默认参数
      • 在参数声明后面用等号来指定参数的默认值
    • 可选参数
      • 在方法的参数声明后面用问号来标明此参数为可选参数
    参数类型
    var a:any //任何类型
    var b:number //数字类型
    var c:boolean // 布尔类型
    function test():void{} //不能用任何返回值
    
    在哪声明类型
    var a:string //在变量中声明类型
    function a():string //在方法(函数)中声明返回值类型
    function a(name:string) 在参数中声明类型 调用的时候用a("字符串调用")
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    默认参数
    function test(a:string, b, c:string="asd") { //默认参数一定要放在最后面
        console.log(a)
        console.log(b)
        console.log(c)
    }
    test('aaa', 'bbb', 'ccc')
    test('aaa', 'bbb')
    
    1
    2
    3
    4
    5
    6
    7
    8
    可选参数
    function test(a:string, b?:string, c:string="asd") { //可选参数一定要放在最后面
        console.log(a)
        console.log(b)
        console.log(c)
    }
    test('aaa')
    
    1
    2
    3
    4
    5
    6
    7
    • # 推断机制

    var a=123 // 第一次推断a为数字类型
    a='abc' //错误,
    
    1
    2

    # 类型转换

    //数值转字符串
    let num: number = 123123
    let str: string = num.toString()
    console.log(typeof str, str)
    //字符串转数值
    let str2: string = '123321'
    let num2: number = parseInt(str2)
    console.log(typeof num2, num2)
    // 对象转字符串
    let obj:object={'name':'jey','age':'16','id':13212}
    let str3:string=JSON.stringify(obj)
    console.log(typeof str,str3)
    // 字符串转对象
    var obj2:object=JSON.parse(str3)
    console.log(typeof obj2,obj2)
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    # 函数新特性

    • # Rest and Spread 操作符 (...args)

      • 用来声明任意数量的方法参数
      • 主要用于:把任意长度的数组转化成一个固定数量参数方法的调用
    function test(...arg) {
        console.log(arg)
    }
    test(1,2,3)
    
    1
    2
    3
    4
    • # generator 函数

      • 控制函数的执行过程,手工暂停和恢复代码执行
      • 使用.next()方法调用执行下一个yield
      • 每个.next()将执行函数内部yield断点
    function* doSomething() {
        console.log('start')
        yield
        console.log('finish')
    }
    var func1 = doSomething()
    
    document.querySelector('html').onclick = function () {
        func1.next()
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    • # destructuring 析构表达式

      • 通过表达式将对象或数组拆解成任意数量的变量
    把对象里的值才出来放到本地变量里
    function test(){
        return {
            a: 111,
            b: 'abc',
            c: {
                c1: 'c1c1c1',
                c2: 'c2c2c2'
            }
        }
    }
    var { a, b, c: { c2 } } = test()
    console.log(a,b,c2)
    
    把数组里的值拆分成变量放到本地
    var arr = [1, 2, 3, 4, 5, 6, 7]
    var [num1, ,num2, ...other] = arr
    console.log(num1,num2,other)
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    # 表达式和循环

    • # 箭头函数

      • 用来声明匿名函数,消除传统匿名函数的this指针问题
    var sum = (arg1, arg2) => arg1 + arg2 //方法里面只有一行是不用写大括号和return关键字
    var sum= arg1 => console.log(arg1) //只有一个参数的话不需要括号
    var sum= () => console.log('没有尝试不') //不需要参数用()表示
    
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    console.log(arr.filter(value=>value%2==0)) //最常见的用法
    
    1
    2
    3
    4
    5
    6
    • # for of

    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9,'test']
    arr.attribute = '我是属性'
    for (var n of arr) {
        if (n>3) break //与for in区别在于循环可以中断
        console.log(n)
    }
    
    
    还可以用在字符串上
    for (n of '你好呀,jey') {
        console.log(n)
    }
    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    # 面向对象

    • # 控制符

      • public 公有(默认)
      • private 私有,只能在类的内部访问
      • protectes 受保护,可以在类的内部和子类访问
    • # 接口————interface //低配版的类,这是做一个约束

    • # 声明类的静态属性————static

    • # 类

      • 把类当做接口使用,类是高配版的接口
    • # constructor方法

      • 只有new实例化的时候类里面的constructor方法才会被调用,没实例化一次则调用一次
      • 子类构造函数必须调用父类构造函数,用super来调用
      • 可以在参数加public声明属性,用this调用
    class person{
        constructor(public name) { } //可以这样写声明一个name属性
        say() { console.log(this.name) }
    }
    var a=new person('jey')
    
    1
    2
    3
    4
    5
    • # 继承extends

      • 要求:继承一个类的时候必须在constructor方法里面加super()

    # 模块

    export 暴露属性,方法,类 import 引入属性,方法,类

    编辑 (opens new window)
    #typescript
    上次更新: 2022/05/24, 23:27:54
    this的指向
    css

    ← this的指向 css→

    最近更新
    01
    远程办公的个人思考
    02-21
    02
    SEO
    01-02
    03
    NFT的价值
    12-27
    更多文章>
    Theme by Vdoing | Copyright © 2019-2025 夏天夏 | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式