TypeScript 入门

category
Web
date
Aug 14, 2022
icon
slug
ts-intro
status
Published
summary
Typed JavaScript at Any Scale. 添加了类型系统的 JavaScript,适用于任何规模的项目 TypeScript 的两个最重要的特性——类型系统、适用于任何规模 TypeScript是JavaScript的超集
tags
TypeScript
type
Post

环境搭建

安装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中的 files、include和 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关键字来调用父类的构造函数和方法
 
存取器
使用 getter和 setter可以改变属性的赋值和读取行为
 
静态方法
使用 static修饰符修饰的方法称为静态方法,它们不需要实例化,而是直接通过类来调用
 
实例属性
可以直接在类里面定义
 
静态属性
 
抽象类
abstract用于定义抽象类和其中的抽象方法
抽象类是不允许被实例化的
 

类与接口

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

接口继承类

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

泛型

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

泛型约束

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

泛型接口

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

泛型参数的默认类型

 

声明合并

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

参考链接:
  1. TypeScript 入门教程 (xcatliu.com)
 

© JinSo 2021 - 2026