tnblog
首页
视频
资源
登录
原 精

TypeScript 的定义及其基础

6304人阅读 2020/7/10 20:22 总访问：118152 评论：1 收藏：0 手机
分类: TypeScript

TypeScript 的定义及其基础

什么是 ts:

官方解释: Ts 是 Js 类型的超集, 可以编译成为 Js 编译过后 Js 可以在任何平台的浏览器上面运行

Ts 是 Js 超集: 除了包含本身 Js 本身的语法之外 还有自己本身的语法新特性

Ts 的数据类型是静态的数据类型: 而 Js 本身是动态类型的语言

Js

  1. let a = '123'

  2. a = 123

上面代码段中可以看出 变量 a 首先是 字符类型 然后是 数字类型 这种变量的数据类型的动态的转化称为动态类型

Ts

  1. let a = '123'

  2. a = 123 // 报错

上面代码中可看出 变量首先声明为 字符类型 后转换为 数字类型 但是在转换的过程中编辑器报错 所以在 Ts 中 变量的数据类型是不可以动态的更改的 故称其数据类型为 静态类型

所以经过 Ts 开发的代码 必须要经过代码编译过后才可以在浏览器中运行 官方在线编辑器

Ts 带来了什么优势

我们先来看一下小例子 使用 Js 和 Ts 分别实现勾股定理

Js

  1. function JsDemo(data) {

  2.   return Math.sqrt(data.x ** 2 + data.y ** 2)

  3. }

  4. 

  5. JsDemo({x: 1, y: 123})

Ts

  1. function TsDemo(data) {

  2.   return Math.sqrt(data.x ** 2 + data.y ** 2)

  3. }

  4. // 光是这样写在编辑器就会报错 因为不知道 data 中的 x,y  是什么数据类型

  5. 

  6. // Ts 代码优化

  7. // 限定传递的值的数据类型

  8. function TsDemo(data: {x: number, y: number}) {

  9.   return Math.sqrt(data.x ** 2 + data.y ** 2)

  10. }

  11. 

  12. TsDemo({x: 1, y: 123}) // 在调用函数的时候也需要传递指定类型的数据

所以通过以上的例子可以看出:

  • 在开发的过程能中使用 Ts 静态数据类型机制 可以发现潜在的问题
  • 开发过程中 通过 Ts 的机制可以更好优化代码提示 方便开发者
  • 通过数据类型的限定 代码的语义更加清晰易懂

Ts 的开发环境搭建

  • Ts 开发需要有 NodeJs 的环境

  • vs code 中的 Ts 代码插件推荐

    • prettier
      • 配置保存操作(command + s) 自动格式化

  • 在系统中 全局安装 TypeScript

    • 安装命令

      1. sudo npm install typescript -g

      Windows 不用输入 sudo

    • 验证 typescript 是否安装成功 编译一个 ts 文件即可 如果可以编译得到一个 js 文件 则证明 typescript 安装成功

      1. tsc 文件名

      2. tsc demo.ts

  • 全局安装 ts-node

    在以上的操作中 我们首先将 ts 文件编译成为 js 文件 通过 node 或者 浏览器 的环境执行 js 这样的操作步骤比较繁琐 所以安装 ts-node 可以直接执行 ts 文件省去了编译 ts 的步骤

    1. sudo install ts-node -g

    Windows 不用输入 sudo

    运行 Ts 文件

    1. ts-node 文件名

    2. ts-node demmo.ts

静态类型深入理解

例子: 

  1. const count: number = 2019

从以上的列子中可以看出定义了一个 number 类型的静态变量 定义好变量之后 在使用的时可以得到所有静态变量的属性以及方法 【这个所有编辑器开发 js 通病 明明只需要时候字符串的方法 却把所有的类型的方法全部返回了, 这个问题在 Ts 就有了非常方便的解决 】

  1. const point: Point = {

  2.   x: 3,

  3.   y: 4

  4. }

  5. 

  6. // 在使用 point 点的时候 就可以很好的得到想要的东西

ts 中使用静态类型的变量方式可以方便快捷的获取指定类型下的方法和属性 也对语法有更好的智能提示 方便开发

静态类型使得我们更加直观的判断变量或者对象属性的内容是什么

Ts 中的基础类型和对象类型

Ts 中的基础类型: null undefined symbol boolean void number string

  1. const count: number = 123

  2. const teacherName: string = 'Dell'

Ts 中的对象类型

  1. const teacher: {

  2.   name: string;

  3.   age: number;

  4. } = {

  5.   name: 'string',

  6.   age: 18

  7. }

