TypeScript 2
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。最后还是会编译成javascript
typescript
的好处
TypeScript
的设计目的应该是解决JavaScript
的“痛点”:弱类型和没有命名空间,导致很难模块化,不适合开发大型程序。ts是js的扩展,如 class / interface / module 等。这样会大大提升代码的可阅读性。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。内部模块称为全名空间namespace
,外部模块称为module
.
type
就是类型的意思,所以typescript
是强类型的语言,它的类型检查可以避免很多不规范的写法。比较适用于大中型项目。es6
语法跟他已经很相近了。比如class
,extends
等。
tsconfig.json
配置
{"compilerOptions": { //可以不写就是默认值"strict": false,"module": "es2015", //指定生成哪个模块代码。"moduleResolution": "node", //如何处理文档,node.js"target": "es5", //指定ECMA目标版本,默认为es3"allowJs": true, //包括.js,.jsx"experimentalDecorators": true,"allowSyntheticDefaultImports": true,"lib": [ //编译过程中可能引入的库文件列表"dom","es5","es2015.promise"]},"include": [ //指定全局匹配列表。*包括.ts,.tsx,.d.ts"./src/**/*"],"pretty": true
}
基础类型(小写)
let isDone:boolean=false//布尔let age:number=12//数字let name:string="Bob"//字符串let sentence:string=`hello ! my name is ${name}.
I'll be ${age+1} years old.`;//字符串模板 let list:number[]=[1,2,3]==list:Array<number>=[1,2,3]//数组let x:[string,number];
x=['hello',10]//元组Tupleenum Color{Red,Blue,Green}
let x:Color=Color.Red//枚举enumlet notSure:any=4//any类型,表示它可是一个任意类型的值
notSure='maybe a string instead'
notSure=false;//联合类型:string|number表示或可以是string类型,也可以是number类型fuction warnUser():void{ alert("this is a warn message!")
}//void空值,只能是null和undefined,或者是函数没有返回值let u:undefined=undefined//undefined
let n:null=null//null,和undefined是其它类型的子类,其它类型的值可以赋值成undefined
接口interface
interface squareConfig{color?:string,width?:number
}//可选属性,后面标识为?interface point{readonly x:number,readonly y:number
}
let p1:point{x:5,y:10}//只读属性,只能在刚刚创建的时候修改其值,创建后不能再改
p1.x=12//error
类 class
class Greeter{//class声明了一个Greeter的类,有31个greeting的属性,1个构造函数,1个greet方法greeting:string,constructor(message:string){this.greeting=message},greet(){return "hello,"+this.greeting}
}
let greeter=new Greeter("world")
public
修饰符,外界可以访问,公共的。默认为public
class Animal{public name:string,public constructor(theName:string){this.name=theName},public move(distanceInMeters:number){console.log(`${this.name} moved ${distanceInMeters} m.`)//谁移动了多米}
}
private
,不能在外部访问它
class Animal{private name:string,constructor(theName:string){this.name=theName}
}
New Animal("cat").name//error
protected
,在继承类中可以访问
class Preson{protected name:string,protected constructor(theName:string){this.name=theName}
}
class Employee extends Person{private department:string,constructor(name:string,department:string){super(name)//super关键字,表示父的构造函数,新建继承父的this,子类没有自己的thisthis.department=department}
}
let howord=new Employee("Howord","Sales");//继承类可以访问
let john=new Person("John")//error,实例不可以访问,因数被protected了。
存取器:getter,setter
let passCode="secret passcode";
class Employee{private _fullName:string,get fullName():string{return this._fullName},set fullName(newName:string){if(passcode && passcode=="secret passcode"){this._fullName=newName}else{console.log("Error: Unauthorized update of employee!")}}
}
let employee=new Employee();
employee.fullName="Bob Smith";
if(employee.fullName){alert(employee.fullName)
}
构造函数
class Greeter{static standardGreeting="hello,there";//static静态属性,在此只能用Greeter.而不能用this.;greeting:string;greet(){if(this.greeting){return "hello"+this.greeting}else{return Greeter.standardGreeting}}
}
let greeter1:Greeter;
greeter1=new Greeter();
console.log(greeter1.greet())let greeterMaker :typeof Greeter=Greeter;//取Greeter的类型:包含了静态属性和构造函数
greeterMaker.standardGreeting="Hey,greeter!"let greeter2:Greeter=new greeterMaker();
console.log(greeter2.greet())
函数
let myAdd:(baseValue:number,increment:number)=>number
=myAdd=function(x:number,y:number):number{return x+y}//函数的声明参数和返回值的类型
//参数里面写了几个,传的时候就应该是几个。而且类型必须相等。可在参数前+'?'表示可选参数
剩余参数
function buildName(firstName:string,...restOfName:string[]){return firstName+""+restofName.join("")
}
let buildNameFun:(fName:string,...rest:string[])=>string=buildName
this
interface Card{suit:string,card:number
}
interface Deck{suits:string[];cards:number[];createCardPiker(this:Deck):()=>Card
}
let deck:Deck={suits:["hearts","spades","clubs","diamous"],cards:Array(52),createCardPiker:function(this:Deck){return ()=>{let pikerCard=Math.floor(Math.random()*52);let pidedSuit=Math.floor(pikerCard/13);return {suit:this.suits[pikedSuit],card:pikerCard%13}}}
}
泛型<T>
function identity<T>(arg: T): T {//规定参数是什么类型,返回值就应该是什么类型return arg;
}function loggingIdentity<T>(arg: Array<T>): Array<T> {console.log(arg.length); //数组类型return arg;
}
interface GenericIdentityFn<T> {//泛型接口(arg: T): T;
}function identity<T>(arg: T): T {return arg;
}let myIdentity: GenericIdentityFn<number> = identity;
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; };
枚举enum
enum Enum {A = 1,//常数枚举B = A * 2 //计算
}const enum Directions {//常数枚举第一个没有初始化的话默认为0,其后依次加1Up,Down,Left,Right
}let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]
//var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];declare enum Enum {//外部枚举A = 1,B,C = 2
}
类型断言
let x = 3;//最基本的x会被推断为number类型function createZoo(): Animal[] {return [new Rhino(), new Elephant(), new Snake()];
}
//这个例子里,最佳通用类型有4个候选者:Animal,Rhino,Elephant和Snake。 当然, Animal会被做为最佳通用类型。
//上下文归类通常包含函数的参数,赋值表达式的右边,类型断言,对象成员和数组字面量和返回值语句。 上下文类型也会做为最佳通用类型的候选类型。
TypeScript 2相关推荐
- 超简单的react和typescript和引入scss项目搭建流程
1.首先我们先创建一个react项目,react官网也有react项目搭建的命令 npx create-react-app my-app cd my-app 2.安装我们项目需要的样式依赖,这个项目我 ...
- 老码农绝密:使用 TS(TypeScript) 的 10 大理由
最近,小编读了一篇名为<放弃 TypeScript 的 7 个非常好的理由>,这篇文章的阅读量不低.里面有些观点确实有趣,不过在这里我要向你介绍使用 TypeScript 的 10 个理由 ...
- 设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
Ctrl+Shift+S→编辑器→Code Style→JavaScript或TypeScript→Punctuation 1.每行代码结尾自动加上;分号: Use(下拉框选Use)semiconlo ...
- 为TypeScript项目生成API文档
为TypeScript项目生成文档 使用typedoc为TypeScript项目生成API文档. 1. 使用typedoc生成HTML文档 需要安装 typedoc. npm i typedoc 可以 ...
- TypeScript 1
TypeScript 的由来 TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程语言. TypeSc ...
- TypeScript学习笔记之 接口(Interface)
在java中,接口是用来定义一些规范,使用这些接口,就必须实现接口中的方法,而且接口中的属性必须是常量. javascript中是没有接口的概念的.所以TypeScript在编译成 JavaScrip ...
- c# typescript_在任何IDE中从C#,Java或Python代码获取TypeScript接口的简单方法
c# typescript by Leonardo Carreiro 莱昂纳多·卡雷罗(Leonardo Carreiro) 在任何IDE中从C#,Java或Python代码获取TypeScript接 ...
- 如何在React中使用Typescript
TypeScript can be very helpful to React developers. TypeScript对React开发人员可能非常有帮助. In this video, Ben ...
- 使用Typescript的巧妙React上下文技巧-不是Redux
by Bill Girten 比尔·吉尔滕(Bill Girten) 使用Typescript的巧妙React上下文技巧- 不是 Redux (Clever React context tricks ...
- 使用TypeScript映射和条件类型使React组件更出色
by Deepu K Sasidharan 通过Deepu K Sasidharan 使用TypeScript映射和条件类型使React组件更出色 (Make your React component ...
最新文章
- r语言x c(-1 -2),【软件】R语言入门之向量
- HDU - 4497 GCD and LCM
- python中下拉菜单大小_自动化测试——Selenium+Python之下拉菜单的定位
- python实例 71,72
- nacos enablediscoveryclient_Spring Cloud(五):注册中心nacos篇
- python---之np.prod() 函数计算数组元素乘积等
- ubuntu文字界面与图形界面切换
- macOS Command - xcode-select
- 【推荐】中国计算机学会推荐国际学术会议和期刊目录——CCF的会议与期刊分级
- C语言用字母ABC输出菱形,C语言输出菱形的方法
- 用Photoshop制作印章
- rk3399 Android9.0 ota升级失败
- 细菌实验分组(C程序设计进阶第2周)
- 【leetcode】出界的路径数----迭代问题与计算思维
- 必须要知道的多媒体知识-音视频编解码-h265、h264-直播-点播
- 记录错误:ImportError: No module named ‘tools‘。jupyter无法import第三方文件夹的库
- 微信小程序杂技之---九宫格图片排版与操作
- C语言编程统计八皇后问题的解的个数,八皇后问题C语言解法
- linux下搜索文件名,Linux系统中怎么搜索文件命令大全
- 微软软件开发技术二十年回顾-COM、OLE、ActiveX及COM+篇
热门文章
- 财务学python可以做什么-财务方面的学生如何学习python?
- VMware VCP 认证考试电子版证书下载方式
- html5 游戏 动画设计,11款效果惊艳的HTML5动画应用
- npm WARN webpack-cli@3.3.11 requires a peer of webpack@4.x.x but none is installed. You must install
- 安徽计算机在职研究生学校,安徽在职研究生招生学校2020
- OBS美颜滤镜插件,美白、瘦脸....
- 【算法学习笔记】67.状态压缩 DP SJTU OJ 1383 畅畅的牙签袋
- 客户信息的收集办法有哪些 如何进行客户信息管理
- swift 自定义画渐变色折线图
- 钉钉勋章在哪看?钉钉勋章查看方法