• 保姆级教程分分钟掌握常用TS语法


    十分钟就搞懂TS用法

    先全局安装一些工具,有助于我们编写运行代码哦

    • 1.VScode插件 code runner

    • 2.安装依赖

    npm install typescript ts-node -g
    

    开始编写代码吧~~

    基本类型

    const str:string = 'I am xiaojin, and I love code.'
    const num:number = 1
    const bool:boolean = true
    

    联合类型

    let age:string | number = 1
    

    数组

    const arr:number[] = [1,2,3]
    

    元组

    const tuple:[string, number] = ['xiaojin',1]
    console.log('打印看一下这个元组咯:', tuple)
    
    let n:null = null
    let und:undefined = undefined
    

    枚举-默认值

    enum CHILD {
        AGE,
        NAME,
        SEX
    }
    console.log('看一下枚举类型默认值咯:', CHILD.AGE)
    console.log('看一下枚举类型默认值咯:', CHILD.NAME)
    console.log('看一下枚举类型默认值咯:', CHILD.SEX)
    

    枚举-混合类型

    enum CHILD1 {
        AGE='age',
        NAME='name',
        SEX='sex'
    }
    console.log('看一下枚举类型-混合类型咯:', CHILD1.AGE)
    console.log('看一下枚举类型-混合类型咯:', CHILD1.NAME)
    console.log('看一下枚举类型-混合类型咯:', CHILD1.SEX)
    

    any

    const myAny = ['a',1,[]]
    

    object类型,非原始数据类型

    const myCreate = (obj:object)=>{}
    myCreate({})
    myCreate([])
    myCreate(function(){})
    

    interface 接口 是用来描述对象形状的

    interface IsChild {
        readonly name: string,
        age: number,
        address?: string
    }
    let xiaohong:IsChild = {
        name: 'xiaohong',
        age: 1,
        address: '航海路'
    }
    
    • 接口是可以扩展的哦~~
    interface IsFriend extends IsChild {
        like:string
        [xxx:string]:any // 如果你想搞那种任意类型,可以这么写
    }
    let xiaojin:IsFriend = {
        ...xiaohong,
        like: 'Eat potato',
        other: '写点什么呢'
    }
    

    类型断言

    • 表示这个对象就是这样的一个类型,就态度很强硬那种
    • 就是有的时候你增加了一个但是它就报错了,但是用这个断言它就不会报错了
    let smallChild: IsChild = ({
        name: 'a',
        age: 1,
        address: '地址',
        newKey: '这个是不使用断言就会引起报错的一行代码哦'
    }) as IsChild
    
    
    

    函数

    // 写法1:
    // 函数,我们要关心参数和返回值的类型定义哦
    function test1(a: string, b: string): string {
        return a + b
    }
    test1('xiaojin ', 'love code')
    
    // 写法2:
    // 函数表达式的写法(是它自己推导的哦)
    const test2 = (a: string, b: string): string => a + b
    
    // 写法3:
    // 上面的等同于这个
    const test3: (aa: string, bb: string) => string = (a: string, b: string): string => a + b
    
    // 写法4:
    // 我们还可以这么写
    type testType1 = (aa: string, bb: string) => string
    const test4: testType1 = (a: string, b: string): string => a + b
    
    // 写法5:
    interface testType2 {
        (a: string, b: string): string
    }
    
    • 到底什么时候用type,什么时候使用interface呢?区别是什么呢?
    • interface 可以被继承,可以被类来实现,
    • type仅仅是一个别名,一般在定义联合类型,和临时变量的时候使用
    • 举例如下
    type testType3 = ((aa: string, bb: string) => string) | number
    var test5:testType3 = (a: string, b: string): string => a + b
    test5 = 1
    

    泛型 用传参类型来确定结果类型

    • 为什么要用泛型呢?是因为我们某些时候,代码执行的时候要确定结果类型,否则调用的时候会看不到类型
    • 例如:
     function createArr(len,value){
         let res = []
         for(let i = 0; i < len; i++){
             res.push(value)
        }
         return res
     }
     let arr = createArr(1,'tangdoudou')
     console.log('我们打印出来arr:',arr)  // 我们打印出来arr: ['tangdoudou']
    // 当我们想要写下面的代码,这个时候,我们很清楚这个是字符串,但是无法使用字符串的一些方法,我们就要用到泛型
    // arr[0]. 
    
    // 我们可以这么写
    
    function createArr1<T>(len:Number,value:T):T[]{
        let res = []
        for(let i = 0; i < len; i++){
            res.push(value)
        }
        return res
    }
    let arr1 = createArr1(1,'tangdoudou')
    console.log('我们打印出来arr1:',arr1) // 我们打印出来arr1: [ 'tangdoudou' ]
    console.log('此时就可以使用它的方法了:',arr1[0].length) // 此时就可以使用它的方法了: 10
    
    • 多个泛型 元组的交换 [boolean, number] = [number, boolean]
    • 例如下面这种情况
    const change1 = (tuple:[string, number]):[number,string] => {
        return [tuple[1], tuple[0]]
    }
    const res1 = change1(['1', 2])
    console.log('泛型交换后:',res1) // 泛型交换后: [ 2, '1' ]
    // 假如说,我们想要传入其他类型呢?不一定是数字和字符串怎么办?这个时候就可以这么写
    
    const change2 = <T, K>(tuple:[T, K]):[K,T] => {
        return [tuple[1], tuple[0]]
    }
    const res2 = change2<string, number>(['1', 2])
    console.log('泛型交换后:',res2) // 泛型交换后: [ 2, '1' ]
    

    如果需要运行代码,直接鼠标右键就可以哦

    欢迎大家指出文章需要改正之处~
    学无止境,合作共赢
    在这里插入图片描述

    欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

  • 相关阅读:
    vs2015安装出问题
    Cookie的Domain属性
    IE6 PNG不透明问题 (只解决img标签的图片)
    C#aspx页面前台使用<%=%>无法取到后台的值
    题解【洛谷P2003】平板
    题解【洛谷P2070】刷墙
    题解【洛谷P1083】[NOIP2012]借教室
    CSP-J/S 2019 游记
    题解【洛谷P1967】[NOIP2013]货车运输
    “美登杯”上海市高校大学生程序设计邀请赛 (华东理工大学) E 小花梨的数组 线段树
  • 原文地址:https://www.cnblogs.com/sugartang/p/16322548.html
Copyright © 2020-2023  润新知