TypeScript定义及基本语法|青训营笔记

135 阅读2分钟

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

本堂课重点内容

  1. TypeScript的历史及定义解析
  2. TypeScript的优势解读
  3. TypeScript的基本语法

详细知识点介绍

1.什么是TypeScript?

  • 简而言之,TypeScript是JavaScript的超集,具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript;
  • 编译在执行前——静态类型;
  • 编译在执行时——动态类型;
  • 弱类型语言可以隐式类型转换;
  • TS与JS区别在于前者是静态类型后者是动态类型。

2.为什么是TypeScript(优势)?

  • 可读性增强——基于语法解析可以生成文档,节省后期阅读理解代码需要时间;ide可以解析所写代码;
  • 可维护性增强——编译阶段可以暴露大多数错误。
  • 包含于兼容所有Js特性,支持共存;
  • 支持渐进式改造、引入和升级。

3.TypeScript两个编辑器推荐

  • Visual Studio Code;
  • TypeScript官网在线编辑器;

4.TypeScript基本语法

1. 基础数据类型

  • 定义方式—— 类型定义+:+关键字+具体的值,如下图:

image.png

2.对象类型

  • 大写I开头表示是类型
  • 类型定义——interface+类型名称+花括号,花括号里对数据类型进行属性设置如只读、可选、任意,如下图:

image.png

  • 在如下例子中,缺少必需属性和修改只读属性会报错。

image.png

3.函数类型:

  • 为函数添加类型声明:
    • 直接在函数上进行类型的补充,补充参数和返回值类型,如下:

image.png

    • 给函数变量(即interface定义接口类型)赋值函数类型说明如下:

image.png

4.数组——前三种常用:

image.png

5.其他类型

  • 空类型,表示无赋值;
  • 任意类型,所有类型的子类型;
  • 枚举类型,支持枚举值到枚举名的正反向映射;

6.泛型——不预先制定具体类型,而在使用时再指定具体类型。

  • ‘extend’声明表示泛型必须限制在某一范围内;
  • ‘=’ 指定泛型默认类型;

image.png

8.type是定义类型别名.

3.课后个人总结

  1. 本节课我重点学习了TypeScript的基本语法,了解了各个数据类型的基本定义及其使用中可能会遇到的错误和解决办法。
  2. 这块是比较陌生的知识点,还需要在课下找一些实践例子动手才能真正掌握。