一、ts 入门和基础（简易版）

TypeScript入门教程

 

（一）  ts 趋势

 

deno是下一代的node.js，deno 使用 Go 语言代替 C++ 重新编写跨平台底层内核驱动，上层仍然使用 V8 引擎，最终提供一个安全的 TypeScript 运行环境。

且 大型框架，vue  ng react 等都支持使用TS。

 

（二） ts 🆚  js 对比

 

1、TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。

     超集（增强版）：静态类型和面向对象，适合 大型应用和 多人协作

2、ts是应用程序级别的语言，更适合开发大型应用

3、跨平台且开源：TypeScript 编译工具可以运行在任何服务器和任何系统上（跨平台），即使是微软出的，也可以运行在linux 或 苹果系统。TypeScript 是开源的。

4、始于js, 止于js

5、可重用js,甚至可以直接引入js流行的库，比如echats

6 、ts 类，接口模块。

 

（三） 开发环境的安装 

//查看 node 环境

node -v
npm -v

 

//安装ts

sudo npm install typescript -g
tsc --version

 

（四） 编写hello world

 

1. 初始化项目：进入你的编程文件夹后，可以使用 npm init -y 来初始化项目，生成package.json文件。

2. 创建tsconfig.json文件，在终端中输入 tsc --init：它是一个TypeScript项目的配置文件，可以通过读取它来设置TypeScript编译器的编译参数。

3. 安装@types/node,使用 npm install @types/node --dev-save进行安装。这个主要是解决模块的声明文件问题。

4. 编写 HelloWorld.ts 文件，然后进行保存，代码如下。

var a:string = "HelloWorld"
console.log(a)

5. 构建：根据 tsconfig.json 配置文件，终端执行 tsc HelloWorld.ts ，这时候就会生成一个helloWorld.js文件

6. 在终端中输入node helloWorld.js，就可以看到结果了。

⚠️ 注意事项：

1、TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错。TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。

    如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。

（五）ts 变量类型

 

TypeScript中的数据类型有：

• Undefined :
• Number:数值类型;  如： var age:number = 18   var stature:number = 178.5 (包含 整型和浮点型; NaN是特殊的Number类型)； 
• string : 字符串类型;    如：var haha:string = "哈哈哈"
• Boolean: 布尔类型； 如：var bool:boolean = true 
• enum：枚举类型；变量的结果有几个固定的值，这时可用枚举类型。比如一年四季。  枚举类型常用大写表示。如：enum SEASON{spring,summer,autumn,winter}  ; console.log(SEASON.autumn)  //2

• any : 任意类型；
• void：空类型；
• Array : 数组类型;
• Tuple : 元祖类型；
• Null ：空类型。

 

（六）ts 函数

   把功能相近的需求封装成一个独立的代码块，每次传入不同的变量或参数，就可以得到不同的结果。

 

 

需要注意的是：

1. 声明（定义）函数必须加 function 关键字；
2. 函数名与变量名一样，命名规则按照标识符规则；
3. 函数参数可有可无，多个参数之间用逗号隔开；
4. 每个参数参数由名字与类型组成，之间用分号隔开；
5. 函数的返回值可有可无，没有时，返回类型为 void；
6. 大括号中是函数体。

 

（七） 三种函数的定义方式

 

1、函数声明法

  

2、函数表达式法

 

3、箭头函数

 

     箭头函数是 ES6 中新增的函数定义的新方式， TypeScript 语言是完全支持 ES6 语法的。箭头函数定义的函数一般都用于回调函数中。 

 

4、函数的作用域

• 局部变量：函数体内定义的变量就是局部变量。
• 全局变量: 函数体外 定义的变量就是全局变量。
• 变量提升：Js 中，函数及变量的声明都将被提升到函数的最顶部。Js 中，变量可以在使用后声明，也就是变量可以先使用再声明。JavaScript 只有声明的变量会提升，初始化的不会。 

     

 

（八）数组

      元祖是一种特殊的数组，元祖类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 (不常用)

（九） 字符串

（十）  日期对象

（十一）正则表达式

• test(string) ：在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回 true，不存在则返回 false。
• exec(string) : 用于在字符串中查找指定正则表达式，如果 exec() 方法执行成功，则返回包含该查找字符串的相关信息数组。如果执行失败，则返回 null。