关于TypeScript的一些总结

吐槽君 分类:javascript

1.由于javascript允许隐式类型转换,属于弱类型且动态类型语言。缺失了类型系统的可靠性。所以在大型项目中,我们一般使用TypeScript.

TypeScript 比起 JavaScript 有什么优点?

提供了类型约束,因此更可控、更容易重构、更适合大型项目、更容易维护,TypeScript大大提高代码的可靠程度。在编译过程就发现类型语法错误,而不是等到运行的时候。

2.强类型与弱类型(类型安全)

  • 强类型:语言层面限制函数的实参类型必须与形参类型相同,有更强的类型约束,强类型语言中不允许任意的隐士类型转换。
  • 弱类型:语言层面不会限制实参的类型,几乎没有什么约束,弱类型语言允许任意的隐式类型转换。

强类型的优势:

  • ①错误更早暴露,在编码阶段就能发现错误
  • ②代码更加智能,编码更准确。知道变量类型,编译器才能给出提示。
  • ③重构更加牢靠
  • ④减少不必要的类型判断

3.类型系统(静态类型与动态类型)

  • 静态类型:一个变量声明时它的类型就是明确的,声明过后,它的类型就不允许再修改。
  • 动态类型:在运行阶段才能够明确变量的类型,变量的类型可以随时发生变化。

4.Flow:JavaScript的类型检查器;

//初始化一个package.json
yarn init --yes
//安装flow-bin
yarn add flow-bin --dev
//安装flow初始化文件
yarn flow init
 

代码头部//@flow,并对类型进行注解a:Number,b:number,然后执行yarn flow可判断类型错误,如有类型错误,终端会出现详细错误提示。

//@flow
function sum(a:Number,b:number){
    return a + b 
}
sum(100,100)
 

5.TypeScript安装配置

安装命令

//初始化一个package.json
yarn init --yes
//安装typescript
yarn add typescript --dev
//生成同等js文件并在终端反馈错误
yarn tsc 文件名
 

使用TypeScript给name添加类型。

图片.png

TypeScript配置文件

//生成tsconfig.json文件
yarn tsc --init
//错误以中文的形式展示
yarn tsc --locale zh-CN
 

6.TypeScript一些常用类型

①void(空值),在函数没有返回值的时候去标注函数的类型,它只能够存放null或者是undefined。严格模式下只能是undefined。

const e:viod = null/undefined
 

②object,其类型可以是对象,数组,函数

const foo: object = function () {}//[]//{}
 

③纯数字组成的数组

//表示纯数字组成的数组类型
const arr1:Array<number> = [1,2,3]
const arr2:number[]=[1,2,3]
 

④元组类型:明确元素数量以及元素类型的数组。

const tuple:[number,string]=[18,'czd']
const age = tuple[0]
const name = tuple[1]
 

⑤枚举类型,会生成双向键值对对象。

enum Color {
  Red,
  Green,
  Blue
}enum Color {
  DarkRed = 3,
  DarkGreen,
  DarkBlue
}

 
//编译后
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
(function (Color) {
    Color[Color["DarkRed"] = 3] = "DarkRed";
    Color[Color["DarkGreen"] = 4] = "DarkGreen";
    Color[Color["DarkBlue"] = 5] = "DarkBlue";
})(Color || (Color = {}));

 
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容