typeScript初步学习总结
javaScript是弱类型语言,在运行时检测,运行时可能会因为一些类型导致问题报错;
typeScript是强类型语言,在编译时检测,在编译时就可以检测出一些错误;
typeScript是javaScript的超集,在原有的基础上引用typeScript不会影响原有的使用。
let foo = 1;
foo.split(' ');
这段代码在javascript中运行中会报错,在typescript在编译阶段就会提醒。完整的typescript代码如下:
let foo: number = 1;
foo.split(' ');
typeScript提供一些基础类型判断,包含javaScript的一些基础数据类型
let isDone: boolean = false; let decLiteral: number = 6; let name: string = "bob"; let list: number[] = [1, 2, 3]; //都是number类型的数组 let list: Array<number> = [1, 2, 3]; // 使用数组泛型 (类数组:类数组需要用接口定义的方式) let u: undefined = undefined; // undefined let n: null = null; // null let notSure: any = 4; // any 没有指定类型 // 元组类型 // Declare a tuple type let x: [string, number]; // 第一个参数是string类型第二个参数number // Initialize it x = ['hello', 10]; // OK // Initialize it incorrectly x = [10, 'hello']; // Error // 枚举类型 enum Color {Red, Green, Blue} let c: Color = Color.Green; // 空值 // JavaScript 没有空值(Void)的概念,在 TypeScript 中,可以用 void 表示没有任何返回值的函数 function alertName(): void { alert('My name is Tom'); } // 与void的区别是:null,undefined是所有类型的子类型 // 这样也不会报错 let u: undefined; let num: number = u; let u: void; let num: number = u; // Type 'void' is not assignable to type 'number'.
类型推断:如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。
let myFavoriteNumber = 'seven'; myFavoriteNumber = 7; // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
联合类型: 可以对一个变量进行多种种类的指定类型
let myFavoriteNumber: string | number; myFavoriteNumber = 'seven'; myFavoriteNumber = 7;
对象类型(接口):在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型
interface Person { name: string; age: number; } let tom: Person = { name: 'Tom', age: 25 }; // 赋值的时候,变量的形状必须和接口的形状保持一致 // 多余的属性和少了属性是不允许的,提示错误 interface Person { name: string; age?: number; // 可选属性 [propName: string]: any; // 允许有任意的属性 readonly id: number; // 只读属性 }
函数声明:对于入参以及返回值的类型进行判断
function sum(x: number, y: number): number { return x + y; } // 不允许输入多余或少于的参数
利用接口形式返回函数类型判断,一般可用于对于函数返回类型的判断
定义一些接口形式,对象判断,实现类的继承接口
interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj);
interface SearchFunc { (source: string, subString: string): boolean; } let mySearch: SearchFunc; mySearch = function(source: string, subString: string) { return source.search(subString) !== -1; }
元组类型:数组合并了同种种类的数组形式,元组合并了不同种类的数组形式
let tom: [string, number] = ['Tom', 25];
枚举类型:枚举(Enum)类型用于取值被限定在一定范围内的场景
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}; console.log(Days["Sun"] === 0); // true console.log(Days["Mon"] === 1); // true console.log(Days["Tue"] === 2); // true console.log(Days["Sat"] === 6); // true console.log(Days[0] === "Sun"); // true console.log(Days[1] === "Mon"); // true console.log(Days[2] === "Tue"); // true console.log(Days[6] === "Sat"); // true
泛型:对于指定类型的确定<T>可以是任何字母eg:<U>,一般对于泛指类型的确定
function createArray<T>(length: number, value: T): Array<T> { let result: T[] = []; for (let i = 0; i < length; i++) { result[i] = value; } return result; } createArray<string>(3, 'x'); // ['x', 'x', 'x']
多个类型的泛型表示:
function swap<T, U>(tuple: [T, U]): [U, T] { return [tuple[1], tuple[0]]; } swap([7, 'seven']); // ['seven', 7]
使用接口与泛型的表示
interface Lengthwise { length: number; } function loggingIdentity<T extends Lengthwise>(arg: T): T { console.log(arg.length); return arg; } loggingIdentity(7); // 报错