枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。
// 枚举 Enum export { } // 确保跟其他示例没有成员冲突 // const PostStatus = { // Draft: 0, // Unpublished: 1, // Published: 2 // } // 自动添加值 // enum PostStatus { // Draft = 0, // Unpublished = 1, // published = 2 // } // 默认值 0 1 2 // enum PostStatus { // Draft, // Unpublished, // published // } // 从第一个开始自增 // enum PostStatus { // Draft = 5, // Unpublished, // published // } // 值为字符串 // enum PostStatus { // Draft = "aaa", // Unpublished = "bbb", // published = "ccc" // } const enum PostStatus { Draft, Unpublished, published } const post = { title: "Hello TypeScript", content: "TypeScript is a typed superset of JavaScript", status: PostStatus.Draft } TypeScript 函数类型 // 函数类型 export {}; // 确保跟其他示例没有成员冲突 // function func1(a: number, b: number): string { // return 'func1'; // } // func1(100, 200); // func1(100); // func1(100, 200, 300); // 参数可选 // function func1(a: number, b?: number): string { // return 'func1'; // } // func1(100, 200); // func1(100); // func1(100, 200, 300); // 默认参数s // function func1(a: number, b: number = 200): string { // return 'func1'; // } // func1(100, 200); // func1(100); // func1(100, 200, 300); // 默认参数 // function func1(a: number, b: number = 200): string { // return 'func1'; // } // func1(100, 200); // func1(100); // func1(100, 200, 300); // 任意参数 // function func1(a: number, b: number = 200, ...rest: number[]): string { // return 'func1'; // } // func1(100, 200); // func1(100); // func1(100, 200, 300); // 函数表达式所对应的限制 const func2: (a: number, b: number) => string = function ( a: number, b: number ): string { return 'func2'; }; TypeScript 任意类型 // 任意类型 export {}; // 确保跟其他示例没有成员冲突 function stringfy(value: any) { return JSON.stringify(value); } stringfy('string'); stringfy(100); stringfy(true); let foo: any = 'string'; foo = 100; foo.bar(); // any类型是不安全的 TypeScript 隐式类型推断 // 隐式类型推断 /** * Age => 年龄 * let age: number * 不能将类型“string”分配给类型“number”。 */ let age = 18; // age = 'string'; 类型断言 // 类型断言 export {}; // 确保跟其他示例没有成员冲突 // 假定这个nums 来自一个明确的接口 const nums = [110, 120, 119, 112]; const res = nums.find((i) => i > 0); // const square = res * res; const num1 = res as number; // 断言as const num2 = <number>res; // 断言<number> JSX下不能使用 TypeScript 接口 // 接口 export {}; // 确保跟其他示例没有成员冲突 // 接口定义 // interface Post { // title: string; // content: string; // } // function printPost(post: Post) { // console.log(post.title); // console.log(post.content); // } // printPost({ title: '111', content: '2222' }); // ---------- interface Post { title: string; content: string; subtitle?: string; // 可选 readonly summary: string; // 只读 } const hello: Post = { title: "Hello TypeScript", content: "a JavaScript Supperset", summary: "a JavaScript", }; // ------------ interface Cache { [prop: string]: string; } const cache: Cache = {}; cache.value = "value"; cache.foo = "foo"; TypeScript 类的基本使用描述一类具体事物的抽象特征，例如：手机
用来描述一类具体对象的抽象成员
ES6以前， 都是通过函数+原型模拟实现类
ES6开始，Javascript中有了专门的class
TypeScript增强了class的相关语法
// 类 class class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } sayHi(msg: string): void { console.log("I am ${this.name},${this.age}"); } } TypeScript 类的访问修饰符 // 类的访问修饰符 export {}; class Person { public name: string; private age: number; protected gender: boolean; constructor(name: string, age: number) { this.name = name; this.age = age; this.gender = true; } sayHi(msg: string): void { console.log("I am ${this.name},${this.age}"); } } class Student extends Person { private constructor(name: string, age: number) { super(name, age); console.log(this.gender); } static create(name: string, age: number) { return new Student(name, age); } } const tom = new Person("tom", 18); console.log(tom.name); // console.log(tom.age);// age为私有成员 // console.log(tom.gender); // const jack = new Student(); // private只允许在内部使用 const jack = Student.create("jack", 18); // 通过static访问 TypeScript 类的只读属性 // 只读属性 readonly export {}; class Person { public name: string; private age: number; protected readonly gender: boolean; constructor(name: string, age: number) { this.name = name; this.age = age; this.gender = true; } sayHi(msg: string): void { console.log("I am ${this.name},${this.age}"); } } const tom = new Person("tom", 18); console.log(tom.name); // tom.gender = false; TypeScript 类与接口 // 类与接口 export {}; // interface EatAndRun { // eat(food: string): void; // run(distance: number): void; // } // class Person implements EatAndRun { // eat(food: string): void { // console.log(`优雅的进餐:${food}`); // } // run(distance: number) { // console.log(`直立行走:${distance}`); // } // } // class Animal implements EatAndRun { // eat(food: string): void { // console.log(`呼噜呼噜的吃:${food}`); // } // run(distance: number) { // console.log(`爬行:${distance}`); // } // } // -------------- interface Eat { eat(food: string): void; } interface Run { run(distance: number): void; } class Person implements Eat, Run { eat(food: string): void { console.log(`优雅的进餐:${food}`); } run(distance: number) { console.log(`直立行走:${distance}`); } } class Animal implements Eat, Run { eat(food: string): void { console.log(`呼噜呼噜的吃:${food}`); } run(distance: number) { console.log(`爬行:${distance}`); } } TypeScript 抽象类 // 抽象类 export {}; abstract class Animal { eat(food: string): void { console.log(`呼噜呼噜的吃:${food}`); } abstract run(distance: number): void; } class Dog extends Animal { run(distance: number): void { throw new Error("Method not implemented."); } } const d = new Dog(); d.eat("的说法"); d.run(100); TypeScript 泛型 //泛型 export {}; function createNumberArray(length: number, value: number): number[] { const arr = Array<number>(length).fill(value); return arr; } function createStringArray(length: number, value: string): string[] { const arr = Array<string>(length).fill(value); return arr; } function createArray<T>(length: number, value: T): T[] { const arr = Array<T>(length).fill(value); return arr; } // const res = createNumberArray(3, 100); //res => [100,100,100] const res = createArray<string>(2, "foo"); TypeScript 类型声明 // 类型声明 import { camelCase } from "lodash"; import qs from "query-string"; qs.parse("?key=value&key2=value2"); // declare function camelCase(input: string): string; const res = camelCase("hello Typed");