TypeScript学习日记(一)

223 阅读4分钟

简介

TypeScript是由微软公司开发的一个JavaScript的超集,主要提供了类型系统和对于ES6语法的支持。

特点

1、编译型语言:运行时需要先进行编译 2、强类型语言
3、面向对象的语言

优势

1、相较于弱类型语言JavaScriptTypeScript要求在变量定义时就指定变量的类型,在后续指定变量的值时,IDE会做出类型检测,提示出错误的地方,减少开发阶段犯错误的几率。
2、因为需要为变量指定类型,所以大多数的函数看看函数定义就知道如何使用,增加代码的可读性。
3、增强了编辑器和IDE的功能(代码提示、修改自动更新引用、接口提示等)

总结:TypeScript增强了代码的可读性和可维护性。

安装

主要有两种方式来获取TypeScript工具:

  • 通过npm
  • 安装Visual Studio的TypeScript插件

Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你的Visual Studio还没有安装TypeScript,你可以下载它。

针对npm用户

npm install -g typescript

编写

TypeScript.ts作为文件扩展名,使用变量名:变量类型的方式来为变量指定其类型。新建一个名为test.ts的文件,将以下代码输入到test.ts文件中。

function sayHi(person: string){
    return 'hello ' + person;
}
console.log(sayHi('john')); // hello john 

运行

运行ts有两种方式。
1、将ts文件编译为js文件运行

tsc test.ts

在同级目录下会生成一个test.js文件,运行这个test.js文件即可。

2、使用ts-node工具来直接运行ts文件, 在这里就不做详细叙述了,感兴趣的可以看看这篇文章 VSCode使用ts-node调试TypeScript代码

数据类型

TypeScript的数据类型包括两种,原始数据类型和对象类型

TypeScript的原始数据类型包括布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。


原始数据类型

本节主要讲述布尔值、数值、字符串、null、undefined这五种数据类型在TypeScript中的应用。

布尔值

在TypeScript中使用boolean关键字来定义布尔值类型。

let isRead: boolean = true;

需要注意的是new Boolean(true)得到的不是布尔值。

let isDone: boolean = new Boolean(true);

//不能将类型“Boolean”分配给类型“boolean”。
//“boolean”是基元,但“Boolean”是包装器对象。如可能首选使用“boolean”。

上诉代码会报错,因为new Boolean(true)得到的并不是一个布尔值,而是一个Boolean对象。

当然如果直接调用Boolean(true)得到的就是一个布尔值。

const isDone: boolean = Boolean(true);

TypeScriptboolean是原始数据类型,而Boolean则是构造函数,其他的基本类型(nullundefined除外)也是一样的。

数值

TypeScript中使用number关键字来定义数值类型。

JavaScript中一样TypeScript中所有的数都是浮点数,除了支持十进制和十六进制,TypeScript中还支持 ES6 中引入的二进制和八进制表示。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
编译结果
var decLiteral = 6;
var hexLiteral = 0xf00d;
// ES6 中的二进制表示法
var binaryLiteral = 10;
// ES6 中的八进制表示法
var octalLiteral = 484;
var notANumber = NaN;
var infinityNumber = Infinity;

字符串

TypeScript中字符串用string关键字来表示,和JavaScript一样可以使用"和'来表示字符串。

let name: string = 'john';
name = 'lucy';

对于模板字符串typescript也是支持的。

const name: string = 'adrien';
const age: number = 22;

const str: string = `my name is ${name}
I'll be ${ age + 1 } years old next month`;

对于上述定义 str 的方式与下面的结果相同

const str = "my name is " + name + "I'll be " + (age + 1) + " years old next month";

NullUndefined

typescript可以使用nullundefined来定义这两个数据类型。

const n: nulll = null;
const u: undefined = undefined;

typescriptnullundefined 是所有类型的子类型。也就是说 nullundefined 可以赋值给任何类型的变量。

const num: number = null;
const str: string = undefined;

// 上述的写法都是被允许的 不会报错