关于typescript之定义变量和数据类型那点事

变量和数据类型

JavaScript虽说深受万千程序员喜爱,却有着对于企业大规模开发很难管理的缺陷。这时候,TypeScript的优势便体现出来。接下来,我们会先接触在TypeScript中定义变量相关的问题。之后再来了解JavaScript类型在TypeScript中的变化以及TypeScript中新增的类型。希望这些内容可以帮助你对typescript更加了解。

一. 变量声明方式

1.1. 声明变量的格式

我们已经强调过很多次,在TypeScript中定义变量需要指定 标识符 的类型。

所以完整的声明格式如下:

var/let/const 标识符: 数据类型 = 赋值;

比如我们声明一个message,完整的写法如下:

注意:这里的string是小写的,和String是有区别的

string是TypeScript中定义的字符串类型,String是ECMAScript中定义的一个类

let message: string = "Hello World";

message = "Hello TypeScript"; // 正确的做法

message = 20; // 错误的做法,因为message是一个string类型

1.2. 声明变量的关键字

在TypeScript定义变量(标识符)和ES6之后一致,可以使用var、let、const来定义:

var myname: string = "abc";

let myage: number = 20;

const myheight: number = 1.88;

但是,我们会发现使用var关键字会有一个警告:

       var关键字警告

可见,在TypeScript中并不建议再使用var关键字了,主要原因和ES6升级后let和var的区别是一样的,var是没有块级作用域的,会引起很多的问题,这里不再展开探讨。

所以,在之后的开发中,我们定义变量主要使用let和const

1.3. 变量的类型推断

在开发中,有时候为了方便起见我们并不会在声明每一个变量时都写上对应的数据类型,我们更希望可以通过TypeScript本身的特性帮助我们推断出对应的变量类型:

let message = "Hello World";

上面的代码我们并没有指定类型,但是message实际上依然是一个字符串类型:

给message赋值一个number

这是因为在一个变量第一次赋值时,会根据后面的赋值内容的类型,来推断出变量的类型:

上面的message就是因为后面赋值的是一个string类型,所以message虽然没有明确的说明,但是依然是一个string类型

let message = "Hello World"; // string类型

let age = 20; // number类型

let isFlag = true; // boolean类型

1.4. 声明name报错

我们在TypeScript的文件中声明一个name(很多其他的名字也会)时,会报错:

声明name报错信息

主要错误信息:

无法重新声明块范围变量“name”

我们前面明明(明明说管我什么事)没有声明name,但是却说我们重复声明了

这次是因为我们的typescript 将 DOM typings 作为全局的运行环境;

所以当我们声明 name时, 与 DOM 中的全局  name 属性出现了重名;

name的声明位置

如何解决这个问题呢?

有两种方案:去掉 DOM typings 的环境和声明模块

方式一:删除DOM typings的环境

但是这种办法对于我们来说并不合适,因为我们依然希望在DOM下编译我们的TypeScript代码

删除DOM typing

方式二:声明我们的ts文件为一个模块

既然与全局的变量出现重名,那我们将脚本封装到模块(module)中,因为模块有属于自己的作用域,就不会和全局的产生冲突:

在 Typescript 中,我们可以使用ES6的export来导出一个对象,并且该文件被视为 module

let name = "coderwhy";

export {};

1.5. console.log报错

另外为了测试方便我们经常使用console.log来进行测试,但是使用时会报一个警告:

console.log警告

这个时候,我们可以配置

配置tslint

"no-console": false

二. JavaScript数据类型

2.1. number类型

数字类型是我们开发中经常使用的类型,TypeScript和JavaScript一样,不区分整数类型(int)和浮点型(double),统一为number类型。

// 1.数字类型基本定义

let num = 100;

num = 20;

num = 6.66;

如果你学习过ES6应该知道,ES6新增了二进制和八进制的表示方法,而TypeScript也是支持二进制、八进制、十六进制的表示:

// 2.其他进制表示

num = 100; // 十进制

num = 0b110; // 二进制

num = 0o555; // 八进制

num = 0xf23; // 十六进制

2.2. boolean类型

boolean类型只有两个取值:true和false,非常简单

// boolean类型的表示

let flag: boolean = true;

flag = false;

flag = 20 > 30;

2.3. string类型

string类型是字符串类型,可以使用单引号或者双引号表示:

注意:如果打开了TSLint,默认情况下推荐使用使用双引号

// string类型表示

let message: string = "Hello World";

message = 'Hello TypeScript';

同时也支持ES6的模板字符串来拼接变量和字符串:

const name = "why";

const age = 18;

const height = 1.88;

const info = `my name is ${name}, age is ${age}, height is ${height}`;

console.log(info);

2.4. array类型

数组类型的定义也非常简单,有两种方式:

但是TSLint会推荐我们使用上面这种方式

const names1: string[] = ["why", "abc", "cba"];

const names2: Array<string> = ["why", "abc", "cba"];

2.5. object类型

object对象类型可以用于描述一个对象:

// object类型表示

const myinfo: object = {

  name: "why",

  age: 20,

  height: 1.88,

};

但是上面的代码会报一个警告:

object定义后警告

这是因为TSLint建议我们所有的key按照字母进行排序,但是这个并不是特别有必要,我们还是可以关闭掉:

关闭TSLint字母排序

"object-literal-sort-keys": false

属性是不可以访问的

如果我们访问myinfo中的属性,会发现报错:

