你所不知道的typescript的静态类型(代码片段)

枯木前头万木春 枯木前头万木春     2023-01-19     555

关键词:

TypeScript的一个最主要特点就是可以定义静态类型,英文是Static Typing。那到底是什么意思那?太复杂的概念性东西这里就不讲了,你可以简单的理解“静态类型”为,就是你一旦定义了,就不可以再改变了。比如你是男人就是男人,一辈子都要作男人;是女人就是女人,一辈子都是女人。这个事不可以改变!呃…好像现在也可以随便变来变去啊,这里说的是正常情况。但是它还有一些特性,这个并不像表面的那么简单。


如何定义静态类型?

你可以在上节课的文件夹下建立一个新的demo2.ts文件,然后写下这段代码:

const count : number = 1;

这就是最简单的定义一个数字类型的count的变量,这里的: number就是定义了一个静态类型。这样定义后count这个变量在程序中就永远都是数字类型了,不可以改变了。比如我们这时候给count复制一个字符串,它就报错了。

//错误代码
const count : number = 1;
count = 'jspang'

但这只是最简单的理解,再往深一层次理解,你会发现这时候的count变量,可以使用number类型上所有的属性和方法。

我们可以通过在count后边打上一个.看出这个特性,并且编辑器会给你非常好的提示。这也是为什么我喜欢用VScode编辑器的一个原因。

自定义静态类型

你还可以自己去定义一个静态类型,比如现在你定义一个小姐姐的类型,然后在声明变量的时候,就可以使用这个静态类型了,看下面的代码。

interface XiaoJieJie 
    uname: string ,
    age:number
 

const  xiaohong : XiaoJieJie =
    uname: '小红',
    age: 18

这时候你如果声明变量,跟自定义不一样,VSCode直接就会报错。

需要注意的是,这时候xiaohong变量也具有uname和age属性了。

这节课你需要记住的是,如果使用了静态类型,不仅意味着变量的类型不可以改变,还意味着类型的属性和方法也跟着确定了。这个特点就大大提高了程序的健壮性,并且编辑器这时候也会给你很好的语法提示,加快了你的开发效率。

随着你不断的深入学习,你会对这两个优点有更深的理解。


基础静态类型和对象类型

在TypeScript静态类型分为两种,一种是基础静态类型,一种是对象类型,这两种都经常使用,非常重要,我们先来看一下什么是基础静态类型。

基础静态类型

基础静态类型非常简单,只要在声明变量的后边加一个:号,然后加上对应的类型哦。比如下面的代码,就是声明了一个数字类型的变量,叫做count。

const count : number = 918;
const myName :string = 'jspang'

类似这样常用的基础类型还有,我这里就举几个最常用的哦,null,undefinde,symbol,boolean,void这些都是最常用的基础数据类型,至于例子,我这里就不详细的写了,后面碰到,我们再继续讲解。

对象类型

我们先来看一个例子,通过例子有经验的小伙伴就知道个大概了,然后我们再来讲解(其实上节课我们也讲到了,我们这里就当复习了)。

新建一个文件demo3.ts,然后写下如下代码。

const xiaoJieJie:
    name:string,
    age:number
 = 
    name:'大脚',
    age:18

console.log(xiaoJieJie.name)

写完后,我们在terminal(终端)中输入ts-node demo3.ts,可以看到结果输出了大脚。

这就是一个经典的对象类型,也是最简单的对象类型。对象类型也可以是数组,比如现在我们需要很多小姐姐,我们就可以这样写。

const xiaoJieJies : String [] = ['谢大脚','刘英','小红']
这时候的意思是,变量xiaoJieJies必须是一个数组,数组里的内容必须是字符串。你可以试着把字符串改为数字,VSCode会直接给我们报错。

const xiaoJieJies : String [] = ['谢大脚','刘英',123]
现在都讲究面向对象编程,我这面向对象编程这么多年了,也没再多编出来一个。

我们再来看看下面的代码。这个代码就是用类的形式,来定义变量。

class Person
const dajiao : Person = new Person()

这个意思就是dajiao必须是一个Person类对应的对象才可以。我们还可以定义一个函数类型,并确定返回值。

代码如下:

const jianXiaoJieJie : ()=> string =()=>return '大脚'
那我们现在总结一下对象类型可以有几种形式:

  • 对象类型
  • 数组类型
  • 类类型
  • 函数类型
    这几种形式我们在TypeScript里叫做对象类型。

你所不知道的c#中的细节(代码片段)

前言有一个东西叫做鸭子类型,所谓鸭子类型就是,只要一个东西表现得像鸭子那么就能推出这玩意就是鸭子。C#里面其实也暗藏了很多类似鸭子类型的东西,但是很多开发者并不知道,因此也就没法好好利用这些东西,那么今... 查看详情

javascript你所不知道的困惑

困惑一:先看一个样例:functiontest(){ message="hi";}test();alert(message);会输出字符串“hi"在函数内部使用var定义的变量是局部变量,省略var操作符的变量是全局变量。困惑二:alert(undefined==null)结果是”true"我们知道在js中分为基本类型... 查看详情

java泛型——你所不知道的那些泛型背后

