前端TypeScript学习day01-TS先容与TS部分常用范例

(创作不易，感谢有你，你的支持，就是我前行的最大动力，假如看完对你有资助，请留下您的足迹）

目次
TypeScript 先容
TypeScript 是什么
TypeScript 为什么要为 JS 添加范例支持？ 
TypeScript 相比 JS 的优势 
TypeScript 初体验 
安装编译 TS 的工具包
编译并运行 TS 代码
简化运行 TS 的步骤
TypeScript 常用范例
概述
范例注解 
常用基础范例概述
原始范例 
数组范例 
范例别名 
函数范例
对象范例

---

 
TypeScript 先容

TypeScript 是什么

      T   ype   S   cript   （简称：TS）是 JavaScript 的   超集   （JS 有的 TS 都有）。        TypeScript =    Type    + JavaScript（在 JS 基础之上，为 JS 添加了   范例支持   ）。        TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行。      

   

TypeScript 为什么要为 JS 添加范例支持？ 

      背景：JS 的范例系统存在“天赋缺陷”，JS 代码中绝大部分错误都是   范例   错误（Uncaught    Type   Error）。        标题：增长了找 Bug、改 Bug 的时间，严重影响开发效率。            从编程语言的动静来区分，TypeScript 属于静态范例的编程语言，JS 属于动态范例的编程语言。        静态范例   ：编译期做范例查抄；    动态范例   ：执行期做范例查抄。        代码编译和代码执行的顺序：1 编译 2 执行。            对于 JS 来说：需要等到代码真正去   执行   的时间才能   发现错误   （晚）。        对于 TS 来说：在代码   编译   的时间（代码执行前）就可以   发现错误   （早）。        而且，配合 VSCode 等开发工具，TS 可以   提前到在编写代码的同时   就发当代码中的错误，   减少找 Bug、改 Bug 时间    TypeScript 相比 JS 的优势 


      1.    更早（写代码的同时）发现错误，   减少找 Bug、改 Bug 时间   ，提升开发效率。        2.    程序中任何位置的代码都有   代码提示   ，随时随地的安全感，增强了开发体验。        3.    强大的   范例系统   提升了代码的可维护性，使得   重构代码更加容易   。        4.    支持   最新的 ECMAScript 语法   ，优先体验最新的语法，让你走在前端技术的最前沿。        5.    TS    范例推断   机制，   不需要   在代码中的   每个地方都显示标注范例   ，让你在享受优势的同时，只管低沉了成本。          除此之外，Vue 3 源码利用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端 项目的首先编程语言。    TypeScript 初体验 

安装编译 TS 的工具包

      标题：为什么要安装编译 TS 的工具包？        答复：Node.js/欣赏器，只认识 JS 代码，不认识 TS 代码。需要先将 TS 代码转化为 JS 代码，然后才能运行。          安装命令：npm i -g    typescript   。          typescript 包：用来编译 TS 代码的包，提供了    tsc    命令，实现了 TS -> JS 的转化。          验证是否安装乐成：tsc –v（查察 typescript 的版本）。   

  

编译并运行 TS 代码

      1.    创建 hello   .ts    文件（注意：TS 文件的后缀名为    .ts   ）。        2.    将 TS 编译为 JS：在终端中输入命令，   tsc    hello.ts（此时，在同级目次中会出现一个同名的 JS 文件）。        3.    执行 JS 代码：在终端中输入命令，node hello.js。      

           阐明：所有合法的 JS 代码都是 TS 代码，有 JS 基础只需要学习 TS 的范例即可。           注意：由 TS 编译生成的     JS 文件    ，代码中就    没有范例信息    了。        

简化运行 TS 的步骤


      标题描述：每次修改代码后，都要   重复执行   两个命令，才能运行 TS 代码，太繁琐。        简化方式：利用    ts-node    包，直接在 Node.js 中执行 TS 代码。        安装命令：npm i -g    ts-node   （ts-node 包提供了 ts-node 命令）。        利用方式：   ts-node    hello.ts。        解释：ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码。   

TypeScript 常用范例

概述


      TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，而且额外的增长了：   范例系统   。           所有的 JS 代码都是 TS 代码。         JS 有范例（比如，number/string 等），但是    JS 不会查抄变量的范例是否发生变革   。而    TS 会查抄   。        TypeScript 范例系统的重要优势：可以   显示标志出代码中的不测举动   ，从而低沉了发生错误的可能性。          1.    范例注解        2.    常用基础范例    范例注解 

      

       阐明：代码中的    : number    就是范例注解。        作用：为变量   添加范例束缚   。比如，上述代码中，约定变量 age 的范例为 number（数值范例）。        解释：   约定了什么范例，就只能给变量赋值该范例的值   ，否则，就会报错。      

    常用基础范例概述

      可以将 TS 中的常用基础范例细分为两类：1 JS 已有范例 2 TS 新增范例。        1.    JS 已有范例                原始范例：number/string/boolean/null/undefined/symbol。                对象范例：object（包罗，数组、对象、函数等对象）。        2.    TS 新增范例                联合范例、自界说范例（范例别名）、接口、元组、字面量范例、枚举、void、any 等    原始范例 


      原始范例：number/string/boolean/null/undefined/symbol。        特点：   简单   。这些范例，完全按照 JS 中范例的名称来誊写      

  数组范例 

      对象范例：object（包罗，数组、对象、函数等对象）。        特点：对象范例，在 TS 中更加细化，   每个具体的对象都有自己的范例语法   。        数组范例   的两种写法：（   保举利用    number[]    写法）   

      

            需求：数组中既有 number 范例，又有 string 范例，这个数组的范例应该怎样写？         

               解释：             |      （竖线）在 TS 中叫做     联合范例     （由两个或多个其他范例构成的范例，表示可以是这些范例中的恣意一种）。              注意：这是 TS 中联合范例的语法，只有一根竖线，不要与 JS 中的或（||）混淆了。         

1. // 联合类型：
2. // 添加小括号，表示：首先是数组，然后，这个数组中能够出现 number 或 string 类型的元素
3. let arr: (number | string)[] = [1, 3, 5, 'a', 'b']
5. // 不添加小括号，表示：arr 既可以是 number 类型，又可以是 string[]
6. let arr1: number | string[] = ['a', 'b']
7. let arr2: number | string[] = 123

复制代码

范例别名 

      范例别名   （自界说范例）：为恣意范例起别名。        利用场景：当同一范例（复杂）被多次利用时，可以通过范例别名，   简化该范例的利用   。      

       解释：        1. 利用    type    关键字来创建范例别名。        2. 范例别名（比如，此处的 CustomArray），可以是恣意合法的变量名称。        3. 创建范例别名后，直接   利用该范例别名作为变量的范例注解   即可。   

1. // let arr: (number | string)[] = [1, 3, 5, 'a', 'b']
2. // let arr1: (number | string)[] = [1, 'x', 2, 'y']
4. // 改造：
6. // 类型别名：
7. type CustomArray = (number | string)[]
9. let arr: CustomArray = [1, 3, 5, 'a', 'b']
10. let arr1: CustomArray = [1, 'x', 2, 'y']

复制代码

函数范例

      函数的范例实际上指的是：函数   参数   和   返回值   的范例。        为函数指定范例的两种方式：       1 单独指定参数、返回值的范例          2 同时指定参数、返回值的范例。          1.    单独指定参数、返回值的范例：      

   

1. // 1. 单独指定参数、返回值类型：
3. function add(num1: number, num2: number): number {
4.   return num1 + num2
5. }
7. // const add = (num1: number, num2: number): number => {
8. //   return num1 + num2
9. // }
11. console.log(add(3, 2))

复制代码

   2. 同时指定参数、返回值的范例：
  

     解释：当函数作为表达式时，可以通过   类似箭头函数形式的语法   来为函数添加范例。        注意：这种形式只适用于函数表达式。       假如函数没有返回值，那么，函数返回值范例为：void。
  

       利用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定范例时，就用到   可选参数   了。        比如，数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)。      

       可选参数：在可传可不传的参数名称后面添加    ?   （问号）。        注意：   可选参数只能出如今参数列表的最后   ，也就是说可选参数后面不能再出现必选参数。   

