TypeScript

何为TypeScript

一、编程语言类型

  • 动态类型语言(Dynamically Typed Language)

    • 类型的检查是在运行时才做
    • 例子---JavaScript、Ruby、Python
  • 静态类型语言(Statically Typed Language)
    • 类型检查是在运行前的编译阶段
    • 例子---Java、c、c++

TypeScript提前了类型检查的时机,它是静态弱类型语言

二、TypeScript特性

TypeScript(简称ts)是一种由微软开发的自由和开源的编程语言。它是 Javascript 的一个超集,扩展了JavaScript的语法. 其本质上是向Javascript语言添加了可选的静态类型和基于类的面向对象编程

  • JavaScript that scales
  • 静态类型风格的类型系统
  • 从es6到es10以至于exnext的语法支持
  • 兼容各种浏览器、系统、服务器的开源语言

三、为什么使用TypeScript

当使用一个语言库的时候我们是要有这个需求的时候才用,就像一个组件的状态管理不复杂你就没必要用reduxvuex一样,而TypeScript正是能够解决我们开发过程中的一些痛点:

  • 程序更容易理解

    • 能够知道函数或者方法输入输出的参数类型,外部条件
    • 不用等运行的时候才能知道数据的类型
    • 更容易理解别人的代码不用询问
  • 效率更高
    • 在不同的代码块和定义中进行跳转
    • 代码自动补全
  • 更少的错误
    • 编译期间能发现大量错误
    • 杜绝常见的错误(...undefined)
  • 非常好的包容性
    • 完全兼容JavaScript
    • 第三方库可以直接编写ts文件

TypeScript的实践

一、安装

使用npm管理

npm install -g typescript

安装完之后可执行tsc <文件名>.ts命令生产.js的文件,在执行过程中即使因为语法不对导致编译过程报错,但还是会生成.js文件

二、数据类型

Javascript 类型分类:

① 原始数据类型 - primitive values:

  • Boolean
  • Null
  • Undefined
  • Number
  • BigInt
  • String
  • Symbol

② Object

undefinednull==下是相等的,但在全等===条件下是不等的,Null类型,代表“空值”,代表一个空对象指针;Undefined类型,当一个声明了一个变量未初始化时,得到的就是undefined。

其中null表示"没有对象",即该处不应该有值,典型用法是:

  • 作为函数的参数,表示该函数的参数不是对象
  • 作为对象原型链的终点

undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:

- 变量被声明了,但没有赋值时,就等于undefined

- 调用函数时,应该提供的参数没有提供,该参数等于undefined

- 对象没有赋值的属性,该属性的值为undefined

- 函数没有返回值时,默认返回undefined

基于Javascript的数据类型,我们在写TypeScript的时候就会严格按照其类型定义数据,这样才有便于我们代码的维护与规范

1、原始数据类型:

let isType: boolean = true
let count: number = 123
let userName: string = 'chenchenchen'
let u: undefined = undefined
let n: null = null
let notSure: any = 1 //可为任何类型
notSure = "rewq"
notSure = false

2、Object类型:

a、数组:

let arrOfNumber: number[] = [1,2,3] //数字数组
arrOfNumber.push(4) function test() {
console.log(arguments) //类数组
console.log(arguments.length) //长度
arguments.forEach(item => {}) //报错
let arr: any[] = arguments //报错,不能把类数组赋值给数组
}

b、元组:

let user: [string,number] = ["chen",66] //元组
const arr: (number | string)[] = [1,"2",3] //数组

元组相比于数组来说是明确的知道有几个子元素也就是长度固定,而且每个子元素是什么类型,一般元组的运用场景在导入csv的数据格式的时候有大用

const memberList: [string,string,number][] = [
["abb","bcc",12],
["cvv","asd",24]
]

c、interface接口:

let interface Animal {
readonly id: number; //只读不写,与const类似
name: string;
age?: number; //该属性不是必须
[propName: string]: any; //还可以有其他的属性,类型是string,值是任意值
say(): string; //还可以加方法
} let dog: Animal = {
name: "duoduo",
age: 6
} dog.id = 9527 //报错,只读不写 //interface一般可以做到类型别名的作用
interface Point {x: number, y: number} //与类型别名是一样的效果
type Point {x: number, y: number} //类型别名 function Pythagorean(data: Point) { //类型别名,一眼看出参数的构造
return Math.sqrt(data.x **2 + data.y **2)
} Pythagorean({ x : 4, y : 5})

