一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    ts学习记录

    技术 109 2021-07-20 17:16

    首先是一些ts的介绍:

    js胖哥的介绍很清楚,包括本文也是根据胖哥的ts教程来做的一些相关记录,内容如下:

    TypeScript是什么?

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

    TypeScript 在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程。

    其实TypeScript就是相当于JavaScript的增强版,但是最后运行时还要编译成JavaScript。

    TypeScript最大的目的是让程序员更具创造性,提高生产力,它将极大增强JavaScript编写应用的开发和调试环节,

    让JavaScript能够方便用于编写大型应用和进行多人协作。

    TypeScript和JavaScript的对比

    TypeScript 与JavaScript两者的特性对比,主要表现为以下几点:


    • TypeScript是一个应用程序级的JavaScript开发语言。(这也表示TypeScript比较牛逼,可以开发大型应用,或者说更适合开发大型应用)
    • TypeScript是JavaScript的超集,可以编译成纯JavaScript。这个和我们CSS离的Less或者Sass是很像的,我们用更好的代码编写方式来进行编写,最后还是有好生成原生的JavaScript语言。
    • TypeScript跨浏览器、跨操作系统、跨主机、且开源。由于最后他编译成了JavaScript所以只要能运行JS的地方,都可以运行我们写的程序,设置在node.js里。
    • TypeScript始于JavaScript,终于JavaScript。遵循JavaScript的语法和语义,所以对于我们前端从业者来说,学习前来得心应手,并没有太大的难度。
    • TypeScript可以重用JavaScript代码,调用流行的JavaScript库。
    • TypeScript提供了类、模块和接口,更易于构建组件和维护。


    TypeScript的开发环境安装:

    1.全局安装 typeScript

    \$npm install typescript -g

    在执行执行需要先编译成 js,然后再执行。不然报错


    2.安装自动编译工具

    \$npm install -g ts-node

    eg: ts-node index.ts

    1.定义静态类型 const xxx:type = value

    let count: number = 123.111111;
    console.log(count.toFixed(2));
    

     定义了静态类型后 直接使用count. 的类型方法 vsCode提供的方法

    定义了静态变量 后面的值的类型不能修改、、

    报错
    count = "jspang";
    

    2.interface:接口 用来声明一些变量的自定义类型

    interface XiaoJieJie {
      uname: string;
      age: number;
    }
    
    const xiaohong: XiaoJieJie = {
      uname: "小红",
      age: 18,
    };
    

    同样的,自定义了变量的类型,在赋值过程中也要符合类型

    如果使用了静态类型,不仅意味着变量的类型不可以改变,

    还意味着类型的属性和方法也跟着确定了。

    这个特点就大大提高了程序的健壮性,并且编辑器这时候也会给你很好的语法提示,加快了你的开发效率。

     3.静态基础类型和对象类型

     静态基础类型:

    const count2: number = 918;
    const myName: string = "bill";
    

    对象类型

    const xiaoJieJie: {
      name: string;
      age: number;
    } = {
      name: "大脚",
      age: 18,
    };
    // console.log(xiaoJieJie.name);
    
    // 数组类型 并指定数组内值的类型为string
    const xiaoJieJies: String[] = ["谢大脚", "刘英", "小红"];
    
    // console.log(xiaoJieJies[0]);
    
    // 定义类型 为一个class类
    class Person {}
    const dajiao: Person = new Person();
    
    // 定义类型 为一个function 并规定返回类型
    const funcType: () => String = () => {
      return "funcType return String ~";
    };
    
    // console.log(funcType());
    

     那我们现在总结一下对象类型可以有几种形式:

     对象类型

     数组类型

     类类型

     函数类型

    4.类型注解

    et count3: number = 1;
    // 这段代码就是类型注解,意思是显示的告诉代码,我们的count3变量就是一个数字类型,这就叫做类型注解
    
    // 先来看一个不用写类型注解的例子:
    const one = 1;
    const two = 2;
    const three = one + two;
    
    // 再来看一个用写类型注解的例子:
    function getTotal(one: number, two: number) {
      return one + two;
    }
    
    // total这个变量不需要加类型注解,因为当one和two两个变量加上注解后,TypeScript 就可以自动通过类型推断,分析出变量的类型。
    // const total = getTotal(1, 2);
    
    // console.log(total);
    
    

    5.函数参数的返回类型 定义

    const funcType2: (a: number, b: number) => number = (a, b) => {
      return a + b;
    };
    // console.log(funcType2(1, 2));
    

    void:函数无返回值时的定义,void 代表没有任何返回值

    function sayHello(): void {

      console.log("hello world");

    }

     never:如果一个函数是永远也执行不完的,

    // 就可以定义返回值为never,那什么样的函数是永远也执行不完的那?
    // 我们先来写一个这样的函数(比如执行执行的时候,
    // 抛出了异常,这时候就无法执行完了)。
    function errorFuntion(): never {
      throw new Error();
      console.log("Hello World");
    }
    

     还有一种是一直循环,也是我们常说的死循环,这样也运行不完,比如下面的代码:

    function forNever(): never {
      while (true) {}
      console.log("Hello JSPang");
    }
    

     函数参数为解构时,然后写类型注解

    function add({ one, two }: { one: number; two: number }): number {
      return one + two;
    }
    
    const sum = add({ one: 1, two: 2 });
    
    // 第二种写法
    const sum2: ({ one, two }: { one: number; two: number }) => number = ({
      one,
      two,
    }) => {
      return one + two;
    };
    // console.log(sum2({ one: 11, two: 22 }));
    

     函数参数为obj时

    function getString2({ a }: { a: string }) {
      return a;
    }
    
    const str = getString2({
      a: "123",
    });
    
    console.log(str);
    
    // 函数实现重复 ts报错 是因为:编译器会把同一个文件夹中的同名变量进行警告,仅此
    

    5.数组类型注解的方法

    const Numer: number[] = [1, 2, 3, 4, 5];
    const Sta: string[] = ["1", "2", "3", "4", "5"];
    const undefinedArr: undefined[] = [undefined, undefined, undefined];
    const moreArr: (string | number)[] = [1, 2, 3, 4, 5, "sdsddsd", "dsdsd"];
    const anyArr: any[] = [
      1,
      2,
      3,
      45,
      "dsdsds",
      null,
      undefined,
      {},
      [],
      new Date(),
    ];
    
    // 注解数组里面的对象
    const arrObj: {
      name: string;
      age: string;
    }[] = [
      {
        name: "bill",
        age: "18",
      },
    ];
    // 可以试用type或者interface来进行简化(别名简化),就是把一些繁琐的类型注解拆分出来
    // type:
    type MyInfo = {
      name: string;
      age: number;
    };
    
    //拆出来之后 MyInfo就可以直接用了
    const arrObj2: MyInfo[] = [
      {
        name: "bill",
        age: 18,
      },
    ];
    
    // interface
    interface MyInfo2 {
      name: string;
      age: number;
    }
    
    const arrObj3: MyInfo2[] = [
      {
        name: "bill",
        age: 18,
      },
    ];
    

    6.元组的使用和类型约束

    场景:类型注解定义了一个 值可以为number或string的数组。

    const arr: (number | string)[] = ["bill", 18, "man"];
    

    假如我们通过这个arr 去取值渲染页面:姓名-年龄-性别

    如果我们把源数据的循序改了,就会直接导致程序错误。

    元组的出现就是为了解决此类的问题。

    (胖哥的解释是这样的,但是我不太苟同,哪有取arr下标取固定值的呢,最好的还是用obj的key来取值,就不用关心这个顺序的问题了)

    下面是元组的写法:

    const arr2: [string, string, number] = ["1", "2", 3];
    

    这样写就是每个索引的值的类型定死了,但是如果有数组长度9999..那岂不是要定义9999个元组类型,所以这个不常见也不常用,只在一些特殊场景下,可能用得到

    特殊的场景比如csv 返回的格式为,就可以用元组了

    // "dajiao", "teacher", 28;
    // "liuying", "teacher", 18;
    // "cuihua", "teacher", 25;
    const arr3: [string, string, number][] = [
      ["dajiao", "teacher", 28],
      ["liuying", "teacher", 18],
      ["cuihua", "teacher", 25],
    ];
    

     7.interface 和type

    interface和type的作用主要是用于声明一个公用的类型注解,减少一些代码重复使用

    // 举例:写一个方法
    // 定义我们的类型注解,用type和interface两种方法
    type eatType1 = {
      time: number;
      name: string;
      // 添加有或者没有都可以的属性 属性名后面加一个?即可
      mood?: string;
      // 定于任意类型
      //  [propname: string]: any;propname为一个变量的占位符, key为string类型,value为任意类型
      [propname: string]: any;
    };
    
    interface eatType2 {
      time: number;
      name: string;
      mood?: string;
      [propname: string]: any;
    }
    
    // 使用interface来实现继承和在注解中,声明方法和方法的返回类型
    interface eatType3 extends eatType1 {
      say(): string;
    }
    
    // 定于传递的参数也为obj类型 为了好去做对应,
    const eatArgument = {
      time: 9,
      name: "bill",
      mood: "很饿很饿很饿!",
      six: "男",
      say: () => {
        return "吃完这顿,我就减肥";
      },
    };
    
    const eat = (eatArgument: eatType3) => {
      // 早餐
      if (eatArgument.time < 10) {
        return `${eatArgument.name},要吃早餐了,心情:${
          eatArgument.mood || "无"
        },性别:${eatArgument.six || "未提供"},并说:${eatArgument.say()}`;
    
        // 午餐
      } else if (eatArgument.time < 13) {
        return `${eatArgument.name},要吃午餐了,心情:${
          eatArgument.mood || "无"
        },性别:${eatArgument.six || "未提供"},并说:${eatArgument.say()}`;
        // 晚餐
      } else if (eatArgument.time < 19) {
        if (eatArgument.name === "美玉") {
          return `${eatArgument.name},要吃晚餐了,心情:${
            eatArgument.mood || "无"
          },性别:${eatArgument.six || "未提供"},并说:${eatArgument.say()}`;
        } else {
          return `${eatArgument.name},不减肥了?还想吃晚餐?,心情:${
            eatArgument.mood || "无"
          },性别:${eatArgument.six || "未提供"},并说:${eatArgument.say()}`;
        }
    
        // 加餐
      } else {
        if (eatArgument.name === "美玉") {
          return `${eatArgument.name},晚上要加餐了,心情:${
            eatArgument.mood || "无"
          },性别:${eatArgument.six || "未提供"},并说:${eatArgument.say()}`;
        } else {
          return `${eatArgument.name},你疯了,竟然还想加餐?,心情:${
            eatArgument.mood || "无"
          },性别:${eatArgument.six || "未提供"},并说:${eatArgument.say()}`;
        }
      }
    };
    console.log(eat(eatArgument));
    

    还没学完..未完..待更新..

    胖哥的ts博客教程地址:https://www.jspang.com/detailed?id=63#toc34

    上一篇:html展示pdf文件

    下一篇:h5引用vue

    文章评论

    评论列表(0