专为小白设计的TypeScript入门课
第2章 TypeScript 基础语法入门
Dell
有属性的函数类型定义方法
一个函数,本身它又带有属性,这个类型我们如何定义呢?
利于interface定义FunctionWithAttributes,它有attr属性,然后参数与返回值用小括号和冒号的形式定义。
// 有属性的函数类型定义方法 interface FunctionWithAttributes { attr: string; (str: string): void; } const test: FunctionWithAttributes = (str: string) => { console.log(str); } test.attr = 'attributes';
构造函数的类型如何定义
testOne函数的参数是一个类,且该类的构造函数还可接收一个参数。
interface定义一个ClassWithConstructor,构造函数用new表示,然后定义它的参数和返回值即可。
ClassWithConstructor与TestOne类型一致,TestOne类就可以传入进testOne函数了。
// 构造函数的类型如何定义 interface ClassWithConstructor { new (str: string): void; } function testOne(outerClass: ClassWithConstructor) { const instance = new outerClass('new') } class TestOne { name: string; constructor(str: string) { this.name = str; } } testOne(TestOne);
TestOne类的constructor的str参数为number,再去调用testOne(TestOne),则会报错了。
class TestOne { name: string; constructor(str: number) { this.name = str; } } testOne(TestOne);
Date 的类型
在js当中可以使用内置类Date,可以使用new Date( ),也可以直接调用函数Date(‘string’)。
● new 写一个构造函数
● 函数调用Date,需要再定一个函数,参数和返回值都是string
// 如何写 Date 的类型 interface DateTpye { new (): Date; (dateString: string): string; }
函数和泛型
定义一个getArrayFirstItem函数,参数是数组,类型为any。
function getArrayFirstItem(arr: any[]) { return arr[0]; } const numberArr = [1,2,3]; const result = getArrayFirstItem(numberArr);
发现类型推断不出来,result的类型,即数组参数类型为any,执行的时候推断不出数组第一项的类型。
const stringArr = ['1','2','3']; const resultOne = getArrayFirstItem(stringArr);
数组为字符串,同样也推断不出来。
利用函数与泛型解决这个问题 =>
数组的类型是Type,则函数返回值也一一对应。
// 函数和泛型 function getArrayFirstItem<Type>(arr: Type[]): Type { return arr[0]; } const numberArr = [1,2,3]; const result = getArrayFirstItem(numberArr); const stringArr = ['1','2','3']; const resultOne = getArrayFirstItem(stringArr);
note:利用函数和泛型,即可帮助ts做更优的类型推断了。
函数重载
getString接收一个参数时,返回类型为string。
getString接收两个参数时,返回类型为number。
实现重载函数时,想要满足两个定义,则利用?即可。
注意,实现的函数一定要满足重载函数定义的要求。
// 函数重载 function getString(str: string): string; function getString(str: string, str1: string): number; function getString(str: string, str1?: string) { if(typeof str1 === 'string') { return (str + str1).length; } return str; }