类型别名和接口的区别是有的,接口只能是对象类型,而类型别名还可以是其他类型

d、Function函数

//解构写法
function add({first , second} : {first : number; second : number}):number {
return first + second
} const add = (x:number,y:number,z?:number):number
{ //约定输入输出都为数字的函数,z为可选参数
if(typeof(z) == number) {
return x+y+z
}else {
return x+y
}
} let add2:string = add //false,函数类型不能赋值给字符串类型
let add3:(x:number,y:number,z?:number) => number = add //true,一模一样的函数类型可以赋值 function operate(): void { //不进行return的函数
console.log("sadasd")
}

接口类型还可以描述函数类型

interface Itest{
(x:number,y:number,z?:number): number
}
let add4:Itest = add //true

e、联合类型union types

let numberorstring:number | string
numberorstring = "abc"
numberorstring = 123

类型断言用于处理类型不确定的情况(编译器无法判断类型),强行让编译器按照你规定的类型处理

function getlength(input:string | number):number {
const str = input as string
if(str.length) {
return str.length
}else {
const number = input as number
return number.toString().length![Alt text](./docker.md) }
}

TypeScript也提供了Type Guard这种机制来确认具体类型

f、类Class

类(Class):定义了一切事物的抽象特点,类似于蓝图(比如汽车的一张设计图)

对象(Object):类的实例(造出来的具体的汽车)

class Car { //定义类
color: string
constructor(color) { //在类实例化的时候才会被执行
this.color = color
}
public start() { //开放的方法
console.log(`this car is ${this.color}`)
}
} const benz = new Car("black") class eCar extends Car { //继承类
run() {
console.log(`this running car is ${this.color}`)
}
} const tesla = new eCar("white") class aCar extends Car { //继承类,重写方法
static hight = "100" //静态属性
constructor(color) {
super(color) //子类的构造函数必须得调用父类的构造函数
console.log(this.color)
}
start() {
console.log(`this aCar is ${this.color}`)
}
} const bmw = new aCar("blue") console.log(benz.start()) //this car is black
console.log(tesla.start()) //this car is white
console.log(tesla.run()) //this running car is white
console.log(bmw.start()) //blue , this aCar is blue
console.loh(aCar.hight) //100 class Person {
constructor(private _name: string) { //定义了一个私有属性name }
get name() { //可以让外部访问私有属性
return this._name + ' 加密'
}
set name() { //可以在外部赋值,但一般保护类的私有属性
const realName = name.split(' ')[0] // chen
this._name = realName //私有属性_name还是"chen"
}
} const person = new Person("chen")
console.log(person.name); //chen 加密
person.name = 'chen 加密'
console.log(person.name) //chen 加密

一般我们通过类型注解类型推断来确认数据的类型,例如

//类型注解
let count: number;
count = 123 //类型推断
let countInference = 123

一般当ts无法自动分析变量类型的话,我们就需要类型注解来进行标注

