TypeScript的发展与基本语法　｜　青训营笔记

嘉心兔
90 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 ４ 天

一、typescript的定义解析

typescript源于JavaScript，JavaScript是执行了才知道数据类型，弱类型语言是对数据类型比较严格

image.png

ｔｓ的特性：ｔｓ是ｊｓ的超集，意味着在ｊｓ中能运行的在ｔｓ也能运行 image.png

二、typescript的基本语法

基础数据类型

左边是ｊｓ定义方式，右边是ｔｓ的定义方式，就是在变量名后加冒号和数据类型 image.png

对象数据类型

定义interface接口时名称约定俗成前面加一个字母Ｉ

只读属性readonly：无法修改

可选属性：在冒号前加问号

任意属性：可以后期自己添加的属性

image.png

函数声明类型

一种是直接在函数上进行类型的补充，一种是给函数的变量进行一个类型的声明 image.png

函数重载

函数后面的冒号：数据类型是说明函数的返回值类型是什么样的，在interface中有三种类型可选，如果是string的话会．．．如果是ｄａｔｅ会．．． image.png

数组类型

数组本身是一种特殊的object image.png

typescript补充类型

枚举类型中ａｄｄ和＋是形成了映射 image.png、

typescript泛型

尖括号的内容是泛型 image.png

用extends来作为泛型约束

用＝来作为泛型的默认值

前后者还是有差别的，前者是函数的泛型后者是类型的一个泛型 image.png

image.png

字符串／数字　字面量

指定字面量 image.png

typescript高级类型

联合／交叉类型

改进前：可以看到右边的定义是比引用代码要长，且定义type类型为string，但是只有history和story image.png

改进后： image.png

类型保护与类型守卫

改进前：这段代码会报错，因为联合类型是需要两个之间有共同点，但是IA和IB是没有共同属性的 image.png

改进后： image.png

高级类型

函数的返回值类型

image.png

image.png

工程应用

－　webpack

image.png

－ｎｏｄｅｊｓ

image.png

avatar
文章
阅读
粉丝