age:
25
复制代码
上面的例子中,我们定义了一个接口 Person,接着定义了一个变量 tom,它的类型是 Person。这样,我们就约束了 tom 的形状必须和接口 Person 一致。
定义的变量比接口少/多了属性是不允许的:
interface Person {
name: string;
age: number;
let tom: Person = {
name: 'Tom'
let tom: Person = {
name: 'Tom' ,
age: 25 ,
gender: 'male'
但是有些时候,我们并不希望对象的形状完全遵守接口的定义(我们希望少/多些属性):
所以我们会用到可选属性
interface Person {
name: string;
age?: number;
let tom: Person = {
name: 'Tom'
我们会使用任意属性 来实现可以少属性/多属性
interface Person {
name: string;
age?: number;
[propName: string] : any;
let tom: Person = {
name: 'Tom' ,
gender: 'male'
复制代码
需要注意的是,一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集:
interface Person {
name : string ;
age?: number ;
[propName : string ]: string ;
let tom : Person = {
name : 'Tom' ,
age : 25 ,
gender : 'male'
有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性 :
interface Person {
readonly id: number
name: string
age?: number
[propName: string] : any
let tom: Person = {
id: 89757,
name: 'Tom',
gender: 'male'
tom.id = 9527
数组类型会对其的内容进行约束
「类型 + 方括号」表示法
let fibonacci: number[] = [1, 1, 2, 3, 5]
let fibonacci : Array <number > = [1 , 1 , 2 , 3 , 5 ];
用接口(interface)表示数组
interface NumberArray {
[index: number] : number
let fibonacci: NumberArray = [1 , 1 , 2 , 3 , 5 ]
类数组不能使用以上3钟形式去表示
function sum () {
let args: {
[index: number] : number;
length: number;
callee: Function;
} = arguments;
函数表达式
在 JavaScript 中,有两种常见的定义函数的方式如上。
一个函数有输入和输出,所以基本上就是把约束覆盖到函数的输入与输出上。
1. 传统的定义函数的输入与输出
function sum (x: number , y: number ): number {
return x + y;
let mySum : (x: number , y: number ) => number = function (x: number , y: number ): number {
return x + y;
复制代码
2. 用接口定义函数的输入与输出
interface SearchFunc {
(source: string , subString: string ): boolean ;
let mySearch: SearchFunc = function (source: string , subString: string ) {
return source.search (subString) !== -1 ;
复制代码
- 函数的参数详情
前面我们提到,输入多/少的参数式不被允许的,这在接口定义中也存在着这个限制,同样的,我们也可以使用?来定义可选参数
!!!可选参数必须接在必需参数后面,否则会报错。如下是正确写法
function buildName (firstName: string , lastName?: string ) {
if (lastName) {
return firstName + ' ' + lastName;
} else {
return firstName;
let tomcat = buildName('Tom' , 'Cat' );
let tom = buildName('Tom' );
复制代码
参数也可以拥有默认值, TypeScript 会将添加了默认值的参数识别为可选参数,此时就不受「可选参数必须接在必需参数后面」的限制了:
function buildName(firstName: string, lastName: string = 'Cat' ) {
return firstName + ' ' + lastName
let tomcat = buildName('Tom' , 'Cat' )
let tom = buildName('Tom' )
复制代码
- 函数的重载
这个挺……无语的,感觉很没必要
function reverse (x: number | string ): number | string {
if (typeof x === 'number' ) {
return Number (x.toString ().split ('' ).reverse ().join ('' ));
} else if (typeof x === 'string' ) {
return x.split ('' ).reverse ().join ('' );
复制代码
本教程完全依赖于 : https:
复制代码
2565
暴走的比卡丘
TypeScript
JavaScript
1.1w
有钱人的风光
前端 and golang后端 @ 腾讯