一泛型1编译期确定类型安全泛型Generics2参数化类型与原始类型的兼容性3类型擦除4泛型的定义与使用Java泛型(一)——泛型的定义与使用Java泛型(二)——使用Gson解析嵌套泛型数组一、泛型1、编译期确定类型安全——泛... 查看详情

你所不知道的chaosblade那些事(代码片段)

你所不知道的ChaosBlade那些事作者简介:肖长军,阿里巴巴技术专家,花名穹谷,多年应用性能监控研发和分布式系统高可用架构经验,现专注于混沌工程领域,具备多年混沌工程研发和实践经验。开源项目ChaosBlade的负责人,阿... 查看详情

你所不知道nmap(代码片段)

一、Nmap基础1.1、Nmap的简介Nmap是由GordonLyon设计并实现,在1997年开始发布并开源的一个安全扫描软件,GordonLyon最初设计Nmap的目的只是打造一个端口扫描工具。但随着时间的推移,Nmap的功能越来越全面,在2009年Nmap发布了标致未... 查看详情

你所不知道的activity转场动画——activityoptions(代码片段)

相信大家对于Activity的过度动画都很熟悉了,一般情况下我们直接使用overridePendingTransition(enterAnim,exitAnim);但是这种老旧、生硬的方式怎么能适合我们的MD风格的App呢!好在google在新的sdk中给我们提供了另外一种Activity的过度动... 查看详情

你所不知道的json.stringify(代码片段)

译者按:老司机们,你知道JSON.stringify还有第二个和第三个可选参数吗?它们是什么呢?原文:Whatyoudidn’tknowaboutJSON.Stringify译者:Fundebug为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。JSO... 查看详情

你所不知道的helloworld[c++实现](代码片段)

要说OIer界内最简单的程序,那恐怕非HelloWorld莫属了,那么这篇文章就介绍如何写HelloWorld(被打)。最简单的一种实现:#include<iostream>usingnamespacestd;intmain()cout<<"HelloWorld"<<endl;cin.get();return0;当用户按下按键的... 查看详情

lhs和rhs----你所不知道的javascript系列(代码片段)

...用域中查找该变量,如果能够找到就会对它赋值。----《你所不知道的JavaScript(上)》 P7而要讲的LHS和RHS就是上面说的对变量的两种查找操作,查找的过程是由作用域(词法作用域)进行协助,但是引擎执行怎样的查找,会... 查看详情

你所不知道的限流(代码片段)

在系统架构设计当中,限流是一个不得不说的话题,因为他太不起眼,但是也太重要了。这点有些像古代镇守边陲的将士,据守隘口,抵挡住外族的千军万马,一旦隘口失守,各种饕餮涌入城内,势必将我们苦心经营的朝堂庙店... 查看详情

你所不知道的string(string系列一)(代码片段)

1、String定义>通过源码,String是由final修饰的,不能被继承,实现序列化,其中序列化的标识是由定义的变量处理,serialVersionUID和serialPersistentFields。其中另外两个变量是char数组和hash。![](http://i2.51cto.com/images/blog/201804/03/2f2f31206... 查看详情

let和const----你所不知道的javascript系列(代码片段)

let众所周知,在ES6之前,声明变量的关键字就只有var。var 声明变量要么是全局的,要么是函数级的,而无法是块级的。vara=1;console.log(a);//1console.log(window.a);//1functiontest()  varb=2;  functionprint()    console.log(a,b);  print... 查看详情

你所不知道的androidstudio调试技巧(代码片段)

本文转载自:http://www.jianshu.com/p/011eb88f4e0d/AndroidStudio目前已经成为开发Android的主要工具,用熟了可谓相当顺手。作为开发者,调试并发现bug,进而解决,可是我们的看家本领。正所谓,工欲善其事必先利... 查看详情

《你所不知道的:大神与一般程序猿的区别》读书笔记

  看了这本书,有一些共鸣。  现在程序猿那么多,但是为什么他们的技术水平,他们的薪酬会相差那么悬殊呢?  大神和菜鸟,真的是差在技术上吗?  如何评判一个程序猿的优劣?答案是,看他的代码,程序猿和其... 查看详情

你所不知道的,java中操作符的秘密?

在Java编程的过程中,我们对数据的处理,都是通过操作符来实现的。例如,用于赋值的赋值操作符、用于运算的运算操作符等、用于比较的比较操作符,还包括逻辑操作符、按位操作符、移位操作符、三元操作符等等。操作符... 查看详情

你所不知道的冒泡排序

说到排序,耳熟能详,手写代码都可以很顺溜的冒泡排序。但是追究冒泡排序的优化的时候,那么估计就有很多人懵逼了。下面介绍几种冒泡的几个优化点吧。有这么一个数列:int[]number1=1,6,0,2,4,3,9,7,8;常规的... 查看详情

你所不知道的shadowppt

                                 查看详情

你所不知道的z-index的用法

 在开始今天的内容之前,先让我们来看下面一段代码:  <styletype="text/css">#div1,#div2{width:200px;height:200px;background-color:red;position:relative;z-index:1;}#div2{background-color:green;z-index:0;}#di 查看详情