1. function mySlice(start: number, end?: number): void {
2.     console.log('起始索引：', start, '结束索引：', end)
3.   }
4.   
5.   mySlice(10)
6.   mySlice(1)
7.   mySlice(1, 3)

复制代码

对象范例

      JS 中的对象是由属性和方法构成的，而 TS 中   对象的范例   就是在   描述对象的布局   （有什么范例的属性和方法）。        对象范例的写法：      

             解释：           1. 直接利用 {} 来描述对象布局。属性采用    属性名: 范例    的形式；方法采用    方法名(): 返回值范例    的形式。           2. 假如方法有参数，就在方法名后面的小括号中指定参数范例（比如：    greet(name: string): void    ）。           3. 在一行代码中指定对象的多个属性范例时，利用 ;（分号）来分隔。                   假如一行代码只指定一个属性范例（通过换行来分隔多个属性范例），可以去掉 ;。                   方法的范例也可以利用箭头函数形式（比如：{ sayHi: () => void }）。      

1. let person: { name: string; age: number; sayHi(): void; greet(name: string): void } = {
2.   name: '刘老师',
3.   age: 18,
4.   sayHi() {},
5.   greet(name) {}
6. }

复制代码

     对象的属性或方法，也可以是可选的，此时就用到   可选属性   了。        比如，我们在利用 axios({ … }) 时，假如发送 GET 请求，method 属性就可以省略      

    可选属性的语法与函数可选参数的语法一致，都利用 ?（问号）来表示。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。