数组 数组类型可以规定数据类型

  1. const numberArr: number[] = [1,2,3] // 这个数组只能存放数字类型的值 其他类型的值存放不可以

类

  1. class Person {}

  2. const dell:Person = new Person()

方法

  1. function getTotal: () => number = () => 123

  2. 

  3. // 这个方法的意思是: 有一个方法 getTotal 返回值是 number 类型

Ts 中的类型推断(type annitation)和类型注解(type inference)

什么是类型推断和类型注解呢??

看下例子:

  1. let count: number;

  2. count = 123;

  3. 

  4. let countInference = 123

在声明 count 变量的时候 我们通过 number 类型来告诉 Ts count 变量存放的是什么类型的数据 这就是 类型注解**

而我们在声明 countInference 变量的时候 手动给 countInference 赋值为 123 当我们将鼠标光标移至变量上的时候编辑器会提示 number 所以这里 Ts 会推断出变量的数据类型 这种有 Ts 推断称为 类型推断

所以有以下的总结:

Ts 能够自动分析边变量的类型 我们就不需要做什么 因为有类型推断

Ts 无法分析的变量类型 我们就需要使用类型注解

有以下例子:

  1. const firstNumber = 1

  2. const secondNumber = 2

这里是否必要使用类型注解呢？？ >> 没有必要 因为 Ts 会自动的推断数据类型 我们就使用 Ts 数据类型推断即可

  1. const total = firstNumber + secondNumber

这里的 total 变量是否必要类型推断呢？？ 没有必要 因为 Ts 会自动的推出数据类型

Ts 作用就是让项目中的变量和属性都有数据类型

  1. function getTotal(first: number, second: number): number {

  2.   return first + second

  3. }

  4. 

  5. const total = getTotal(1, 2)

这里函数中的 first second 形式参数是否有必要加上类型注解呢?? >> 这里就有必要了

因为形式参数始终不知道这里需要传入的数据类型是什么 所以这需要类型注解 在 Ts 中还可以规定 方法的返回值类型是什么 以上的函数例子中可以返回的是 number 类型 所以在使用 total 接收返回值 就不需要类型注解了

定义变量时候的注意的情况 

  1. const count = 124 // 这个没有问题

  1. const count

  2. count = 123 // 声明常量必须要在一行 这里会报错

  1. // let count        // 但是在这里就是 any 类型(任何类型) 所以这样声明的时候我们需要使用类型注解

  2. let count: number

  3. count = 123 // 这里声明变量 隔行赋值没有问题

Ts 中函数相关类型

js 中定义函数的方式:

  1. function hello() {}

  2. cosnt holle = function() {}

  3. const holle = () => {}

Ts 可以完美支持 Js 中所有的函数的声明方式

  1. function total(first, second): number {

  2.   return first + second + ''

  3. }

  4. 

  5. const result = total(12, 34)

上节说过函数形参最好需要加上类型注解 返回值的话可以通过类型推断 在上面的例子中 我们已经规定函数的返回值为 number 类型 但是函数的返回值为字符串类型 这个 Ts 机会提示报错

所以函数的返回值最好还是加上类型注解 来约束函数的返回值

函数的返回类型除了 基本的数据类型之外 还可以有 void 类型 注解为 没有返回值

  1. function sayHolle(): void {

  2.   console.log('holle')

  3. }

在上述的代码已经声明函数没有返回值 如果在代码上标记 reutrn 数据 就会提示报错

注: 在 Ts 中还有一种特殊的声明方式 never 代表函数不能执行到最后

  1. function errEmitter(): never {

  2.   throw new Error()

  3.   console.log('哈哈哈') // 这句代码就执行不到

  4. }

  5. 

  6. function errEmitter(): never {

  7.   whild(true){}

  8.   console.log('这句代码也是执行不到')

  9. }

Ts 函数定义的方法:

  1. const func = (str: string): number => {

  2.   return parseInt(str, 10)

  3. }

  4. 

  5. // <=>

  6. const func1:(str:string) => number = (str) => {

  7.   return parseInt(str, 10)

  8. }

以上函数的声明可以不用 类型注解函数的返回值

Ts 中函数针对数据解构的情况
```typescript
// 这是在 js 使用 解构语法声明变量的方式
function add({first, second}) {
return first + second
}

// 在 Ts 中如何声明 解构变量的数据类型呢？？
// 这才是正确解构的语法
function add({first, second}:{first: number, second: number}):number {
return first + second
}

const result = add({first: 12, second: 20})

  1. 

  2. 

  3. 

  4. Ts 中还有特殊类型 Date

  5. 

  6. ```typescript

  7. const data: Date = new Date()

