一篇文章带你过一遍 TypeScript
1. 类型
1.1 原始类型定义
boolean/number/string/null/undefined
其中 null/undefined 是 TypeScript 中任何类型的子类型。
1.2 空值、任意值、枚举、Never
void/any/enum/never
void 指空值,若用于变量,则该变量只能赋值为 null/undefined;若用于函数,则该函数返回值为 空/null/undefined。
any 指任意值。TypeScript 中变量赋值后类型是无法改变的,但 any 类型的变量可以改变为任意值。(声明变量且无法类型推论时默认为 any 类型)
enum 指枚举类型,取值可以枚举出来。
enum Color {Red, Green, Blue} let c: Color = Color.Green; never 指不存在的值的类型,例如异常,函数无限循环无法返回等。
1.3 数组类型定义
TypeScript 中数组类型有多种定义方式,罗列如下:
1.类型 + 方括号
let list: number[] = [1, 2, 3];
2.数组泛型 Array<元素类型>
let list: Array<number> = [1, 2, 3];
3.元组 Tuple
表示一个已知元素数量和类型的数组
let x: [string, number] = ['1', 2]
4.接口定义类型
interface NumberArray { [index: number]: number;}let x: NumberArray = [1, 1, 2, 3, 5];
1.4 函数类型
TypeScript 中函数类型有多种定义方式,罗列如下:
1.函数声明中类型定义
function add(x: number, y: number): number { return x + y;}
2.函数表达式中类型定义
let myAdd = function(x: number, y: number): number { return x + y;}
3.箭头函数中类型定义
let myAdd = (x: number, y: number): number => { return x + y;}
4.接口定义类型
interface Add { (x: number, y: number): number;}let myAdd: Add = function(num1, num2) { return num1 + num2;}
1.5 对象类型
TypeScript 中对象类型有多种定义方式,罗列如下:
1.object
let obj: object = {test: 1};
2.接口定义类型
interface SquareConfig { color: string; width: number;}let newSquare: SquareConfig = { color: "white", width: 100};
1.6 联合类型
联合类型表示值为多种类型中的一种,用 | 进行类型联合
1.7 泛型
泛型指在定义函数、接口、类时,不预先指定类型,在使用时再指定。泛型通过在函数、接口、类变量名后使用 <> 定义。(类型断言中 <> 位于变量名前)
function identity<T>(arg: T): T { return arg;}
identity<string>('myString')
2. 类型操作
2.1 类型推论
在没有指定类型时,Typescript 会根据类型推论推断出类型。
// 推论类型为 numberlet x = 1;
// 推论类型为 anylet y;
2.2 类型断言
类型断言指对变量指定一个比现在类型更明确的类型。
类型断言有两种形式。
1."尖括号"语法:
// 声明 someValuelet someValue: any = "this is a string";
// 对 someValue 类型断言,类型为 string,比原先 any
类型更明确
let strLength: number = (<string>someValue).length;
2."as" 语法(在 tsx 中只能使用 as 语法,因为 jsx 中 <> 会和"尖括号"语法混淆)
let someValue: any = "this is a string";let strLength: number = (someValue as string).length;
2.3 类型别名 类型别名不会新建类型,是通过新建名字来引用已有类型。通过 type 进行别名定义。
type Name = string;let x: Name = '1';
3. 类和接口
3.1 类
类的概念是 ES6 中提出的,类的本质是构造函数的语法糖,通过 class 来创建。
TypeScript 中提供了 public、private 和 protected 三种修饰符,分别代表属性或方法是共有的、私有的、受保护的。
TypeScript 中 static 修饰符修饰属性或方法,代表属性或方法是静态的,即无需实例化,可以直接通过类调用。
TypeScript 中 readonly 修饰符修饰属性,代表属性只读,即初始化之后不可修改。
3.2 抽象类
抽象类指对类或类中部分方法进行抽象,作为其他类继承的基类,不能直接实例化。派生类必须实现抽象类中的抽象方法。
通过 abstract 关键字定义抽象类和抽象类内部定义的抽象方法,extends 来继承类。
abstract class Animal { // 必须在派生类中实现 abstract makeSound(): void; // 无须在派生类中实现 move(): void { console.log('roaming the earch...'); }}
class Dog extends Animal { makeSound (): void { console.log('barking'); }}
3.3 接口
接口和抽象类有些类似,接口是对属性和方法的抽象,不能直接实例化。接口和抽象类的区别如下:
接口是 100% 的抽象,不能含有具体的实现。抽象类可以包括具体实现 一个类只能继承一个类,但是可以实现多个接口。接口可以继承接口、类。 接口通过 interface 定义,implements 实现。
interface ClockInterface { alert(): void;}
class Clock implements ClockInterface { alert() { console.log('Clock alert'); }}
4. 其他
4.1 内置对象
TypeScript 根据 JavaScript 提供了相关的内置对象,如 Date、Document、HTMLElement、Event、NodeList 等。具体可参考定义文件。
4.2 声明文件
以 npm 包为例,将第三方包安装到 TypeScript 项目时,需要声明文件,声明该第三方包中导出内容的相关类型,这样 TypeScript 才能进行编译检查。声明文件以 .d.ts 结尾的文件,有以下3个来源:
1.@types
TypeScript 2.0 默认查看 ./node_modules/@types 文件夹,获取模块的类型定义。例如可以通过安装 npm install --save-dev @types/node 获取 node 类型相关声明。该开源项目 DefinitelyTyped 目前由社区进行维护。
2.第三方包已有声明文件
第三方包已有声明文件,则不需要再额外安装包,可以直接使用。通常通过 package.json 中的 types 字段,或者 index.d.ts 声明文件进行声明。
3.书写声明文件
当前面两种方法都无效时,可以在项目中书写声明文件,如创建 types 目录,用来管理声明文件。声明文件写法可以参考 DefinitelyTyped 中相关示例,如下为其中一个示例:
// 声明 createABigTriangle 方法declare function createABigTriangle(gl: WebGLRenderingContext): void;
// 第三方库是 commonjs 规范的,导出声明使用 export= 这种语法// 第三方库是 ES6 规范的,导出声明使用 export default 和 export 这种语法export = createABigTriangle;
- 在.NET Core类库中使用EF Core迁移数据库到SQL Server
- 人类的未来:儿童都能驾驶的汽车
- 论循证新闻的方法与意义——一种媒体融合背景下新闻生产方式创新
- 域名资讯:域名jiuhuang.com已搭建成“韭黄答题助手”网站
- Servlet开篇
- 浅谈中国域名的名与利
- 加密货币的火爆,tokens.com域名已50万美元成交
- 家具平台谷居完成2000万元融资,启用长尾双拼域名
- 如果未来的 AI 拥有意识,你舍得不理它吗?
- 微信这家人脸智慧时尚店可以“刷脸”试衣、付款
- 北京允许无人驾驶路测 难道是为方便圣诞老人送礼?
- 小程序新增多项功能,优化100多个功能点,堪称重磅!
- 人工智能的回报率:对冲基金嵌入机器学习?
- “人工智能助力上海科创中心建设”国际高峰论坛圆满结束
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android开发实现Launcher3应用列表修改透明背景的方法
- Android开发中方向传感器定义与用法详解【附指南针实现方法】
- Android利用ViewDragHelper轻松实现拼图游戏的示例
- ListView实现聊天列表之处理不同数据项
- 运算符
- ViewPager实现带引导小圆点与自动跳转的引导界面
- Android开发中Launcher3常见默认配置修改方法总结
- Android辅助功能实现自动抢红包(附源码)
- Android设置控件阴影的三种方法
- Android Studio 引入 aidl 文件的方法汇总
- Android 点击生成二维码功能实现代码
- Android屏幕手势检测的实现代码
- Android开发实现简单的观察者与被观察者示例
- Android开发中4个常用的工具类【Toast、SharedPreferences、网络及屏幕操作】
- Android实现客户端语音动弹界面实例代码