客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。
安装 TypeScript命令行工具安装： npm install -g typescript 编译一个 TypeScript 文件： tsc hello.ts
原始数据类型/ 任意值为每一个变量提前申明该类型，则该变量取值只能为申明的类型，否则报错 如果一个变量可以任意取值，可以通过any 申明该变量为任意值 原始数据类型包括：布尔值（boolean）、数值（number）、字符串（string）、 申明为number类型的变量，后面可以取值类型为 number 、null、undefined，会默认进行隐式转换
例子： let isDone: boolean = false; //申明该值为 boolean 类型 let decLiteral: number = 6; let notANumber: number = NaN; // 进行隐式转换 let infinityNumber: number = Infinity; // 进行隐式转换 let num: number = undefined; // 进行隐式转换 let myName: string = 'Xcat Liu'; let u: undefined = undefined; let n: null = null; let anytest: any = 123; //申明该值为任意类型 anytest = true; anytest = '任意值' // 内置对象类型申明 let b: Boolean = new Boolean(1); // 申明为 Boolean 类型 let e: Error = new Error('Error occurred'); //申明为错误类型 let d: Date = new Date(); // 申明为 时间类型 let r: RegExp = /[a-z]/; //申明为正则类型
function sayHello(person: string) { // 在函数出入的参数后面申明类型 return 'Hello, ' + person; } function test(): void { //void 表示该函数没有返回值 alert('Hello Wrold'); }
联合类型联合类型表示取值可以为多种类型中的一种。使用 let test: string | number; //申明 test变量的类型为string 或者 number其中一种 test = 'seven'; //test的取值可以为其中一种类型 test = 7;
当不确定一个使用了联合类型的变量是哪种类型时，只能访问此联合类型的所有类型里共有的属性或方法 function getString(something: string | number) { //申明传入的参数为string或者number类型 return something.toString(); // 只能调用string和number共有的方法 }
错误例子： function getLength(something: string | number) { return something.length; // number类型不存在length }
对象的类型——接口 （interfaces）即提前定义一个对象的类型规则，用于申明一个对象时进行类型匹配 interface Person { //使用interface定义一个对象的类型，取名Person 首字母一般大写 name: string; //申明该对象每个值的取值类型 age: number; } let xcatliu: Person = { // 申明一个xcatliu对象，使用Person规则进行匹配验证 name: 'Xcat Liu', age: 25, };
使用Interfaces来定义对象的类型，定义了类型的对象，定义的变量不允许比类型少，也不能多，结构必须一模一样 错误例子：
interface Person { name: string; age: number; } let xcatliu: Person = { //不能比定义的Person类型的变量少 name: 'Xcat Liu', }; let xcatliu: Person = { name: 'Xcat Liu', age: 25, website: 'http://xcatliu.com', /不能比定义的Person类型的变量多 };
如果我们希望不要完全匹配一个 类型，可以使用可选属性： 可选属性的含义是该属性可以不存在。使用 ？ 但是仍然不允许添加未定义的属性
interface Person { name: string; age?: number; //在属性后面加上？ 表示该属性可有可无 } let xcatliu: Person = { name: 'Xcat Liu', };
有时候我们希望一个接口允许有任意的属性，即可以任意添加属性个数，使用 任意属性 [propName: string] 一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性 任意属性的取值类型为 any ，否则会跟可选属性冲突
interface Person { name: string; [propName: string]: any; // 表示可以任意添加属性个数 ，添加的属性类型为 any } let xcatliu: Person = { name: 'Xcat Liu', website: 'http://xcatliu.com', //任意添加的属性 websit2: 'http://xcatliu.com', //任意添加的属性 };
对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义在属性的前面，用空格区分 interface Person { readonly id: number; //使用 readonly 定义只读属性 name: string; } let xcatliu: Person = { id: 89757, name: 'Xcat Liu', }; xcatliu.id = 9527; //报错 不能改变该属性值
数组的类型数组的类型用于定义申明一个数组时的格式，申明格式类型的数组不能使用其他类型的方法 对象中的接口定义类型方法也同样适用于数组
let testArr: number[] = [1,2,5,4,8] //申明一个数组的类型为 number let fibonacci: string[] = ["1","2"]; //申明一个数组的类型为 string let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }]; // 申明一个数组的类型为任意类型 let fibona: Array<number> = [ 1, 2, 3, 5]; //也可以使用数组泛型Array<elemType> 来表示数组 interface NumberArray { //使用接口定义一个数组的类型，表示该数组取值必须为 string 类型 [index: number]: string; } let fi: NumberArray = ["a","1"]; interface NumberArr { //使用接口定义一个数组的类型，表示该数组取值必须为 number 类型 [index: number]: number; } let fi2: NumberArr = [1, 1, 2, 3, 5];
类数组不是数组类型，比如 常见的类数组都有自己的接口定义，如
function sum() { let args: IArguments = arguments; // arguments是类数组类型，使用 IArguments }
函数的类型定义函数的类型，对函数传入的参数和返回值做一定的限制 输入多余的（或者少于要求的）参数，是不被允许的， function sum(x: number, y: number): number { //申明一个函数sum 限制其传入的参数为 number类型，返回的参数为 number类型 return x + y; } sum(1, 2);
如果是一个函数表达式，，那么需要对左右两边进行类型的限制 //申明了一个 mySum函数，申明其类型为number let mySum: (x: number, y: number) => number = function (x: number, y: number): number { return x + y; };
函数的类型定义同样可以使用对象的接口
interface SearchFunc { //使用接口申明一个类型，名称为 SearchFunc (source: string, subString: string): boolean; //申明该函数的传入值都为 string 返回值为 boolean } let mySearch: SearchFunc; //申明一个函数，使用 SearchFunc 类型规则 mySearch = function(source: string, subString: string) { return source.search(subString) !== -1; }
函数的类型也可以定义可选的传入参数， 在参数后面使用 ? 可选参数必须接在必需参数后面 function buildName(firstName: string, lastName?: string) { // lastName 为可选参数 if (lastName) { return firstName + ' ' + lastName; } else { return firstName; } } let xcatliu = buildName('Xcat', 'Liu'); let xcat = buildName('Xcat');
TypeScript 会将添加了默认值的参数识别为可选参数 使用默认值的可选参数不限制位置
function buildName(firstName: string, lastName: string = 'Liu') { // lastName 为可选参数 return firstName + ' ' + lastName; } let xcatliu = buildName('Xcat', 'Liu'); let xcat = buildName('Xcat');
ES6 中，可以使用 function push(array: any[], ...items: any[]) { //...items表示剩余参数，是一个数组，可以申明为任意类型的数组 items.forEach(function(item) { array.push(item); }); } let a = []; push(a, 1, 2, 3);
类型断言
|
请发表评论