zoukankan      html  css  js  c++  java
  • TypeScript学习2TypeScript基础静态类型和对象类型

    在 TypeScript 静态类型分为两种,一种是基础静态类型,一种是对象类型。

    基础静态类型

    基础静态类型非常简单,只要再声明的变量后加一共 : 号,然后加上对应的类型,例如:

    const count: number = 666;
    const name: string = 'hello'

    类似这样常用的基础类型还有 null,undefinde,symbol,booleanvoid 这些都是最常用的基础数据类型;

    对象类型

    对象类型有以下几种形式,这几种形式我们在TypeScript里叫做对象类型。

    • 对象类型
    • 数组类型
    • 类类型
    • 函数类型
    // 对象类型
    const teacher: {
      name: string,
      age: number
    } = {
      name: 'heyujie',
      age: 18
    }
    console.log(teacher.name)
    
    // 数组类型
    const arrStr: String[] = ["小红", "小结", 'test'];
    console.log(arrStr)
    // 类类型
    class Person { }
    const dajiao: Person = new Person();
    
    // 函数类型 getName 是一个函数,这个函数返回值是一个string
    const getName: () => string = () => {
      return "大脚";
    };
    console.log(getName())
    View Code

    type annotation 类型注解

    例如以下代码就是类型注解,意思是显示的告诉代码,我们的count变量就是一个数字类型,这就叫做类型注解

    let count: number;
    count = 123;

    type annotation 类型推断

    let count = 123;

    这时候我并没有显示的告诉你变量count是一个数字类型,但是如果你把鼠标放到变量上时,你会发现 TypeScript 自动把变量注释为了number(数字)类型,也就是说它是有某种推断能力的,通过你的代码 TS 会自动的去尝试分析变量的类型

    工作中使用问题(潜规则)

    • 如果 TS 能够自动分析变量类型, 我们就什么也不需要做了
    • 如果 TS 无法分析变量类型的话, 我们就需要使用类型注

    先来看一个不用写类型注解的例子:

    const num1 = 1;
    const num2 = 2;
    const num3 = num1 + num2;

    再来看一个用写类型注解的例子:

    function getTotal(num1, num2) {
      return num1 + num2;
    }
    const total = getTotal(1, 2);

    这种形式,就需要用到类型注释了,因为这里的num1num2会显示为any类型

     所以你必须加一个类型注解,把上面的代码写成下面的样子:

    function getTotal(num1: number, num2: number) {
      return num1 + num2;
    }
    const total = getTotal(1, 2);

    这里有的一个问题是,为什么total这个变量不需要加类型注解,因为当num1num2两个变量加上注解后,TypeScript 就可以自动通过类型推断,分析出变量的类型。

    在写 TypeScript 代码的一个重要宗旨就是每个变量,每个对象的属性类型都应该是固定的,如果你推断就让它推断,推断不出来的时候你要进行注释。

  • 相关阅读:
    android 拖放功能
    android 桌面文件夹ui美化
    instanceof 杂谈
    Android自定义长按事件
    launcher in android
    类似网易163TAB选项卡(标签)代码
    【新手入门教程】简洁纯CSS下拉导航菜单代码
    橘黄色的大气CSS菜单代码
    Flash效果的网站后台左侧Js多级展开菜单代码
    仿FLASH动感十足鼠标滑过放大的菜单代码
  • 原文地址:https://www.cnblogs.com/alice626/p/15568062.html
Copyright © 2011-2022 走看看