其他case

  • json 字符串

    1. const rawDate = '{"name": "dell"}'

    2. const newDate = JSON.Parse(rawDate) // 此时虽然通过 JSON 方法转化但是 Ts 实现不了类型推断 需注解

    1. interface Person {

    2.   name: string

    3. }

    4. 

    5. const rawDate = '{"name": "dell"}'

    6. const newDate:Person = JSON.Parse(rawDate)

  • 针对变量类型会转化的情况

    如: 如变量开始为 number 类型后期可以需要其成为 string 类型或其他类型如何定义

    1. let temp: number | string = 123 // 这里声明变量后期可能是 string 也可以是 number 类型

Ts 中的数据和元组

Ts 中的数组和 Js 中的数组定义,使用方式是完全一样的 但是在 Ts 中的数组存在数据类型

如: 

  1. const numberArr = [1,2,3]

  2. // 这里的数组的项值全是 number 类型 Ts 会自动推断这里的数组类型是 number 类型

自定义数组的数据类型: 定义了单一类型之后 数组中就只能存放单一数据类型的值

  1. // 我们可以自定义数组的数据类型

  2. const stringArr: string[] = ['1', '2', '3']

如何存放不同的数据类型的值呢?

  1. // 这里就只能存放数字和字符类型的值

  2. const Arr: (string | number)[] = ['liu', 'xiao', 'jian', 12, 23, 34]

数组中存在特殊的值存放

  • undefined 类型
  1. // 这里只能存放 undefined 类型

  2. const undefinedArr: undefined[] = [undefined]
  • 数组中存在对象的情况
  1. // 这里代表着 数组中存放对象 对象上必须存在一个 name 属性

  2. const objectArr: {name: string}[] = [{

  3.   name: 'liuxiaojian'

  4. }]

但是如果数据的中的对象上的属性值过多 我们通过这种方式定义 就显得有点冗余了 那我们如何优雅的处理数组对象上的属性过多的情况呢??

通过类型别名 type 通过类型别名可以属性提出单独管理 这样使得在使用类型别名的时候显得优雅许多, 但是使用类型别名必须按照指定的要求传参 多写少写都不可以

  1. // 类型别名

  2. type User = {name:string, age: number, sex: number}

  3. 

  4. const objectArr:User[] = [{

  5.   name: '刘小贱',

  6.   age: 20,

  7.   sex: 2

  8. }]

  9. // 这种方式就显得优雅许多

除了使用 类型别名 type 在 ts 中还可以使用 接口 interface 也可以使用 类 的方式

Interface 后面会详细讲解 现在先看下 类的情况

  1. class Teacher {

  2.   name: string;

  3.   age: number;

  4. }

  5. 

  6. const objectArr: Teacher[] = [

  7.   {

  8.     name: 'dell',

  9.     age: 20,

  10.   }

  11. ]

为什么这里的数组每项是 class 中的内容不会报错 因为 Ts 不会强制要求每项都是类实例化的出来的东西, 这里数组每项值里面都有一个 name， age 属性 和类中的是相同的 所以没有问题 但是如果多加属性就会有问题

  1. class Teacher {

  2.   name: string;

  3.   age: number;

  4. }

  5. 

  6. const objectArr: Teacher[] = [

  7.   new Teacher(),

  8.   {

  9.     name: 'dell',

  10.     age: 20,

  11.   }

  12. ]

Ts 中的元组(tuple):

看下 我们之前是怎么约束数组的每项的值:

  1. const teacherInfo: (number | string)[] = [3, 'string', 18]

这种方式约束数组中每项值呢 只能限制里面的值除了 string 和 number 类型 那么对象每项值都需要做数据类型限定如何处理呢 >>> 元组

元组: 元组的作用就是 限定数组中的每项值的数据类型

如何定义元组呢:

  1. const teacherInfo: [string, string, number] = ['Dell','male', 18]

通过这种方式就可以限定数组中每项的值的数据类型

元组常见使用地点: 表格数据

  1. const teacherList: [string, string, string][] = [

  2.   ['刘小贱', '男', 18], 

  3.   ['刘大贱', '女', 28],

  4.   ['刘小贱', '男', 18],

  5. ]
评价
大概你身上总有我喜欢的味道，所以我一见你就开心的笑
博主信息
排名
21
文章
27
粉丝
11
评论
12
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术