这是我参与「第四届青训营 」笔记创作活动的第9天
01-语言介绍
今天是TypeScript入门课程,在了解语法前我们需要知道什么是TypeScript?与javaScript有什么区别。
首先TypeScript是微软在2012年10月发布的一门编程语言,随后angular,react,vue均支持使用TypeScript的开发。
其次为什么要选择TypeScript?TypeScript是源于javaScript,那他们有什么区别呢。
JavaScript是一门动态的、弱类型的语言,而TypeScript是静态的、弱类型的语言。
动态类型语言:在执行阶段才确定类型的匹配。
静态类型语言:提前进行编译确定类型的匹配。
02-基本语法
1.基础类型
与JavaScript相比,在变量名之后使用':'引号声明变量值的类型。
(1)基础数据类型
(2)对象数据类型
对于对象数据类型,我们需要自定义一个对象类型,使用 interface关键字。如图,我们定义了一个Ibytedancer对象类型,readonly 设置jobId为只读属性,name的值为字符串,sex限定了值,hobby为可选属性,任意属性[key:string]:ang;限定属性名为字符串,值为any任意类型的数据。
interface命名类型时我们约定使用大写的I开头,如:Ibytedancer
(3)函数类型
函数类型我们注意的就是形参和返回值的数据类型,如图返回值的数据类型在大括号外使用引号定义,箭头函数可直接用箭头定义。也可以使用interface关键字定义一个函数类型。
与
java方法重载一样,TypeScript有函数重载
我们也可以interface定义一个函数类型来实现函数重载。
(4)数组类型
有多种定义方法,要注意的是第二种,利用Array+<> 组成的泛型表示:Record <string,number> ---对象类型中属性值的数据类型定义成number。
(5)Type补充类型
首先是:
空类型void,表示无赋值
任意类型any,所有类型的子类型
枚举enum,枚举值和名的映射对应关系
泛型:
注意函数的泛型定义和接口,类的定义的位置不同
泛型的一些高级用法:
type关键字定义类型别名
extends限定泛型包含的数据类型
<T =number>表示泛型默认为number数据类型
(6)类型别名,断言
我认为类型别名就是自定义了一种数据类型,如图定义一个数组,数组元素是对象类型,对象key属性的值为字符串或其他属性值的类型任意,这种数据类型使用type关键字命名为IObjArr。
断言就是明确指定一个变量的数据类型。
(7)字面量
直接限定值
2.高级类型
(1)联合、交叉类型
将属性拆分为个体,利用‘|&’组合。
(2)类型保护和类型守卫
类型守卫和类型保护就是增加一个对数据的类型判断,从而确保代码运行不会报错。
例子:合并两个对象
js的两种方法
指定返回值的类型是ITargetObj
利用Partial类型实现,Partial类型已经内置在TypeScript中。
函数的返回值类型
例子:
结果为入参函数的结果,在不知道func的类型时,我们可以利用泛型来匹配结果的数据类型
extends在声明中表示泛型约束限定,在泛型中表示类型推断,infer出现在类型推断中,可以用于指代类型。
03-工程应用
使用npm包来进行TypeScript的转换。