解决什么技术痛点?
JavaScript是一门灵活的编程语言,但它的缺陷是没有类型约束,隐藏类型转换,var的作用域问题等,在编程中我们有一个共识:错误出现的越早越好(写代码出错比代码编译出错好,代码编译出错比代码运行期间出错好,开发阶段出错比测试期间发现错好)。由于JavaScript无法在代码编译阶段发现类型错误,造成了我们前端开发人员类型思维的缺失,为了解决这个技术特点,TypeScript出现了,从它的命名就可以知道,它是一个类型系统.,如果是JavaScript是一个动态类型检查机制,那么TypeScript就是一个静态类型检查机制,它在编译阶段就会进行类型的检查。
官方定义:TypeScript是拥有类型的JavaScript超集,它可以编译成普通、干净、完整的JavaScript代码,类型约束能力是它的核心。
类型约束
JavaScript的类型分为:原始数据类型(Primitive data types)和对象类型(Object types)。
原始类型有:布尔值、数值、字符串、null
、undefined
以及 ES6 中的新类型 Symbol
和 ES10 中的新类型 BigInt
。
原始类型约束:
//布尔值
let isDeleted: boolean = fasle;
//数值
let iCount: number = 10;
//字符串
let message: string = 'hello';
//空值
let tmp: undefined = undefined;
或者
let tmp: null = null;
//任意类型
let message: any = 'hello';
在typescript中如果一个类型没有声明类型,它会识别为任意值类型。
// 联合类型
let tmp: string|number; 允许它是string或者number类型,但不能是其它类型。
对象的类型约束(即interface接口):typescript通过定义接口来定义对象类型,接口是对行为的抽象,由类来实现,typescript中的interface还有对象的形状进行一个描述,即变量的形状必须和接口的形状保持一致。
//定义一个接口,属性带有类型的约束声明
interface Client{
name:string;
phone?:number; // ?表示可选属性
addree:any;
readony isDeleted: boolean; //只读,只能在创建时赋值
[anyTest:stirng]?:any; // 任意属性
}
//创建对象
let oneClient:Person={
name:'test';
// phone由于可选属性,所以可以不存在
addree: '北京市';
isDeleted: false;
}
数组类型的约束
//定义数组
let arrayTmp: number[]=[1,2,3];
//数组泛型
let arrayTmp:Array<number>=[1,2,3];
//任意类型
let list:any[]=[1,'hello',false];
函数类型的约束
//函数
function sum(x: number, y: number): number {
return x + y;
}
//函数表达式
let mySum = function (x: number, y: number): number {
return x + y;
};
//可选参数,后面不能再有必选参数,所以可选参数要放最后面
function buildName(firstName: string, lastName?: string) {
if (lastName) {
return firstName + ' ' + lastName;
} else {
return firstName;
}
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');
枚举定义:
声明文件中:
//常量枚举
const enum Directions {
Up,
Down,
Left,
Right
}
引用:
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
//声明枚举
declare enum Directions {
Up,
Down,
Left,
Right
}
引用:
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
泛型定义:
//定义泛型函数
function createArray(length: number, value: any): Array<any> {
let result = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
//定义泛型接口
interface CreateArrayFunc {
<T>(length: number, value: T): Array<T>;
}
//定义泛型类
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}
元组定义:
//元组(Tuple)合并了不同类型的对象
let tom: [string, number] = ['Tom', 25];
类与接口
//接口定义
interface Alarm {
alert(): void;
}
interface Light {
lightOn(): void;
lightOff(): void;
}
//类可以继承多个接口
class Car implements Alarm, Light {
alert() {
console.log('Car alert');
}
lightOn() {
console.log('Car light on');
}
lightOff() {
console.log('Car light off');
}
}