Typescript进阶之路的更多相关文章

  1. JavaScript进阶之路(一)初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  2. OpenCV进阶之路:神经网络识别车牌字符

    1. 关于OpenCV进阶之路 前段时间写过一些关于OpenCV基础知识方面的系列文章,主要内容是面向OpenCV初学者,介绍OpenCV中一些常用的函数的接口和调用方法,相关的内容在OpenCV的手 ...

  3. MVC进阶之路:依赖注入(Di)和Ninject

    MVC进阶之路:依赖注入(Di)和Ninject 0X1 什么是依赖注入 依赖注入(Dependency Injection),是这样一个过程:某客户类只依赖于服务类的一个接口,而不依赖于具体服务类, ...

  4. 【SSH进阶之路】Hibernate映射——多对一单向关联映射(四)

    [SSH进阶之路]Hibernate基本原理(一) ,小编介绍了Hibernate的基本原理以及它的核心,採用对象化的思维操作关系型数据库. [SSH进阶之路]Hibernate搭建开发环境+简单实例 ...

  5. 【SSH进阶之路】一步步重构容器实现Spring框架——彻底封装,实现简单灵活的Spring框架(十一)

    文件夹      [SSH进阶之路]一步步重构容器实现Spring框架--从一个简单的容器開始(八)      [SSH进阶之路]一步步重构容器实现Spring框架--解决容器对组件的"侵入 ...

  6. 2017PHP程序员的进阶之路

    2017PHP程序员的进阶之路 又是一年毕业季,可能会有好多毕业生即将进入开发这个圈子,踏上码农这个不归路.根据这些年在开发圈子总结的LNMP程序猿发展轨迹,结合个人经验体会,总结出很多程序员对未来的 ...

  7. 浅谈Android进阶之路

    过去十年是移动互联网蓬勃发展的黄金期,相信每个人也都享受到了移动互联网红利,在此期间,移动互联网经历了曙光期.成长期.成熟期.现在来说已经进入饱和期.依然记得在 2010-2013 年期间,从事移动开 ...

  8. 处女作《Web全栈开发进阶之路》出版了!

    书中源码下载地址:https://github.com/qinggee/WebAdvanced 01. 当初决定写博客的原因非常的纯洁:只要每个月写上 4 篇以上博客,月底的绩效奖金就多 500 块. ...

  9. Android研发进阶之路

    前言 移动研发火热不停,越来越多人开始学习android开发.但很多人感觉入门容易成长很难,对未来比较迷茫,不知道自己技能该怎么提升,到达下一阶段需要补充哪些内容.市面上也多是谈论知识图谱,缺少体系和 ...

随机推荐

  1. [转]ROS中使用message_filters进行多传感器消息同步

    转:http://www.rosclub.cn/post-1030.html 最近实验室老师在做一个多传感器数据采集实验,涉及到了消息同步.所以就学习了ROS官网下的消息同步工具message_fil ...

  2. HTTP 协议中的并发限制及队首阻塞问题

    本文转载自HTTP 协议中的并发限制及队首阻塞问题 串行连接 HTTP/0.9 和早期的 HTTP/1.0 协议对 HTTP 请求处理是串行化的.假如一个页面包含 3 个样式文件,同属于一个协议.域名 ...

  3. PHP中间件

    定义 首先什么是php的中间件? 根据zend-framework中的定义: 所谓中间件是指提供在请求和响应之间的,能够截获请求,并在其基础上进行逻辑处理,与此同时能够完成请求的响应或传递到下一个中间 ...

  4. SpringBoot Admin应用监控搭建

    简介 Spring Boot Admin 用于监控基于 Spring Boot 的应用,它是在 Spring Boot Actuator 的基础上提供简洁的可视化 WEB UI. 参考手册地址:htt ...

  5. pwn篇:攻防世界进阶welpwn,LibcSearcher使用

    攻防世界welpwn (搬运一篇自己在CSDN写的帖子) 链接:https://blog.csdn.net/weixin_44644249/article/details/113781356 这题主要 ...

  6. 中心化-ESB

    服务调用者与服务提供者通过企业服务总线相连接: ESB成为瓶颈:无论在性能上还是成本消耗上,ESB都会导致瓶颈出现.

  7. Markdown(3)Typora快捷键

    Typora(3)快捷键 一.快捷键列表 操作内容 快捷键 助记词 1. 标题 Ctrl + 数字 1-6 2. 段落 Ctrl + 数字 0 3. 粗体 Ctrl + B (B) Bold 4. 斜 ...

  8. 后端程序员之路 38、Scala入门

    Scala 是 Scalable Language 的简写,是一门多范式的编程语言. 语言特性:1.面向对象,所有值都是对象,类可以继承和组合:2.函数式,支持闭包,支持柯里化等等:3.静态类型,支持 ...

  9. MySQL:多表查询

    SELECT查询不但可以从一张表查询数据,还可以从多张表同时查询数据.查询多张表的语法是:SELECT * FROM <表1> <表2>,普通多表查询会获取M x N行记录,所 ...

  10. pytorch中多个loss回传的参数影响示例

    写了一段代码如下: import torch import torch.nn as nn import torch.nn.functional as F class Test(nn.Module): ...