TypeScript入门|青训营笔记

zyj1990
57 阅读2分钟

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

一、本堂课重点内容：

  1. TypeScript 历史及定义解析
  2. TypeScript 优势解读
  3. TypeScript 练习工具

二、详细知识点介绍：

TypeScript 历史

image.png

什么是TypeScript

ts源于js

image.png

  • 动态类型语言 是指在运行期间才去做数据类型检查的语言。在用动态语言编程时，不用给变量指定数据类型，第一次赋值给变量时，在内部将数据类型记录下来。JavaScript、Ruby、Python是典型的动态类型语言。
  • 静态类型语言 与动态类型语言刚好相反，它的数据类型检查发生在在编译阶段，也就是说在写程序时要声明变量的数据类型。 C/C++、C#、Java都是静态类型语言的典型代表。
  • 强类型语言
    1. 所有的变量必须先声明，后使用；
    2. 指定类型的变量只能接收类型与之匹配的值。
  • 弱类型语言
    • 数据类型可以被忽略的语言。它与强类型定义语言相反， 一个变量可以赋不同数据类型的值。

ts的优势

image.png

基本语法

基本数据类型

image.png

对象类型

image.png

函数类型

两种方式，主要是给出参、入参声明类型 image.png

函数重载

image.png 定义了一个匿名函数赋值给变量getDate2，同时给变量约定了类型IGetDate，会发生类型匹配，类型推断.要让IGetDate的范围表达大于getDate2；

数组类型

image.png

ts补充类型

image.png

泛型

不预先指定具体类型，在使用的时候再指定类型的一种特性

image.png

image.png

类型别名 & 类型断言

image.png

Record<K,T> 构造具有给定类型T的一组属性K的类型。在将一个类型的属性映射到另一个类型的属性时，Record非常方便。他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型.

字符串/数字 字面量

image.png

高级类型

联合、交叉类型

普通类型声明：声明繁琐，较多重复存在 image.png

image.png

类型保护与类型守卫

报错：在类型保护中，访问联合类型时，只能访问联合类型中的交集部分 image.png

类型守卫

image.png 用as的类型断言

联合类型+类型保护=自动类型判断，只有两个类型没有相同特性才需要写类型守卫 image.png

avatar
文章
阅读
粉丝