TypeScript 学习地址
基础类型
数据类型中主要基础类型有、布尔值、数字、字符串、数组、元组、枚举、Any、Void、Object、类型断言。
// 布尔值
let isDone:boolean = false;
// 数字
let num: number = 3;
// 字符串
let str: string = 'hello world';
// 数组
let list: number[] = [1,2,3];
let list2: Array<number> = [1,2,3];
let list3: string[] = ['1', '2', '3'];
// 元祖：元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
let x: [string, number];
x = ['hello', 1];
// 枚举
enum Color { Red, Green, Blue }
let c:Color = Color[2]; // Creen
// Any 不知道什么类型时
let notSure: any = 4;
notSure = "maybe a string instead"
// Void
function warnUser(): void {}
// Null 和 undefined
let u: undefined = undefined;
let n: null = null;
// 类型断言 @@ 重点 @@
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
接口
接口类型通过 interface 声明
可选属性 interface SquareConfig { clolor?: string; width?: number; } 只读属性 interface Point { readonly x: number; readonly y: number; } let p1: Point = { x: 10, y: 20 }; p1.x = 5; // error 函数类型 interface SearchFunc { (source: string, substring: string): boolean; } let mySearch: SearchFunc; mySearch = function(source: string, subString: string):void {} 可索引的类型 interface StringArray { [param: string]: string; } let myArray: StringArray; myArray = ['Bob', "Fred"]; 类类型 interface ClockInterface { currentTime: Date; } class Clock implements ClockInterface { currentTime: Date; constructor(h: number, m: number){} } 继承接口 interface Shape { color: string; } interface Square extends Shape { sideLength: number; } let square = { square.color = 'blue'; square.sideLength = 10; } 混合类型 interface Counter { (start: number): string; interval: number; reset(): void; } function getCounter():Counter { let counter = function (start: number) {} counter.interval= "123"; counter.reset = function() {} return counter; } 接口继承类 class Control { private state: any; }
interface SelectableControl extends Control {
select(): void;
}
class Button extends Control implements SelectableControl {
select() { }
}
class TextBox extends Control {
select() { }
}
类
public / private / protected / readonly / static / abstract class Animal { public name: string; // 共有 private name1: string; // 私有 protected name2: string; // rotected修饰符与 private修饰符的行为很相似，但有一点不同， protected成员在派生类中仍然可以访问。 readonly name3: string; // 只读 static name4 = "zhangsan" // 静态属性 abstract makeSound(): void; // 抽象类做为其它派生类的基类使用。 }
函数
和JavaScript一样，TypeScript函数可以创建有名字的函数和匿名函数。 你可以随意选择适合应用程序的方式，不论是定义一系列API函数还是只使用一次的函数。
两种函数表达式 function add(x: number, y: number): number { return x + y; } const myAdd: (x: number, y: number) => number = function(x: number, y: number): number { return x + y; } 可选参数 function getName(firstName: string, lastName?: string): string { return firstName + lastName; }
getName("zhangsan", "lisi");
剩余参数 function getName(firstName:string, ...restName: string[]): void { return firstName + " " + restOfName.join(" "); }
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
重载: JavaScript本身是个动态语言。 JavaScript里函数根据传入不同的参数而返回不同类型的数据是很常见的 let suits = ["hearts", "spades", "clubs", "diamonds"]; function pickCard(x): any { if (typeof x == "object") { let pickedCard = Math.floor(Math.random() * x.length); return pickedCard; } else if (typeof x == "number") { let pickedSuit = Math.floor(x / 13); return { suit: suits[pickedSuit], card: x % 13 }; } }
泛型
基本泛型 function identity(arg: T): T { return arg; } let output = identity("myString");
JSX
无状态函数组件 interface ClickableProps { children: JSX.Element[] | JSX.Element; } interface HomeProps extends ClickableProps { home: JSX.Element; } interface SideProps extends ClickableProps { side: JSX.Element | string; } function MainButton(prop: HomeProps): JSX.Element; function MainButton(prop: SideProps): JSX.Element; 类组件 class MyCompoent { render() {} } var myComponent = new MyCompoent();
总结
平时查阅文档使用，暂时个人使用，每天进步一点点吧。
