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]//元组Tuple
enum Color{Red,Blue,Green}
let x:Color=Color.Red//枚举enum
let 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,子类没有自己的this
this.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,其后依次加1
Up,
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会被做为最佳通用类型。
//上下文归类通常包含函数的参数,赋值表达式的右边,类型断言,对象成员和数组字面量和返回值语句。 上下文类型也会做为最佳通用类型的候选类型。