2018 TypeScript Update(2)Introduction Basic Grammar - Classes and Functions
Classes
http://www.typescriptlang.org/docs/handbook/classes.html
Functions and prototype-based inheritance to build reusable components.
The class Greeter has three members: a property called greeting, a constructor, and a method greet.
Inheritance
Dog extends Animal
Public, Private and Protected Modifiers
In typescript, each member is public by default.
Readonly modifier
class Octopus{
readonly name: string;
readonly numberOfLegs: number = 8;
constructor (theName: string) {
this.name = theName;
}
}
let dad = new Octopus(“Man with 8 legs”);
dad.name = “main with suit”; //error, can not do on readonly
Getter and Setter
class Employee {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string){
..snip...
}
}
let employee = new Employee();
employee.fullName = “Carl Luo”;
Static Properties
Abstract Classes
abstract class may have some implementation
abstract class Animal {
abstract makeSound(): void;
move(): void {
console.log(“rock and roll");
}
}
Functions
http://www.typescriptlang.org/docs/handbook/functions.html
//Named function
function add(x, y) {
return x+y;
}
//Anonymous function
let myAdd = function(x, y) { return x + y; };
We can add types to each of the parameters and then to the function itself to add a return type.
Function Type
let myAdd: (x:number, y: number) => number = function(x: number, y: number): number { return x + y; };
Default and Optional Parameter
function buildName(firstName: string, lastName?: string) {}
function buildName(firstName: string, lastName = “Luo”) {}
Rest Parameters
function buildName(firstName: string, …restOfName: string[]) {}
Generics
http://www.typescriptlang.org/docs/handbook/generics.html
Type Variable
function identity<T>(arg: T): T {
return arg;
}
Generic Classes
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x+y; };
Enums
http://www.typescriptlang.org/docs/handbook/enums.html
enum Direction { Up, Down, Left, Right }
enum Response {
No = 0,
Yes = 1,
}
function respond(recipient: string, message: Response): void {}
respond(“Princess Caroline”, Response.Yes)
Type Inference http://www.typescriptlang.org/docs/handbook/type-inference.html
Type Compatibility http://www.typescriptlang.org/docs/handbook/type-compatibility.html
Symbols http://www.typescriptlang.org/docs/handbook/symbols.html
References:
http://sillycat.iteye.com/blog/2412076
分享到:
相关推荐
knowleage01-typescript -- angularcli --- angu
TypeScript Quickly-2020-英文版TypeScript Quickly-2020-英文版TypeScript Quickly-2020-英文版TypeScript Quickly-2020-英文版TypeScript Quickly-2020-英文版TypeScript Quickly-2020-英文版TypeScript Quickly-...
汇总插件类型script2 带有编译器错误的Typescript汇总插件。 这是对原始rollup-plugin-typescript的重写,从此开始并借用了。 这个版本比原始版本慢一些,但是它将打印出打字稿的句法和语义诊断消息(毕竟使用打字稿...
包含285个文件,其中包括102个Vue组件文件、49个TypeScript源代码文件、46个SVG矢量图文件、20个JavaScript脚本文件、14个PNG图像文件、8个JSON配置文件、7个SCSS样式表文件、5个EOT字体文件、5个WOFF2字体文件和5个...
TypeScript
Vue3、Element_Plus、typescript后台管理系统_vue-manage-system
基于 React18、React-Router V6、React-Hooks、Redux、TypeScript、Vite2、Ant-Design 开源的一套后台管理框架。
TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 ...
TypeScript
基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus的一套后台管理框架源码+项目说明.zip基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus的一套后台管理框架源码+项目说明.zip基于 Vue3.4、TypeScript、...
用法npm install --save-dev eslint@7 eslint-plugin-promise@4 eslint-plugin-import@2 eslint-plugin-node@11 @typescript-eslint/eslint-plugin@4 eslint-config-standard-with-typescript是的,这是很多软件包。...
本源码为基于TypeScript的开源白板工具Excalidraw-mini设计,包含209个TSX文件、167个TS文件等,共619个文件。该项目旨在为用户提供一个全面、便捷的白板工具解决方案,通过TypeScript、JavaScript、HTML和CSS技术的...
@ vue / eslint-config-typescript 用于vue-cli的eslint-config-typescript 有关可用规则,请参见 。 此配置是专为Vue CLI设置使用而设计的,并不供外部使用(可以使用,但可能需要在用户端进行一些修改-有关详细...
详细介绍用EC6+构建Apps,使用React开发SPA应用,用create-react-app安装项目、Redux、React Router、TypeScript, Node用Express和GraphQL开发WEB服务等内容。
eslint-config-typescript-React 为TypeScript React厌烦ESLint Config 特征 标准配置 TypeScript配置 React配置 更漂亮的配置(消除了标准,TypeScript和React冲突) 安装 使用软件包管理器进行安装 yarn add @...
OpenAPI Typescript代码生成 根据OpenAPI规范生成Typescript客户端的Node.js库。...npm install openapi-typescript-codegen --save-dev 用法 $ openapi --help Usage: openapi [options] Options: -V, --version
Usage: swagger-typescript-api [options] Options: -v, --version output the current version -p, --path <path> path/url to swagger scheme -o, --output <output> output path of typescript api file (...
vue-typescript-import-dts TypeScript声明文件,该文件允许对* .vue文件使用导入。 主要用例是捆绑程序环境,例如我们的vue-typescript-import-dts TypeScript声明文件,该文件允许将导入与* .vue文件一起使用。 ...
Typescript-angular2-swagger-codegen 该项目已生成,然后使用以下项目进行了修改: : 有关swagger-codegen和swagger的使用信息,请参见 。 要使用此模块,只需在Maven构建中包括以下内容: <id>jitpack.io...