TypeScript(三)定义变量和数据类型

简介: 这个章节我们来学习如何在TypeScript中定义变量,以及JavaScript类型在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关键字会有一个警告:

image.png                                              var关键字警告

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

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


1.3. 变量的类型推断


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

let message = "Hello World";

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

image.png      

                                        给message赋值一个number

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

  • 上面的message就是因为后面赋值的是一个string类型,所以message虽然没有明确的说明,但是依然是一个string类型
let message = "Hello World"; // string类型
let age = 20; // number类型
let isFlag = true; // boolean类型


1.4. 声明name报错


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

image.png                                            声明name报错信息

主要错误信息:

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

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

  • 这次是因为我们的typescriptDOM typings 作为全局的运行环境;
  • 所以当我们声明 name时, 与 DOM 中的全局  name 属性出现了重名;

image.png                                              name的声明位置

如何解决这个问题呢?

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

方式一:删除DOM typings的环境

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

image.png                                                            

                                      删除DOM typing

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

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

  • 在 Typescript 中,我们可以使用ES6的export来导出一个对象,并且该文件被视为 module
let name = "coderwhy";
export {};


1.5. console.log报错


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

console.log警告

这个时候,我们可以配置

image.png                      

                                             配置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,
};

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

image.png                                               object定义后警告

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

image.png                                            关闭TSLint字母排序

"object-literal-sort-keys": false

属性是不可以访问的

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

image.png                                             找不到name属性

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

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

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

image.png                                                 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

image.png                                               打印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.2. 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;
};

image.png                                          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类型。

image.png                                                    死循环的函数

网络异常,图片无法展示
|
                                                  抛出异常的函数

相关文章
|
6月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
63 3
|
4月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
6月前
|
JavaScript 前端开发 Java
2020你应该知道的TypeScript学习路线【数据类型】
2020你应该知道的TypeScript学习路线【数据类型】
59 1
|
2月前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
45 4
|
3月前
|
JavaScript 编译器
typescript 解决变量多类型访问属性报错--工作随记
typescript 解决变量多类型访问属性报错--工作随记
|
3月前
|
JavaScript 前端开发 编译器
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
|
4月前
|
存储 Rust JavaScript
Rust 问题之TypeScript 代码,变量 s 存储在栈内存中还是堆内存中如何解决
Rust 问题之TypeScript 代码,变量 s 存储在栈内存中还是堆内存中如何解决
|
6月前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 的内置数据类型有哪些?
【5月更文挑战第1天】【Web 前端】TypeScript 的内置数据类型有哪些?
|
5月前
|
JavaScript
typescript块级作用域变量
typescript块级作用域变量
|
6月前
|
存储 JavaScript 前端开发
TypeScript基本数据类型详解
【4月更文挑战第23天】TypeScript基础知识概览:包括Boolean、Number、String、Array、Tuple、Enum、Any、Void、Null和Undefined以及Never类型。了解这些数据类型能提升代码质量和可维护性。示例代码展示了各种类型的用法,如定义布尔变量、数字转换、字符串操作、数组和元组声明、枚举创建、任意类型使用,以及空值和Never类型的场景。掌握这些将有助于更好地使用TypeScript进行开发。