找不到name属性

这是因为TypeScript并不知道某一个object类型上面就有一个name的属性。

但是如果我们让它是类型推断的,就可以正常的访问:

这是因为推导出来的类型,是如下的类型

myinfo的类型

还有一种方法是定义后面会学到的接口,TypeScript一个非常好用的特性就是接口interface,后续我们会进行非常详细的学习

2.6. symbol类型

在ES5中,如果我们是不可以在对象中添加相同的属性名称的,比如下面的做法:

const person = {

  identity: "程序员",

  identity: "老师",

}

通常我们的做法是定义两个不同的属性名字:比如identity1和identity2。

但是我们也可以通过symbol来定义相同的名称,因为Symbol函数返回的是不同的值:

const s1 = Symbol("identity");

const s2 = Symbol("identity");

const person = {

  [s1]: "程序员",

  [s2]: "老师",

};

这是Symbol的一个用法,更多其他用法大家可以自行学习,或者等到后续确实需要用到时,我们再详细讲解。

2.7. null和undefined

在 JavaScript 中,undefined 和 null 是两个基本数据类型。

在TypeScript中,它们各自的类型也是undefined和null,也就意味着它们既是实际的值,也是自己的类型:

const n: null = null;

const u: undefined = undefined;

三. TypeScript数据类型

TypeScript在原有的JavaScript基础上引入了很多好用的类型:enum枚举类型、tuple元组类型、any类型、void类型、never类型等”

3.1. enum类型

3.1.1. 枚举的基本定义

枚举类型在很多语言都有的类型,比如C++、Java等等,并且也非常好用,所以TypeScript引入了enum类型,让我们开发更好的方便和安全。

枚举类型通常是定义一组数据:

enum Direction {

  EAST,

  WEST,

  NORTH,

  SOUTH,

}

const d1 = Direction.EAST;

const d2 = Direction.NORTH;

3.1.2. 枚举类型的值

枚举类型有自己的值,比如打印上面的d1和d2

打印d1和d2结果

默认情况下,枚举中的数据是从0开始的,我们可以改变它的初始化值,比如下面的代码:

enum Direction {

  EAST = 10,

  WEST,

  NORTH,

  SOUTH,

}

const d1 = Direction.EAST;

const d2 = Direction.NORTH;

console.log(d1); // 10

console.log(d2); // 12

也可以全部自己来指定:

enum Direction {

  EAST = 10,

  WEST = 20,

  NORTH = 30,

  SOUTH = 40,

}

const d1 = Direction.EAST;

const d2 = Direction.NORTH;

console.log(d1); // 10

console.log(d2); // 30

我们也可以通过对应的值去获取对应的数据名称:

console.log(Direction[10]); // EAST

console.log(Direction[30]); // NORTH

3.2. tuple类型

3.2.1. tuple的基本使用

tuple是元组类型,很多语言中也有这种数据类型,比如Python、Swift等。

const tInfo: [string, number, number] = ["why", 18, 1.88];

const item1 = tInfo[0]; // why, 并且知道类型是string类型

const item2 = tInfo[1]; // 18, 并且知道类型是number类型

3.2.1. tuple和数组类比

初学tuple会觉得它和数组非常相似

但是数组中通常会定义一组相同的数据,如果数据不同会造成类型的丢失:

注意:这里我使用了一种联合类型,后面会讲到

const aInfo: Array<string|number> = ["why", 18, 1.88];

const itema = aInfo[0]; // why,但是并不知道itema是string类型还是number类型

3.3. any类型

在某些情况下,我们确实无法确定一个变量的类型,并且可能它会发生一些变化,这个时候我们可以使用any类型(类似于Dart语言中的dynamic类型)

let a: any = "why";

a = 123;

a = true;

const aArray: any[] = ["why", 18, 1.88];

3.4. void类型

void类型通常用于函数没有返回值时来使用:

首先我们需要说明的是,在TypeScript中函数也是有类型的

下面的函数,虽然我们没有指定它的类型,但是它会通过类型推导出来:

const sum = (num1: number, num2: number) => {

  return num1 + num2;

};

// 相当于下面的写法

const sum: (num1: number, num2: number) => number = (num1: number, num2: number) => {

  return num1 + num2;

};

sum函数的类型

如果一个函数没有返回值,那么它的返回值类型就是void

我们可以将null和undefined赋值给void类型,也就是函数可以返回null或者undefined

const sayHello: (name: string) => void = (name: string) => {

  console.log("hello " + name);

};

3.5. never类型

never类型表示一种从来不会存在的值的类型,有点绕,我们来这样理解:

如果一个函数中是一个死循环,那么这个函数会返回东西吗?不会,那么写void类型或者其他类型作为返回值类型都不合适,我们就可以使用never类型。

如果一个函数是抛出一个异常,那么这个函数是不是也没有返回值呢?这个时候我们也可以使用never类型。

死循环的函数

抛出异常的函数

备注:所有内容首发于公众号Flutter、TypeScript、React、Node、uniapp、小程序开发、数据结构与算法等等,也会更新一些自己的学习心得等,欢迎大家关注。

最后我想说的是,变量及数据类型犹如在茫茫TS宇宙中的一颗行星,想要更加深入了解TS,光看这些是远远不够的,如果你对此有兴趣,接下来我会分享更多关于TS的内容,当然你也可以自行研究,希望这些内容可以帮你在编程道路上更进一步。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容