TypeScript入门|【青训营笔记】

86 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第9天

01-语言介绍

今天是TypeScript入门课程,在了解语法前我们需要知道什么是TypeScript?与javaScript有什么区别。
首先TypeScript是微软在2012年10月发布的一门编程语言,随后angular,react,vue均支持使用TypeScript的开发。 其次为什么要选择TypeScript?TypeScript是源于javaScript,那他们有什么区别呢。 JavaScript是一门动态的、弱类型的语言,而TypeScript是静态的、弱类型的语言。

动态类型语言:在执行阶段才确定类型的匹配。
静态类型语言:提前进行编译确定类型的匹配。

why.png

02-基本语法

1.基础类型

与JavaScript相比,在变量名之后使用':'引号声明变量值的类型。

(1)基础数据类型

基础数据类型.png

(2)对象数据类型

对于对象数据类型,我们需要自定义一个对象类型,使用 interface关键字。如图,我们定义了一个Ibytedancer对象类型,readonly 设置jobId为只读属性,name的值为字符串,sex限定了值,hobby为可选属性,任意属性[key:string]:ang;限定属性名为字符串,值为any任意类型的数据。 interface命名类型时我们约定使用大写的I开头,如:Ibytedancer

对象类型.png

(3)函数类型

函数类型我们注意的就是形参和返回值的数据类型,如图返回值的数据类型在大括号外使用引号定义,箭头函数可直接用箭头定义。也可以使用interface关键字定义一个函数类型。 函数类型.pngjava方法重载一样,TypeScript有函数重载

函数重载.png 我们也可以interface定义一个函数类型来实现函数重载。

函数重载2.png

(4)数组类型

有多种定义方法,要注意的是第二种,利用Array+<> 组成的泛型表示:Record <string,number> ---对象类型中属性值的数据类型定义成number。

数组类型.png

(5)Type补充类型

首先是:
空类型void,表示无赋值
任意类型any,所有类型的子类型
枚举enum,枚举值和名的映射对应关系 type补充类型.png 泛型: 注意函数的泛型定义和接口,类的定义的位置不同 Type泛型.png 泛型的一些高级用法:
type关键字定义类型别名
extends限定泛型包含的数据类型
<T =number>表示泛型默认为number数据类型
泛型约束.png

(6)类型别名,断言

我认为类型别名就是自定义了一种数据类型,如图定义一个数组,数组元素是对象类型,对象key属性的值为字符串或其他属性值的类型任意,这种数据类型使用type关键字命名为IObjArr。 断言就是明确指定一个变量的数据类型。 类型别名,断言.png

(7)字面量

直接限定值 字面量.png

2.高级类型

(1)联合、交叉类型

将属性拆分为个体,利用‘|&’组合。 联合,交叉类型.png

(2)类型保护和类型守卫

类型守卫和类型保护就是增加一个对数据的类型判断,从而确保代码运行不会报错。 类型守卫.png

类型保护.png 例子:合并两个对象 js的两种方法 子集.png 指定返回值的类型是ITargetObj 子集1.png 利用Partial类型实现,Partial类型已经内置在TypeScript中。 子集2.png

函数的返回值类型

例子: 结果为入参函数的结果,在不知道func的类型时,我们可以利用泛型来匹配结果的数据类型 函数返回值类型.png extends在声明中表示泛型约束限定,在泛型中表示类型推断,infer出现在类型推断中,可以用于指代类型。 返回值1.png

03-工程应用

使用npm包来进行TypeScript的转换。 TSc.png