前言
什么是 TypeScript？
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。
TypeScript，简称 ts，是微软开发的一种静态的编程语言，它是 JavaScript 的超集。 那么它有什么特别之处呢?
- 简单来说，js 有的 ts 都有，所有js 代码都可以在 ts 里面运行。
- ts 支持类型支持，ts = type +JavaScript。
那么 ts 和 js 有什么区别呢？
JavaScript 属于动态编程语言，而ts 属于静态编程语言。
- js：边解释边执行，错误只有在运行的时候才能发现
- ts：先编译再执行，在写的时候就会发现错误了（ts不能直接执行，需要先编译成 js ）
ts 完全支持 js ，可以直接转换
简单的去理解
JS 有的， TS 都有， JS 没有的， TS 也有，毕竟 TS 是 JS 的超集嘛。
TS 的缺点：
- 不能被浏览器理解，需要被编译成 JS
- 有学习成本，写习惯了 JS 的我们，要上手需要花时间去理解，而且 TS 中有一些概念还是有点难，比如泛型。
什么是类型注解？
就是给变量添加类型约束，可以显示标记出代码中的意外行为，从而降低了发生错误的可能性 语法：
let 变量名: 类型 = 初始值
let age: number = 18这样写有啥好处呢？更好地规定了数据的类型，避免了不必要的错误。 如果你不小心写错了，他会直接提示你类型错误哦。是不是很贴心呢?
比如：
let a:number = '1' 代码中的 : number 就是类型注解。
这个时候是时候介绍下ts的数据基本类型
//字符串
let str: string = "Domesy"
// 数字
let num: number = 7
//布尔
let bool: boolean = true
//symbol
let sym: symbol = Symbol();
//bigint
let big: bigint = 10n
//null
let nu: null = null
//undefined
let un: undefined = undefined
需要注意：
- null 和 undefined 两个类型一旦赋值上，就不能再赋值给任何其他类型
- symbol是独一无二的，假设再定义一个 sym1，那么sym === sym1 为 false
引用类型
Array
两种方式：
- 类型名称 + []
- Array<数据类型>
let arr1: number[] = [1, 2, 3]
let arr2: Array = [1, 2, 3]
let arr2: Array = [1, 2, '3'] // error
//要想是数字类型或字符串类型，需要使用 ｜
let arr3: Array = [1, 2, '3'] //ok Tuple(元组)
Tuple 可以说是 Array 的一种特殊情况,针对上面的 arr3,我们看他的类型可以是string也可以是number，但对每个元素没有作出具体的限制。
那么 Tuple 的作用就是限制元素的类型并且限制个数的数组,同时 Tuple这个概念值存在于TS，在JS上是不存在的
这里存在一个问题：在TS中,是允许对 Tuple 扩增的（也就是允许使用 push方法），但在访问上不允许
let t: [number, string] = [1, '2'] // ok
let t1: [number, string] = [1, 3] // error
let t2: [number, string] = [1] // error
let t3: [number, string] = [1, '1', true] // error
let t5: [number, string] = [1, '2'] // ok
t.push(2)
console.log(t) // [1, '2', 2]
let a = t[0] // ok
let b = t[1] // ok
let c = t[2] // error另外还有object 和定义函数；
元祖越界问题
let aaa: [string, number] = ['aaa', 5];
// 添加时不会报错
aaa.push(6);
// 打印整个元祖不会报错
console.log(aaa); // ['aaa',5,6];
// 打印添加的元素时会报错
console.log(aaa[2]); // error什么是函数类型接口
- 对方法传入的参数和返回值进行约束
// 注意区别
// 普通的接口
interface discount1{
getNum : (price:number) => number
}
// 函数类型接口
interface discount2{
// 注意:
// “:” 前面的是函数的签名，用来约束函数的参数
// ":" 后面的用来约束函数的返回值
(price:number):number
}
let cost:discount2 = function(price:number):number{
return price * .8;
}
// 也可以使用类型别名
type Add = (x: number, y: number) => number
let add: Add = (a: number, b: number) => a + b什么是类类型接口
- 如果接口用于一个类的话，那么接口会表示“行为的抽象”
- 对类的约束，让类去实现接口，类可以实现多个接口
- 接口只能约束类的公有成员（实例属性/方法），无法约束私有成员、构造函数、静态属性/方法
// 接口可以在面向对象编程中表示为行为的抽象
interface Speakable {
name: string;
// ":" 前面的是函数签名，用来约束函数的参数
// ":" 后面的用来约束函数的返回值
speak(words: string): void
}
interface Speakable2 {
age: number;
}
class Dog implements Speakable, Speakable2 {
name!: string;
age = 18;
speak(words: string) {
console.log(words);
}
}
let dog = new Dog();
dog.speak('汪汪汪');什么是混合类型接口
- 一个对象可以同时做为函数和对象使用
interface FnType {
(getName:string):string;
}
interface MixedType extends FnType{
name:string;
age:number;
}interface Counter {
(start: number): string;
interval: number;
reset(): void;
}
function getCounter(): Counter {
let counter = function (start: number) { };
counter.interval = 123;
counter.reset = function () { };
return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0; 继承 vs 多态
- 继承：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
- 多态：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应
这个如果有学过Java的 就非常容易理解，我是之前做Java开发的。
比如：
class Animal {
speak(word: string): string {
return 'Animal: ' + word;
}
}
class Cat extends Animal {
speak(word: string): string {
return 'Cat:' + word;
}
}
class Dog extends Animal {
speak(word: string): string {
return 'Dog:' + word;
}
}
let cat = new Cat();
console.log(cat.speak('hello'));
let dog = new Dog();
console.log(dog.speak('hello'));什么是可选链运算符的使用
- 可选链运算符是一种先检查属性是否存在，再尝试访问该属性的运算符，其符号为 ?.
- 如果运算符左侧的操作数 ?. 计算为 undefined 或 null，则表达式求值为 undefined 。否则，正常触发目标属性访问、方法或函数调用。
- 可选链运算符处于 stage3 阶段，使用 @babel/plugin-proposal-optional-chaining 插件可以提前使用，TS 3.7版本正式支持使用，以前的版本会报错
a?.b;
// 相当于 a == null ? undefined : a.b;
// 如果 a 是 null/undefined，那么返回 undefined，否则返回 a.b 的值.
a?.[x];
// 相当于 a == null ? undefined : a[x];
// 如果 a 是 null/undefined，那么返回 undefined，否则返回 a[x] 的值
a?.b();
// 相当于a == null ? undefined : a.b();
// 如果 a 是 null/undefined，那么返回 undefined
// 如果 a.b 不是函数的话，会抛类型错误异常，否则计算 a.b() 的结果什么是扩展全局变量的类型
interface String {
// 这里是扩展，不是覆盖，所以放心使用
double(): string;
}
String.prototype.double = function () {
return this + '+' + this;
};
console.log('hello'.double());
// 如果加了这个，就会报错
// export {}
如何编写 react + ts 版的 HOC
interface Greeting {
name: string;
age: number;
}
const Hello:React.FC = (props) => Hello {props.name}
;
// 推荐使用第二种
const Hello2 = (props:Greeting) => Hello {props.name}
;
函数赋值
JS 中变量随便赋值没问题，
但在 TS 中函数不能随便赋值，会报错的，
TS 进阶
这一部分的内容就需要费点脑细胞了，毕竟学习一门语言，还是没那么容易的，最好把基础的内容都理解透彻之后再来学进阶。
主要要掌握联合类型，交叉类型，类型别名，类型保护，类型断言
抽象类，多态，条件类型等
总结：
我之前学习 TS，是死磕 TS 文档，非常枯燥，上手难度大，学习效率很低，而且学了就忘。
后来我才发现，我们不一定需要学习那么多知识，能上手就行，TS 的文档比较适合入门之后查阅用，而不适合初学者用。基础类型 · TypeScript中文网 · TypeScript——JavaScript的超集
很多对 TS 学习得很深的人，甚至还在做 TS 类型体操，把 TS 像 LeetCode 一样刷，作为一个搬砖人，真的没必要去跟风，毕竟应付日常增删改查不需要学那么深。
我的理念一直是，用到了再去学，不要焦虑，人精力有限。比如当我需要去理解 Vue3 的源码或者设计一个库的时候，目前的 TS 知识储备不够了，再去做做类型体操，也不迟。
最近重学一次 TS，查阅了很多相对官方文档更通俗易懂的教程，总结了学习中的重点，形成了本文。