持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情
根据文档整理笔记,补补Ts基础知识!
学习链接
TypeScript 教程 | 菜鸟教程 (runoob.com)
简介
- TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准
- 可以编译成纯 JavaScript
- 可以运行在任何浏览器上
新增功能
- 类型批注
- 类型推断
- 类型擦除
- 接口
- 枚举
- Mixin
- 泛型编程 - anyscript
- 名字空间
- 元组 🍇 🌹 🏵
- Await
还有
- 类
- 模块
- 箭头语法
- 可选参数及默认参数
保存与执行
新建.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 ???
js 枚举是什么意思?🍇🍇🍇
Ts面向对象概念
- 对象 - 类的实例
- 类 - 模板,描述一类事物
- 方法 - 类的操作
Ts 类
包含
- 字段 - 变量, 可以设置访问控制修饰符
- 构造函数 - 实例化时调用 - constructor, 子类可以找到!
- 方法 - 对象可执行的操作。- 子类也可以用!
实例化 - 对象
**通过new 来创建对象 **
类的继承
为什么要继承
- 扩展模板
Ts继承条件
- 只能继承一个类
- 可以多层继承 - a 继承 b 继承 c。。
语法
- extends
这个constructor
- 构造函数 − 类实例化时调用,可以为类的对象分配内存。(变量!)
继承类的方法重写
- 对父类方法重写。 - 同一个方法名。。。
- 创建对象后,使用子类的方法。。
static关键字
不用创建对象也能访问 - 静态属性和方法
instanceof运算符
- 可以判断对象是否是指定类型。。
- 往原型上 找!
- typeof和instanceof原理 - SegmentFault 思否
访问控制修饰符
- public - 都可以方法。。任何地方???
- protected - 当前类和子类可以访问
- private - 当前类才能访问
类 和接口
- 使用关键字 implements
- 可以把接口里的字段 作为属性使用!
Ts对象
键值对
- 键为字符串
- 值可以,字符串,函数,集合等。。。
鸭子类型
- 指的是动态语言
- 变量在运行时,才知道类型。。
- 到底啥是鸭子类型(duck typing)带简单例子 - 筱筱的春天 - 博客园 (cnblogs.com)
鸭子类型,我传入啥,是啥。。但是它都是通过一个方法来完成的。。
我们并不关心对象是什么类型,到底是不是鸭子,只关心行为。 - 干了啥。。
Ts命名空间
解决问题
- 重名
关键字
- namespace
在Ts文件中引用
- 使用 ///
嵌套命名空间
Ts模块
TypeScript 模块的设计理念是可以更换的组织代码。
模块作用域
- 自身的作用域里
- 外部不可见
- 除非明确的export 它们
- 必须通过import 导入 模块中的 变量、 函数、类等
模块关系建立
- 文件级别!! - 一个一个ts 文件!
- import 和 export
模块加载器
- 模块使用模块加载器导入其他模块
- 作用 - 执行此模块前,去查找并执行这个模块的所有依赖
- 常用的Js 模块加载器
- 服务于Node.js 的CommonJs
- 服务于Web应用的Require.js
Ts声明文件
如何在Ts中,使用其他第三方的Js库。。比如jQuery
- 这里待测试。。
关键字
- declare
文件后缀名 .d.ts
我们有一个js文件 - 第三方文件
- 定义一个.d.ts的文件
- 不用实现它,只是类型声明。。
- 然后在 ts文件中引用,就可以使用了。
- 待测验。。。
Ts 面试题
Typescript面试题 - 简书 (jianshu.com)
TypeScript TS「面试题及答案」不断更新 - 掘金 (juejin.cn)
案例
总结
补补Ts,希望可以在项目中用到!加油!
一万年太久,只争朝夕