美文网首页
学习 typescript 基础语法

学习 typescript 基础语法

作者: 阿畅_ | 来源:发表于2019-12-13 18:55 被阅读0次

    typescript

    • 安装 npm install -g typescript

    编译

    • tsc 文件名

    TypeScript 的原始数据类型

    • string,number ,Boolean ,null,undefined,enum ,symbol

    • null,undefined 是其它类型的子类型,其它类型可以赋值为这两个类型

    • void 无返回值的意思

    任意值 any 可以赋值为任意类型

    • 不给变量指定类型,就会被认为是任意类型,跟原生 js 一样

    当给一个变量赋初始值的时候,它会根据你的值判断你的类型

    • 没有赋值就是任意类型,赋值会类型推导

    联合类型

    var b:string | number = 1

    • 只能访问此联合类型的 共有方法

    对象类型

    interface Istate {
    name: string
    }

    • 只能强约束对象的属性值和属性个数

    如果其中一个类型 可有可无 ?

    interface Istate {
    name: string, // 也可以 string | number
    age?: number
    }

    属性个数不确定

    interface Istate {
    name: string,
    [propName: string]: any
    }

    • any 是必须的

    只读属性

    interface Istate2 {
    name: string,
    readonly age: number
    }

    var obj2:Istate2 = { name: '11', age: 1 }
    obj2 = { name: '1243', age: 23 }
    obj2.age = 1 // 错误

    数组

    • 类型加 [] 表示法
      var ary:number []= [1,2,3]
      var ary2:any [] = [1,2,'3']

    • 数组泛型 Array<数组类型>
      var aryType:Array<Number> = [1,2,3]

    • 接口表示法 可以和对象类型 混用

    interface IArr {
    [index: number]: Istate2
    }
    var interAry:IArr = [{ name: 'hhh', age: 1 }]

    var arrType2: Array<Istate2> = [{ name: 'hhh', age: 1 }]
    var arrType3:Istate2 [] = [{ name: 'hhh', age: 1 }]

    函数类型

    function fun1(name: string, age:number) {
    return age
    }

    fun1('123',123)
    const ages:number = fun1('dsf', 123)

    • 可有可无
      function fun2(name: string, age:number, sex?:string) {
      return age
      }

    • 默认值
      function fun3(name: string = 'type', age:number, sex?:string) {
      return age
      }

    表达式的方式

    var funa = function(name:string, age:number = 20):number { // number 返回类型
    return age
    }

    • 变量的类型 约束 + 返回值的类型
      var funa2:(name: string, age: number) => number = function(name: string, age: number) {
      return age
      }

    • interface 的方式
      interface funType3 {
      (name: string, age: number): number
      }

    var funa3:funType3 = function(name: string, age: number):number {
    return age
    }

    • 重载的方式 定义输入类型和返回类型相同 ,输入是什么类型,返回值是什么类型
      // 输入是 number,输出也是 number
      function getValue(value: number):number;
      function getValue(value: string):string;
      function getValue(value:string|number):number|string {
      return value
      }
      var res1:number = getValue(1)
      var res2:string = getValue('2')

    类型断言

    • 因为只能返回两个参数共有方法,如果不想用共同方法,可以使用类型断言
      function getAssert(name: string | number) {
      // return (<string>name).length

      return (name as string).length
      }
    • 但在 tsx 中只能是使用 return (name as string).length <> 会导致 tsx 解析错误

    ts 中声明文件 ,引入第三方包

    • 例如使用 jQuery
      • 声明 declare var $:(selector:string)=> any
      • 引入 /// <reference path="...ts"/>
        declare var $:(selector:string)=> any

    js 类型别名 type

    type str = string
    var str5:str = "1"

    type muchType = string | number | boolean
    var str6 = false

    • 接口类型
      interface muchType2 {
      name: string,
      str: number
      }

    interface muchType3 {
    name: string,
    age: number
    }

    type muchType4 = muchType2 | muchType3

    • 限定字符串
      // 限定字符串
      type myStr = '我' | '你'

    function getSelf(self: myStr) {

    }

    getSelf('我')

    枚举类型

    • 枚举
      enum nums {
      'one',
      'two',
      'three',
      'four',
      'five'
      }

    nums[1] == 'two' // true
    mums.two

    类 class

    class Person {
    private name = 'hello'
    age = 20
    protected sex = '女'
    speak() {
    console.log('我是' + this.name + '我多大了?' + this.age)
    }
    }

    var p = new Person()
    p.speak()

    console.log(p.name) // ❌
    console.log(p.age)
    console.log(p.sex) // ❌

    • public 是共有属性,都可以访问
    • private 是私有属性,只有内部可以调用
    • protected 受保护的属性,允许子类访问

    class Child extends Person {

    callPerent() {
    console.log(super.age)
    console.log(super.sex)
    }
    }

    泛型

    function resArray<T>(length: number, value:T):Array<T> {
    let ary = []
    for (let i = 0; i < length; i++) {
    ary[i] = value
    }
    return ary
    }

    resArray(3, '1') // 如果不定义类型,就会自动类型推导
    resArray<String>(1, '1') // 可以传递类型
    var arrVal: string [] = resArray(2, '1')

    • interface 使用泛型

    interface FXFun {
    <T>(name:string, value: T): Array<T>
    }

    var func5: FXFun

    func5 = function<T>(name: string, value: T): T [] {
    return []
    }

    相关文章

      网友评论

          本文标题:学习 typescript 基础语法

          本文链接:https://www.haomeiwen.com/subject/lhrxyqtx.html