Typescript入门| 青训营笔记

50 阅读2分钟

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

typescript见解

为什么需要TypeScript?

图片.png JavaScript是弱类型语言, 动态类型,很多错误只有在执行时才会被发现。 TypeScript也是弱类型语言,静态类型,它提供了一套静态检测机制, 可以帮助我们在编译时就发现错误。

图片.png

什么是typescript?

TypeScript是JavaScript的超集,它扩展了JavaScript,有JavaScript没有的东西。硬要以父子类关系来说的话,TypeScript是JavaScript子类,继承的基础上去扩展。

TypeScript特点

  • 支持最新的JavaScript新特特性
  • 支持代码静态检查
  • 支持诸如C,C++,Java,Go等后端语言中的特性 (枚举、泛型、类型转换、命名空间、声明文件、类、接口等)

搭建typescript学习环境

安装最新版typescript

npm i -g typescript

安装ts-node

npm i -g ts-node

创建一个 tsconfig.json 文件

tsc --init

然后新建index.ts,输入相关练习代码,然后执行 ts-node index.ts

tsconfig.json 文件配置项解析

  • target: ts要编译成的版本, 默认是 'es5', 如果改成 'es2015',那么 es6 就不会被编译了.

  • module: 输出的代码将会按照什么方式去模块化, 默认是 'commonjs',那么默认导入导出就是 require和 module.exports 的方式

  • outDir: ts文件编译后的文件夹, 一般是dist目录

  • rootDir: 需要编译的文件夹, 一般是 src

  • sourceMap: boolean类型值, 可以查找ts内部文件

  • strict: boolean类型, 开启会对类型检查非常严格, 每个值都需要声明类型

安装 typescript 开发工具

  • 推荐 vscode , 链接:code.visualstudio.com/

  • 官方也提供了一个在线开发 TypeScript 的编辑器——Playground。基于它,我们无须在本地安装环境,只需要一个浏览器即可随时学习和编写 TypeScript,同时还可以方便地选择 TypeScript 版本、配置 tsconfig,并对 TypeScript 实时静态类型检测、转译输出 JavaScript 和在线执行。对于刚刚学习 TypeScript 的人来说,也是一个不错的选择。

Typescript 基础语法

基础数据类型

如图,我们可以看到ts的类型定义:

图片.png

对象类型

图片.png

typescript编写约定中,通常会用I开头表示这是一个自定义类型,用于和普通的对象和类进行区分

函数类型

图片.png

函数重载

图片.png 如上代码,函数的编写形式可以说是非常的麻烦,那我们可以使用interface类型去实现。 图片.png

数组类型

数组类型声明方式:

  1. 类型[]
  2. 泛型表示方式:Array<类型>
  3. 元组表示方式:[类型,类型,类型]

tuple:元组就是固定长度的数组

  1. 接口表示方式

图片.png