安徽省省博物馆网站建设,佛山公司网站设计,用上网做任务的网站,制作一个网页要多少钱ts的常用类型前言安装ts常见类型原始类型 、数组、 any变量上的类型注解函数对象类型联合类型类型别名接口接口和类型别名的对比前言
typescript中为了使编写的代码更规范#xff0c;更有利于维护#xff0c;增加了类型校验#xff0c;安装
安装 typescript npm i typescr…
ts的常用类型前言安装ts常见类型原始类型 、数组、 any变量上的类型注解函数对象类型联合类型类型别名接口接口和类型别名的对比前言
typescript中为了使编写的代码更规范更有利于维护增加了类型校验安装
安装 typescript npm i typescript -g 运行 tsc hello.ts
ts常见类型
原始类型 、数组、 any
类型举例描述string“Hello word”表示字符串number42所有的数字类型都是 numberbooleantrue 和 false布尔值Array①var arr:number[][11,22,33] ② var arr:Array[11,22,33];数组anylet obj: any { x: 0 };当你不希望一个值导致类型检查错误的时候就可以设置为 any
变量上的类型注解
当你使用 const、var 或 let 声明一个变量时你可以选择性的添加一个类型注解显式指定变量的类型
let myName: string Alice;函数
参数类型注解Parameter Type Annotations
当你声明一个函数的时候你可以在每个参数后面添加一个类型注解声明函数可以接受什么类型的参数。参数类型注解跟在参数名字后面
function greet(name: string) {console.log(Hello, name.toUpperCase() !!);//当参数有了类型注解的时候TypeScript 便会检查函数的实参
}对象类型
function printCoord(pt: { x: number; y: number }) {console.log(The coordinates x value is pt.x);console.log(The coordinates y value is pt.y);
}
printCoord({ x: 3, y: 7 });可选属性对象类型可以指定一些甚至所有的属性为可选的你只需要在属性名后添加一个 ?
function printName(obj: { first: string; last?: string }) {console.log(obj.last.toUpperCase());//可能为undefined所以要先判断下if (obj.last ! undefined) {// OKconsole.log(obj.last.toUpperCase());}
}
// Both OK
printName({ first: Bob });
printName({ first: Alice, last: Alisson });
联合类型
基于已经存在的类型构建新的类型现在把它们组合在一起。
function printId(id: number | string) {console.log(Your ID is: id);
}
// OK
printId(101);
// OK
printId(202);
// Error
printId({ myID: 22342 });
// Argument of type { myID: number; } is not assignable to parameter of type string | number.
// Type { myID: number; } is not assignable to type number.
// 因为定义的参数类型为数字或者字符串对象不符合条件注必须对每个联合的成员都是有效的。举个例子如果你有一个联合类型 string | number , 你不能使用只存在 string 上的方法
function printId(id: number | string) {console.log(id.toUpperCase());// Property toUpperCase does not exist on type string | number.// Property toUpperCase does not exist on type number.//解决方法 用typeof 先判断一下类型在执行方法
}类型别名
顾名思义一个可以指代任意类型的名字。
type Point {x: number;y: number;
};// Exactly the same as the earlier example
function printCoord(pt: Point) {console.log(The coordinates x value is pt.x);console.log(The coordinates y value is pt.y);
}printCoord({ x: 100, y: 100 });你可以使用类型别名给任意类型一个名字举个例子命名一个联合类型
type ID number | string;接口
interface Point {x: number;y: number;
}function printCoord(pt: Point) {console.log(The coordinates x value is pt.x);console.log(The coordinates y value is pt.y);
}printCoord({ x: 100, y: 100 });接口和类型别名的对比
相同点: 都可以给对象指定类型不同点: 接口:只能为对象指定类型类型别名:不仅可以为对象指定类型,实际上可以为唯衣类型指定别名
