TypeScript 学习笔记

84 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情

根据文档整理笔记,补补Ts基础知识!

学习链接

TypeScript 教程 | 菜鸟教程 (runoob.com)

简介

  • TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准
  • 可以编译成纯 JavaScript
  • 可以运行在任何浏览器上

新增功能

  • 类型批注
  • 类型推断
  • 类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程 - anyscript
  • 名字空间
  • 元组 🍇 🌹 🏵
  • Await

还有

  • 模块
  • 箭头语法
  • 可选参数及默认参数

image.png

保存与执行

新建.ts 文件

  • 在ts 中,可以使用ts 语法
  • 使用tsc 对应ts 文件
  • 即可把 ts 文件转为 js 文件
  • 通过node,可以运行 js 文件

Ts 基础类型

  • 任意类型 - any - 运行时确定 - 感觉像let。。
  • 数字类型 - number
  • 字符串类型 - string
  • 布尔类型 - boolean
  • 数组类型 - 同一类型的元素集合
  • 元组 - 可以存放不同类型的元素集合 🍇 🌹 🏵
  • 枚举 - 用于定义数值集合 - 第一个位置的值是0,之后依次累加。。
  • void - 用于表示返回值类型,表示没有返回值。。
  • null,表示对象缺失 - typeof null - Object
  • undefined - 变量未定义值 - typeof undefined - undefined
  • never - 其他类型的子类型,包括null 和undefined,表示不会出现的值。。 typeof never - undefined ???

image.png

image.png

js 枚举是什么意思?🍇🍇🍇

image.png

Ts面向对象概念

  • 对象 - 类的实例
  • 类 - 模板,描述一类事物
  • 方法 - 类的操作

image.png

image.png

Ts 类

包含

  • 字段 - 变量, 可以设置访问控制修饰符
  • 构造函数 - 实例化时调用 - constructor, 子类可以找到!
  • 方法 - 对象可执行的操作。- 子类也可以用!

image.png

image.png

实例化 - 对象

**通过new 来创建对象 **

image.png

类的继承

为什么要继承

  • 扩展模板

Ts继承条件

  • 只能继承一个类
  • 可以多层继承 - a 继承 b 继承 c。。

语法

  • extends

这个constructor

  • 构造函数 − 类实例化时调用,可以为类的对象分配内存。(变量!) image.png

继承类的方法重写

  • 对父类方法重写。 - 同一个方法名。。。
  • 创建对象后,使用子类的方法。。

image.png

static关键字

不用创建对象也能访问 - 静态属性和方法

instanceof运算符

image.png

访问控制修饰符

  • public - 都可以方法。。任何地方???
  • protected - 当前类和子类可以访问
  • private - 当前类才能访问

类 和接口

  • 使用关键字 implements
  • 可以把接口里的字段 作为属性使用!

image.png

Ts对象

键值对

  • 键为字符串
  • 值可以,字符串,函数,集合等。。。

image.png

鸭子类型

鸭子类型,我传入啥,是啥。。但是它都是通过一个方法来完成的。。

我们并不关心对象是什么类型,到底是不是鸭子,只关心行为。 - 干了啥。。

Ts命名空间

解决问题

  • 重名

关键字

  • namespace

image.png

在Ts文件中引用

  • 使用 ///

image.png

嵌套命名空间

image.png

Ts模块

TypeScript 模块的设计理念是可以更换的组织代码。

模块作用域

  • 自身的作用域里
  • 外部不可见
  • 除非明确的export 它们
  • 必须通过import 导入 模块中的 变量、 函数、类等

模块关系建立

  • 文件级别!! - 一个一个ts 文件!
  • import 和 export

模块加载器

  • 模块使用模块加载器导入其他模块
  • 作用 - 执行此模块前,去查找并执行这个模块的所有依赖
  • 常用的Js 模块加载器
  • 服务于Node.js 的CommonJs
  • 服务于Web应用的Require.js

image.png

Ts声明文件

如何在Ts中,使用其他第三方的Js库。。比如jQuery

  • 这里待测试。。

关键字

  • declare

image.png

文件后缀名 .d.ts

image.png

我们有一个js文件 - 第三方文件

  • 定义一个.d.ts的文件
  • 不用实现它,只是类型声明。。
  • 然后在 ts文件中引用,就可以使用了。
  • 待测验。。。

image.png

image.png

image.png

Ts 面试题

Typescript面试题 - 简书 (jianshu.com)

TypeScript TS「面试题及答案」不断更新 - 掘金 (juejin.cn)

案例

总结

补补Ts,希望可以在项目中用到!加油!

一万年太久,只争朝夕