初识TypeScript,认识其基本语法与发展历程 | 青训营笔记

18 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

前言

什么是TypeScript?

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。

TypeScript 是由微软开发的自由和开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。

TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器、任何操作系统上。

发展历程

image.png

为什么是Typescript?它的优势在哪?

TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

image.png

TypeScript可以使用JavaScript中的所有代码和编码概念,TypeScript是为了使JavaScript的开发变得更加容易而创建的。在开发大型项目时,使用TypeScript更加合适,如果开发代码量较小的项目,使用JavaScript更好。

image.png

编辑器的选择

1.VS Code

2.TypeScript官方在线编辑器(想快速上手可选)

image.png

数据类型

image.png

基础类型

数字类型

let binaryLiteral: number = 0b1010; // 二进制

字符串类型

可以用单引号'或双引号"表示字符串

let years: number = 5;

布尔类型

let flag: boolean = true;

数组类型

TypeScript中有两种方式可以定义数组,一种是在元素类型后面加上[],另一种是使用数组泛型Array<元素类型>

let arr: number[] = [1, 2];

Any 类型

任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型,其常用于以下三种情况。

1、变量的值会动态改变时,比如来自用户的输入,任意值类型可以让这些变量跳过编译阶段的类型检查:

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型

改写现有代码时,任意值允许在编译时可选择地包含或移除类型检查:

let x: any = 4;

定义存储各种类型数据的数组时:

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;