Typescript 入门 | 青训营笔记

FlyBoat
61 阅读3分钟

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

Typescript 入门

重点知识简介

  • 为什么是Typescript
  • Typescript基本语法

详细知识介绍

一、什么是Typescript

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

Typescript源自于Javascript，是js的超集，兼容所有js的特性

  • 原本的Javascript是动态语言，弱类型
  • Typescript是静态语言，弱类型

动态类型语言是在执行时才能确定类型，静态类型会在执行前提前声明好变量类型；弱类型的特征是类型转换，执行的时候会进行隐式转换，如字符串和数字相加时

静态语言具有如下优势：

  • 可读性增强，可以基于语法解析TSDoc生成文档，并且无需注释也能知道该变量的类型，有类型提示
  • 可维护性增强，在编译Typescript时就能将大部分的错误暴露出来，语法类型错误，拼写错误等

毫无疑问，静态语言Typescript更有利于开发大型项目和维护项目

二、基本语法

1. 基础数据类型

与Javascript的基础类型一样，Ts中也有相应的表达方式，并且在声明变量时也声明了数据类型

image.png

对象类型比较复杂，也是通过{}如下：声明了一个接口，并实现了该接口

image.png

在interface里，变量名在前，类型在后

函数类型： 为函数声明类型有两种方式

  • 直接在函数上做一个类型的补充（参数类型，返回值类型）
  • 给函数变量赋值一个类型的声明

image.png 在第二种方式中，代码一行比较长，对结构不太友好，因此我们还可以用interface来声明函数，这样就比较清晰明了

image.png

函数重载 实现根据传入值的类型来返回特定的类型

?:表示可缺省标志 image.png

数组类型：

image.png

常见的使用中，会使用第一种和第二种来定义数组类型

图中type关键词？其实是一个别名，用来定义更加复杂的对象类型，如下图所示

image.png

Typescript泛型：

TS中同样提供了不预先确定具体的类型，在使用的时候再指定类型的一种特性

type Fan = <T>(target:T) => T[];

泛型不仅可以使用在函数中，还可以在接口，类，别名中使用

image.png

泛型的两个高级语法，泛型约束和泛型的默认类型

有时候我们会希望，泛型可以在使用时确定，但要有一定的约束条件

image.png 注意上下两种是有一点区别的，第一个是函数，第二个是别名，看泛型出现的位置，一个在等号后，一个在等号前

  • 通过 extends 关键字实现泛型约束，限定类型
  • 在泛型后通过等号来实现默认类型

类型别名与类型断言

类型别名在前面已经提到过，通过type表示对象的别名类型

image.png

字符串/数字 字变量类型

image.png

小结

对Typescript的基础类型做一个简单引入介绍，了解Typescript的必要性。

在typescript的官网了解更多： www.typescriptlang.org/zh/

avatar
文章
阅读
粉丝