TypeScript Basic Types(基本类型)

简介: 在学习TypeScript之前,我们需要先知道怎么才能让TypeScript写的东西正确的运行起来。有两种方式:使用Visual studio 和使用 NodeJs。 这里我选择的是NodeJs来编译TypeScript,因为我笔记本上的VS是2012的,在TypeScript的官网看到下载是TypeScript for VS2013和TypeScript for VS2015。

在学习TypeScript之前,我们需要先知道怎么才能让TypeScript写的东西正确的运行起来。有两种方式:使用Visual studio 和使用 NodeJs。

这里我选择的是NodeJs来编译TypeScript,因为我笔记本上的VS是2012的,在TypeScript的官网看到下载是TypeScript for VS2013和TypeScript for VS2015。额,顺带贴上TypeScript的官网,有需要的去下载。

然后使用NodeJs编译TypeScript的方法:

// 安装
install : npm install -g typescript
// 编译
compile : tsc your.ts

使用VS的限于VS版本2013及2015的,可以下载相关组件,然后新建"TypeScriptFile"。在.ts文件下会有个.js文件,.js就是自动编译后的文件了,然后html引用.js文件即可。

为了让程序可运行,我们需要使用一些数据的基本类型:numbers, strings, structures, boolean等。TypeScript支持这些在JavaScript中会用到的数据类型,并且还提供了实用的枚举类型。

Boolean(布尔类型)
最基本的数据类型是简单的true/false,在JavaScript和TypeScript(其他语言也一样)中称为"boolean"类型。

var isDone:boolean = false;

Number(数字)
正如在JavaScript中,在TypeScript中的数值也都是浮点数。这些浮点数都是"number"类型的。

var height: number = 6;

String(字符串)
在JavaScript编写网页或者服务端程序中,另外一个重要的部分便是文本类型数据。和其他语言一样,我们使用字符串(string)来指代这些文本类型的数据。和JavaScript相同,TypeScript也是用双引号("")或者单引号('')来包含字符串数据。

var name: string = "bob";
name = 'smith';

Array(数组)
TypeScript和JavaScript一样,允许使用数组来含括一系列的值。有两种不同的方式来写一个数组。第一种是在元素类型后面用中括号([])来表示这种类型元素的数组:

var list:number[] = [1,2,3,4];

第二种是使用泛型创建类型数组,Array<elemType/ *数组元素的类型* />:

var list:Array<number> = [1, 2, 3];

Enum(枚举)
在JavaScript原生的标准数据集之外,TypeScript增加了一个很实用的"enum"类型。比如C#,枚举给了我们更友好的名称(数字类型)来辨别数值集合。

enum Color {Red, Green, Blue};
var c: Color = Color.Green;

默认情况下,枚举中的元素是从0开始编号的。你可以通过手动设置元素的这个值。比如,我们现在设置从1开始,而非原先例子中的0:

enum Color {Red = 1, Green, Blue};
var c: Color = Color.Green;

或者,即使是手动设置所有枚举元素的数值都是可以的:

enum Color {Red = 1, Green = 2, Blue = 4};
var c: Color = Color.Green;

枚举类型有个便捷的特性,你可以通过数值来查找枚举中的对应的元素名称。我们看例子,假如我们有一个数值是2,但我们不知道在上面的枚举中对应的是哪个元素,那么我们可以查找相对应的名称:

enum Color {Red = 1, Green, Blue};
var colorName: string = Color[2];
alert(colorName);

Any
当我们编写应用程序的时候,我们可能需要描述一些不明确类型的变量。这些变量可能来自动态的内容,比如用户提供或者第三方库。在这些情况下,我们想要跳出类型检查并且让这些值通过编译时的检查。为了实现这个目的,我们使用"Any"类型来标识这些值:

var notSure: any = 4;
notSure = "maybe a string instead"; // 现在是string类型
notSure = false; // 现在是boolean类型

"any"类型对于处理我们现有的JavaScript代码很有好用,可以用它来控制编译时是否增加还是减少数据的类型检查。
如果你仅知道一部分数据类型而非全部数据类型,那么使用"any"类型是很方便的。例如,你可能有个数组,但这个数组的元素又是对应不同的数据类型。

var list:any[] = [1, true, "free"];
list[1] = 100;

Void
与"any"类型相对的是"void"类型,它代表没有任何类型。你也许经常看到它作为个不返回值的函数:

function warnUser(): void {
    alert("This is my warning message");
}
相关文章
|
JavaScript 开发者 索引
搞懂 TypeScript 中的映射类型(Mapped Types)
搞懂 TypeScript 中的映射类型(Mapped Types)
776 0
|
4月前
|
JavaScript 前端开发 开发者
TypeScript :基本配置&数据的基本类型
本文介绍了TypeScript的安装、常见问题及解决方案、配置与使用方法。包括通过npm全局安装TypeScript、设置PowerShell执行策略、初始化项目、配置模块声明、处理数据类型等。详细步骤和代码示例帮助开发者快速上手。
|
7月前
|
JavaScript 前端开发
TypeScript(二)基本类型和特殊类型
TypeScript(二)基本类型和特殊类型
79 0
|
9月前
|
JavaScript
【TypeScript学习】—基本类型(二)
【TypeScript学习】—基本类型(二)
【TypeScript学习】—基本类型(二)
|
9月前
|
JavaScript 前端开发 开发者
TypeScript基础(一)基本类型与类型运算
TypeScript是一种开源的编程语言,它是JavaScript的超集,意味着所有的JavaScript代码都可以在TypeScript中运行。TypeScript添加了静态类型检查和其他一些新特性,以提高代码的可读性、可维护性和可扩展性。
69 0
|
JavaScript
TypeScript基本类型和引用类型实例
TypeScript基本类型和引用类型实例
|
JavaScript 前端开发 测试技术
TypeScript高级类型:探索Mapped Types的威力及衍生
TypeScript高级类型:探索Mapped Types的威力及衍生
「TypeScript」你必须要知道的 TS 高级技能点 —— Utility Types
「TypeScript」你必须要知道的 TS 高级技能点 —— Utility Types
|
JavaScript 安全
TypeScript 中你不一定知道的 top types,在用 any 之前先试试 unknown?
最近发现了一本 TS 相关的电子书,Tackling TypeScript[1]。随便翻看了一下,就发现了自己很感兴趣的一个问题,并且也经常听说在国内面试中出现。
|
JavaScript 安全 前端开发
TypeScript基本类型详解
TypeScript基本类型详解
275 0