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
汇总插件类型script2 带有编译器错误的Typescript汇总插件。 这是对原始rollup-plugin-typescript的重写,从此开始并借用了。 这个版本比原始版本慢一些,但是它将打印出打字稿的句法和语义诊断消息(毕竟使用打字稿...
TypeScript Quickly-2020-英文版TypeScript Quickly-2020-英文版TypeScript Quickly-2020-英文版TypeScript Quickly-2020-英文版TypeScript Quickly-2020-英文版TypeScript Quickly-2020-英文版TypeScript Quickly-...
TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 ...
用法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是的,这是很多软件包。...
eslint-config-typescript-React 为TypeScript React厌烦ESLint Config 特征 标准配置 TypeScript配置 React配置 更漂亮的配置(消除了标准,TypeScript和React冲突) 安装 使用软件包管理器进行安装 yarn add @...
react-typescript-yarn-lerna-monorepo-eslint-prettier-boilerplate-master.rar
采用vue+ts+html5+css3开发的后台管理系统模版
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 (...
Typescript-plugin-css-modules 用于。目录关于这个插件该插件为IDE和与一起使用的任何其他工具提供类型信息。 目前,TypeScript在编译过程中不支持插件。 这意味着该插件不能: 在编译过程中提供错误,或为您的项目...
sonarTS组件
vue-typescript-import-dts TypeScript声明文件,该文件允许对* .vue文件使用导入。 主要用例是捆绑程序环境,例如我们的vue-typescript-import-dts TypeScript声明文件,该文件允许将导入与* .vue文件一起使用。 ...
@ vue / eslint-config-typescript 用于vue-cli的eslint-config-typescript 有关可用规则,请参见 。 此配置是专为Vue CLI设置使用而设计的,并不供外部使用(可以使用,但可能需要在用户端进行一些修改-有关详细...
$ npm install --save-dev eslint-config-xo eslint-config-xo-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin 与XO一起使用 使用此包,因此您无需进行任何配置。 独立使用 将一些ESLint...
typescript-playground-on-ace, 在ace编辑器上,在 typescript playground TypeScript TypeScript Ace基于ace编辑器的app游乐场http://hi104.github.com/typescript-playground-on-ace/请参见TypeScript游乐场 http:
vue-typescript-admin-element-ui 基于Vue + typescript版的后台管理系统模板。 项目预览 分享不易,喜欢的话一定别忘了点 :sparkling_heart: 只关注不点 :sparkling_heart:的都是耍流氓 只收藏也不点 :sparkling_...
typescript-json-schema, 从你的Typescript源生成json模式 typescript-json-schema 从你的Typescript源生成json模式。特性编译你的打字程序以获取完整的类型信息。转换必需的属性,扩展,注释关键字,属性初始值设定...
*的工作方式,请使用cmd命令: tsc classes.ts节点classes.js 或者tsc use-utils.ts utils / utils.ts -out use-utils-combined.js 如果要查看typescript-grunt的工作方式,请使用cmd命令: npm安装咕unt声
TypeScript-React-Redux (IE8+)本项目是一个兼容IE8的 TypeScript + React + Redux + immutablejs 的项目模板。为了降低上手难度,我在项目中写3个DEMO:todomvc without immutabeljs (ts + react + redux)[todo] ...