首页
视频
资源
登录
原
精
TypeScript 的定义及其基础
4994
人阅读
2020/7/10 20:22
总访问:
95511
评论:
1
收藏:
0
手机
分类:
TypeScript
# TypeScript 的定义及其基础 ### 什么是 ts: [官方](https://www.tslang.cn/)解释: Ts 是 Js 类型的超集, 可以编译成为 Js 编译过后 Js 可以在任何平台的浏览器上面运行 Ts 是 Js 超集: 除了包含本身 Js 本身的语法之外 还有自己本身的语法新特性 Ts 的数据类型是静态的数据类型: 而 Js 本身是动态类型的语言 Js ```javascript let a = '123' a = 123 ``` 上面代码段中可以看出 变量 a 首先是 **字符类型** 然后是 **数字类型** 这种**变量的数据类型的动态的转化**称为**动态类型** Ts ```typescript let a = '123' a = 123 // 报错 ``` 上面代码中可看出 变量首先声明为 字符类型 后转换为 数字类型 但是在转换的过程中编辑器报错 所以在 Ts 中 **变量的数据类型是不可以动态的更改**的 故称其数据类型为 **静态类型** 所以**经过 Ts 开发的代码 必须要经过代码编译过后才可以在浏览器中运行** [官方在线编辑器](https://www.tslang.cn/play/index.html) ### Ts 带来了什么优势 我们先来看一下小例子 使用 Js 和 Ts 分别实现勾股定理 Js ```javascript function JsDemo(data) { return Math.sqrt(data.x ** 2 + data.y ** 2) } JsDemo({x: 1, y: 123}) ``` Ts ```typescript function TsDemo(data) { return Math.sqrt(data.x ** 2 + data.y ** 2) } // 光是这样写在编辑器就会报错 因为不知道 data 中的 x,y 是什么数据类型 // Ts 代码优化 // 限定传递的值的数据类型 function TsDemo(data: {x: number, y: number}) { return Math.sqrt(data.x ** 2 + data.y ** 2) } TsDemo({x: 1, y: 123}) // 在调用函数的时候也需要传递指定类型的数据 ``` 所以通过以上的例子可以看出: + **在开发的过程能中使用 Ts 静态数据类型机制 可以发现潜在的问题** + **开发过程中 通过 Ts 的机制可以更好优化代码提示 方便开发者** + **通过数据类型的限定 代码的语义更加清晰易懂** ### Ts 的开发环境搭建 + Ts 开发需要有 [NodeJs](https://nodejs.org/en/) 的环境 + vs code 中的 Ts 代码插件推荐 + prettier + 配置保存操作(command + s) 自动格式化 + 在系统中 全局安装 TypeScript + 安装命令 ```shell sudo npm install typescript -g ``` **Windows 不用输入 sudo** + 验证 typescript 是否安装成功 编译一个 ts 文件即可 如果可以编译得到一个 js 文件 则证明 typescript 安装成功 ```shell tsc 文件名 tsc demo.ts ``` + 全局安装 ts-node 在以上的操作中 我们首先将 ts 文件编译成为 js 文件 通过 node 或者 浏览器 的环境执行 js 这样的操作步骤比较繁琐 所以安装 ts-node 可以直接执行 ts 文件省去了编译 ts 的步骤 ```shell sudo install ts-node -g ``` **Windows 不用输入 sudo** 运行 Ts 文件 ```typescript ts-node 文件名 ts-node demmo.ts ``` ### 静态类型深入理解 例子: ```typescript const count: number = 2019 ``` 从以上的列子中可以看出定义了一个 number 类型的静态变量 定义好变量之后 在使用的时可以得到所有静态变量的属性以及方法 【这个所有编辑器开发 js 通病 明明只需要时候字符串的方法 却把所有的类型的方法全部返回了, 这个问题在 Ts 就有了非常方便的解决 】 ```typescript const point: Point = { x: 3, y: 4 } // 在使用 point 点的时候 就可以很好的得到想要的东西 ``` ts 中使用静态类型的变量方式可以方便快捷的获取指定类型下的方法和属性 也对语法有更好的智能提示 方便开发 **静态类型使得我们更加直观的判断变量或者对象属性的内容是什么** ### Ts 中的基础类型和对象类型 Ts 中的基础类型: null undefined symbol boolean void number string ```typescript const count: number = 123 const teacherName: string = 'Dell' ``` Ts 中的对象类型 ```typescript const teacher: { name: string; age: number; } = { name: 'string', age: 18 } ``` **数组** 数组类型可以规定数据类型 ```typescript const numberArr: number[] = [1,2,3] // 这个数组只能存放数字类型的值 其他类型的值存放不可以 ``` **类** ```typescript class Person {} const dell:Person = new Person() ``` **方法** ```typescript function getTotal: () => number = () => 123 // 这个方法的意思是: 有一个方法 getTotal 返回值是 number 类型 ``` ### Ts 中的类型推断(type annitation)和类型注解(type inference) 什么是类型推断和类型注解呢?? 看下例子: ```typescript let count: number; count = 123; let countInference = 123 ``` 在声明 count 变量的时候 **我们通过 number 类型来告诉 Ts count 变量存放的是什么类型的数据 这就是 类型注解**** 而我们在声明 countInference 变量的时候 手动给 countInference 赋值为 123 当我们将鼠标光标移至变量上的时候编辑器会提示 number 所以这里 **Ts 会推断出变量的数据类型 这种有 Ts 推断称为 类型推断** 所以有以下的总结: > **Ts 能够自动分析边变量的类型 我们就不需要做什么 因为有类型推断** > **Ts 无法分析的变量类型 我们就需要使用类型注解** 有以下例子: ```typescript const firstNumber = 1 const secondNumber = 2 ``` 这里是否必要使用类型注解呢?? >> **没有必要** 因为 Ts 会自动的推断数据类型 我们就使用 Ts 数据类型推断即可 ```typescript const total = firstNumber + secondNumber ``` 这里的 total 变量是否必要类型推断呢?? 没有必要 因为 Ts 会自动的推出数据类型 > **Ts 作用就是让项目中的变量和属性都有数据类型** ```typescript function getTotal(first: number, second: number): number { return first + second } const total = getTotal(1, 2) ``` 这里函数中的 first second 形式参数是否有必要加上类型注解呢?? >> **这里就有必要了** 因为形式参数始终不知道这里需要传入的数据类型是什么 所以这需要类型注解 在 Ts 中还可以规定 方法的返回值类型是什么 以上的函数例子中可以返回的是 number 类型 所以在使用 total 接收返回值 就不需要类型注解了 > **定义变量时候的注意的情况** ```typescript const count = 124 // 这个没有问题 ``` ```typescript const count count = 123 // 声明常量必须要在一行 这里会报错 ``` ```typescript // let count // 但是在这里就是 any 类型(任何类型) 所以这样声明的时候我们需要使用类型注解 let count: number count = 123 // 这里声明变量 隔行赋值没有问题 ``` ### Ts 中函数相关类型 js 中定义函数的方式: ```typescript function hello() {} cosnt holle = function() {} const holle = () => {} ``` > **Ts 可以完美支持 Js 中所有的函数的声明方式** ```typescript function total(first, second): number { return first + second + '' } const result = total(12, 34) ``` 上节说过**函数形参最好需要加上类型注解** **返回值的话可以通过类型推断** 在上面的例子中 我们已经规定函数的返回值为 number 类型 但是函数的返回值为字符串类型 这个 Ts 机会提示报错 > **所以函数的返回值最好还是加上类型注解 来约束函数的返回值** 函数的返回类型除了 基本的数据类型之外 还可以有 **void 类型 注解为 没有返回值** ```typescript function sayHolle(): void { console.log('holle') } ``` 在上述的代码已经声明函数没有返回值 如果在代码上标记 **reutrn 数据** 就会提示报错 > 注: 在 Ts 中还有一种**特殊的声明方式 never 代表函数不能执行到最后** ```typescript function errEmitter(): never { throw new Error() console.log('哈哈哈') // 这句代码就执行不到 } function errEmitter(): never { whild(true){} console.log('这句代码也是执行不到') } ``` Ts 函数定义的方法: ```typescript const func = (str: string): number => { return parseInt(str, 10) } // <=> const func1:(str:string) => number = (str) => { return parseInt(str, 10) } ``` > **以上函数的声明可以不用 类型注解函数的返回值** > **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}) ``` Ts 中还有特殊类型 Date ```typescript const data: Date = new Date() ``` 其他case + json 字符串 ```typescript const rawDate = '{"name": "dell"}' const newDate = JSON.Parse(rawDate) // 此时虽然通过 JSON 方法转化但是 Ts 实现不了类型推断 需注解 ``` ```typescript interface Person { name: string } const rawDate = '{"name": "dell"}' const newDate:Person = JSON.Parse(rawDate) ``` + 针对变量类型会转化的情况 如: 如变量开始为 number 类型后期可以需要其成为 string 类型或其他类型如何定义 ```typescript let temp: number | string = 123 // 这里声明变量后期可能是 string 也可以是 number 类型 ``` ### Ts 中的数据和元组 **Ts 中的数组和 Js 中的数组定义,使用方式是完全一样**的 但是在 **Ts 中的数组存在数据类型** 如: ```typescript const numberArr = [1,2,3] // 这里的数组的项值全是 number 类型 Ts 会自动推断这里的数组类型是 number 类型 ``` 自定义数组的数据类型: **定义了单一类型之后 数组中就只能存放单一数据类型的值** ```typescript // 我们可以自定义数组的数据类型 const stringArr: string[] = ['1', '2', '3'] ``` 如何存放不同的数据类型的值呢? ```typescript // 这里就只能存放数字和字符类型的值 const Arr: (string | number)[] = ['liu', 'xiao', 'jian', 12, 23, 34] ``` **数组中存在特殊的值存放** + undefined 类型 ```typescript // 这里只能存放 undefined 类型 const undefinedArr: undefined[] = [undefined] ``` + 数组中存在对象的情况 ```typescript // 这里代表着 数组中存放对象 对象上必须存在一个 name 属性 const objectArr: {name: string}[] = [{ name: 'liuxiaojian' }] ``` 但是如果数据的中的对象上的属性值过多 我们通过这种方式定义 就显得有点冗余了 那我们如何优雅的处理数组对象上的属性过多的情况呢?? > **通过类型别名 type** 通过类型别名可以属性提出单独管理 这样使得在使用类型别名的时候显得优雅许多, 但是使用类型别名必须按照指定的要求传参 多写少写都不可以 ```typescript // 类型别名 type User = {name:string, age: number, sex: number} const objectArr:User[] = [{ name: '刘小贱', age: 20, sex: 2 }] // 这种方式就显得优雅许多 ``` > **除了使用 类型别名 type 在 ts 中还可以使用 接口 interface 也可以使用 类 的方式** Interface 后面会详细讲解 现在先看下 类的情况 ```typescript class Teacher { name: string; age: number; } const objectArr: Teacher[] = [ { name: 'dell', age: 20, } ] ``` 为什么这里的数组每项是 class 中的内容不会报错 因为 Ts 不会强制要求每项都是类实例化的出来的东西, 这里数组每项值里面都有一个 name, age 属性 和类中的是相同的 所以没有问题 但是如果多加属性就会有问题 ```typescript class Teacher { name: string; age: number; } const objectArr: Teacher[] = [ new Teacher(), { name: 'dell', age: 20, } ] ``` Ts 中的元组(tuple): 看下 我们之前是怎么约束数组的每项的值: ```typescript const teacherInfo: (number | string)[] = [3, 'string', 18] ``` 这种方式约束数组中每项值呢 只能限制里面的值除了 string 和 number 类型 那么对象每项值都需要做数据类型限定如何处理呢 >>> **元组** > **元组: 元组的作用就是 限定数组中的每项值的数据类型** 如何定义元组呢: ```typescript const teacherInfo: [string, string, number] = ['Dell','male', 18] ``` 通过这种方式就可以限定数组中每项的值的数据类型 元组常见使用地点: **表格数据** ```typescript const teacherList: [string, string, string][] = [ ['刘小贱', '男', 18], ['刘大贱', '女', 28], ['刘小贱', '男', 18], ] ```
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
叼着奶瓶逛酒吧
大概你身上总有我喜欢的味道,所以我一见你就开心的笑
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
祈祷永无bug
8篇
初吻给了奶嘴
1篇
Vue课程笔记
3篇
ES6
5篇
TypeScript
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术