初识TypeScript｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第8天 TypeScript 即带有

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

简介

TypeScript 即带有类型语法的 JavaScript.

TypeScript 是一门构建于 JavaScript 的强类型编程语言, 无论你的项目规模如何，它都能为你提供更好的开发工具.

Translated from https://www.typescriptlang.org/

其增加的功能包括：

类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await

以下功能是从 ECMA 2015 反向移植而来：

类
模块
lambda 函数的箭头语法
可选参数以及默认参数

为什么会有TypeScript？

JavaScript 只是一个脚本语言，并非设计用于开发大型 Web 应用，JavaScript 没有提供类和模块的概念，而 TypeScript 扩展了 JavaScript 实现了这些特性。

JavaScript 与 TypeScript 的区别

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

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

TypeScript优势

解决痛点

TypeScript的设计解决了JavaScript的“痛点”：弱类型和没有命名空间；这导致程序很难模块化，不适合开发大型程序。

语法提示

编写程序时，编辑器将提供精准的语法提示，以帮助大家更方便地实践面向对象的编程。

容易上手

TypeScript的一个设计亮点，是它并没有抛弃JavaScript的语法另起炉灶，而是做成了JavaScript的超集，任何合法的JavaScript的语句在TypeScript下都是合法的，且沿用了JavaScript的使用习惯和惯例，可以说学习成本很低。

Setup

Install

npm i -g typescript

CLI

tsc 即 typescript 在命令行中使用时所需的命令（tsc基本命令）

tsc --help 该命令会显示出所有tsc的指令及其作用
tsc --outDir dist 文件名.ts 该命令会将ts文件编译成js文件后存放到dist目录下（可以在tsc --init命令生成的tsconfig.json文件中修改outDir和rootDir属性）

"outDir": "./dist",//编译后的js文件存放路径 "rootDir": "./src",//tsc编译ts源文件的路径

tsc --init 会在当前目录生成tsconfig.json文件，这是typescript的配置文件。
tsc -w 实现动态监视功能，当使用此命令时会开启动态监视模式，更改ts源文件代码时，保存后编译器会自动编译ts文件。

tsconfig.json

执行 tsc --init 可以创建 typescript 的配置文件，即 tsconfig.json。

大体结构如下（对于不常用属性如 extends, files, display, $schema 等没有列出）：

{
  "compilerOptions": {
    "module": "system",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "../../built/local/tsc.js",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

include 与 exclude 顾名思义，分别用于包含与排除某些路径下的文件。 ** 表示任意目录（含多层），* 表示任意文件名。例如，**/*.spec.ts 表示任意路径下以 .spec.ts 为后缀的文件。

compilerOptions 即编译器配置。其中所有的可配置项均可于 www.typescriptlang.org/tsconfig 查询。

Usage

常用类型

TypeScript的数据类型分为Boolean、Number、String、Array、Enum、Any、Void这七种类型。

Boolean

Number

String

Array

Enum（枚举）

Any

Void

P.S.

静态类型检查

在 Typescipt 中可以给变量标注类型，其语法类似于 Kotlin 或 Rust:

let a: number = 123
let zhang3: {
  name: string,
  sex: boolean
} = {
  name: "张三",
  sex: true
}

显式类型

在 Typescipt 中，也可以给函数参数变量标注类型:

function add1(a: number, b: number): number {
  return a + b;
}

const add2: (a: number, b: number) => number = (a, b) => a + b;

编译时的强类型

TypeScript设计了一套类型机制来保证编译时的强类型判断。当你申明变量的类型后，其他类型的赋值将会引起编译错误。

var username=String;
username=false;//编译报错

TypeScript深入语法知识见后续文章。

初识TypeScript｜ 青训营笔记

简介