🌥️TypeScript 入门
00 分钟
2022-8-14
2022-9-15
type
status
date
slug
summary
tags
category
icon
password
Edited
Sep 15, 2022 01:15 PM
Created
Aug 14, 2022 07:59 AM

环境搭建

安装typescript
安装完成后可以使用tsc指令来编译ts文件

编译

手动编译

自动编译

TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译
 

基础

类型
例子
描述
number
1, -33, 2.5
任意数字
string
'hi', "hi"
任意字符串
boolean
true、false
布尔值true或false
字面量
let color: 'red' | 'blue' | 'black';
限制变量的值就是该字面量的值
any
*
任意类型
unknown
*
类型安全的any
void
空值(undefined)
没有值(或undefined)
never
没有值
不能是任何值
object
{name:'孙悟空'}
任意的JS对象
array
[1,2,3]: number[]
任意JS数组
元组tuple
[4,5]
元素,TS新增类型,固定长度数组
enum
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
枚举,TS中新增类型
联合类型
let str: string | number;
取值可以为多种类型中的一种
interface
interface Person { name: string, age?: number, // 可选属性 [propName: string]: any // 任意属性 readonly id: number, // 只读属性 }
它是对行为的抽象,而具体如何行动需要由类去实现 (定义的变量比接口少或多了一些属性是不允许的)
Function
(x: number, y: number) => number (x: number, y: number) : number=> {} 剩余参数: ...rest:any[]
 

大小写类型说明

永远不要使用类型的数字,字符串,布尔值或对象。这些类型是指在JavaScript代码中几乎从不使用的非原始装箱对象。
请使用类型数字,字符串和布尔值。

类型断言

用来手动指定一个值的类型
 

声明文件

引用它的声明文件,才能获得对应的代码补全、接口提示等功能
  • declare var 声明全局变量
  • declare function 声明全局方法
  • declare class 声明全局类
  • declare enum 声明全局枚举类型
  • declare namespace 声明(含有子属性的)全局对象
  • interface 和 type 声明全局类型
  • export 导出变量
  • export namespace 导出(含有子属性的)对象
  • export default ES6 默认导出
  • export = commonjs 导出模块
  • export as namespace UMD 库声明全局变量
  • declare global 扩展全局变量
  • declare module 扩展模块
  • /// <reference /> 三斜线指令

声明语句

声明文件

通常我们会把声明语句放到一个单独的文件(jQuery.d.ts)中,这就是声明文件
声明文件必需以 .d.ts为后缀
 
解析声明文件需要将声明文件引入tsconfig.json中的 filesinclude和 exclude配置,确保包含了 .d.ts文件
 
interface 和 type
除了全局变量之外,可能有一些类型我们也希望能暴露出来。在类型声明文件中,我们可以直接使用 interface或 type来声明一个全局的接口或类型
这样的话,在其他文件中也可以使用这个接口或类型了
 

进阶

类型别名

类型别名用来给一个类型起个新名字
使用 type创建类型别名(类型别名常用于联合类型)
 

  • 类(Class):定义了一件事物的抽象特点,包含它的属性和方法
  • 对象(Object):类的实例,通过 new 生成
  • 面向对象(OOP)的三大特性:封装、继承、多态
  • 封装(Encapsulation):将对数据的操作细节隐藏起来,只暴露对外的接口。外界调用端不需要(也不可能)知道细节,就能通过对外提供的接口来访问该对象,同时也保证了外界无法任意更改对象内部的数据
  • 继承(Inheritance):子类继承父类,子类除了拥有父类的所有特性外,还有一些更具体的特性
  • 多态(Polymorphism):由继承而产生了相关的不同的类,对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal,但是分别实现了自己的 eat 方法。此时针对某一个实例,我们无需了解它是 Cat 还是 Dog,就可以直接调用 eat 方法,程序会自动判断出来应该如何执行 eat
  • 存取器(getter & setter):用以改变属性的读取和赋值行为
  • 修饰符(Modifiers):修饰符是一些关键字,用于限定成员或类型的性质。比如 public 表示公有属性或方法
  • 抽象类(Abstract Class):抽象类是供其他类继承的基类,抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
  • 接口(Interfaces):不同类之间公有的属性或方法,可以抽象成一个接口。接口可以被类实现(implements)。一个类只能继承自另一个类,但是可以实现多个接口

使用

属性和方法
使用 class 定义类,使用 constructor 定义构造函数。
通过 new 生成新实例的时候,会自动调用构造函数
 
继承
使用 extends关键字实现继承,子类中使用 super关键字来调用父类的构造函数和方法
 
存取器
使用 gettersetter可以改变属性的赋值和读取行为
 
静态方法
使用 static修饰符修饰的方法称为静态方法,它们不需要实例化,而是直接通过类来调用
 
实例属性
可以直接在类里面定义
 
静态属性
 
抽象类
abstract用于定义抽象类和其中的抽象方法
抽象类是不允许被实例化的
 

类与接口

实现(implements)是面向对象中的一个重要概念。一般来讲,一个类只能继承自另一个类,有时候不同类之间可以有一些共有的特性,这时候就可以把特性提取成接口(interfaces),用 implements关键字来实现。这个特性大大提高了面向对象的灵活性
  • 一个类可以实现多个接口
  • 接口可以继承接口

接口继承类

当我们在声明 class Point时,除了会创建一个名为 Point的类之外,同时也创建了一个名为 Point的类型(实例的类型)
所以既可以将 Point当做一个类来用也可以将 Point当做一个类型来用
 

泛型

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性
其中<T>就是泛型
泛型可以有多个:<T, U>

泛型约束

下例中,使用了 extends约束了泛型 T必须符合接口 Lengthwise的形状,也就是必须包含 length属性

泛型接口

注意,此时在使用泛型接口的时候,需要定义泛型的类型

泛型参数的默认类型

 

声明合并

如果定义了两个相同名字的函数、接口或类,那么它们会合并成一个类型:
相当于:
注意,合并的属性的类型必须是唯一的(属性名可以重复,但类型必须一致)
 

参考链接:
  1. TypeScript 入门教程 (xcatliu.com)
 
上一篇
一些一直在使用的软件
下一篇
Vue + Vite + Electron安装使用

评论
Loading...