什么是TypeSciprt
介绍
TypeSciprt是JavaScript的一个超集，主要提供了类型系统和对ES6的支持。
官网定义：
TypeScript is a typed superset of JavaScript that compiles to plain
JavaScript. Any browser. Any host. Any OS. Open source.
翻译成中文:
TypeScript 是JavaScipt的类型的超集，它可以编译成春JavaScript。编译出来的JavaScipt可以运行在任何浏览器上。TypeScipt编译工具可以运行在任何服务器和任何系统上。TypeScirpt是开源的。
优势
TypeScipt以下会简称为TS，JavaScipt以下会简称为JS
- TS增加了代码的可读性和可维护性
- TS会在编译阶段就会发现错误，而不必等到运行的时候才发现错误
- TS是JS的超集，.js文件可以直接重命名为**.ts**即可
- 兼容第三方库，即使第三方库不是用TS写的，也可以编写成单独的类型文件供TS使用
缺点
- 学习成本比较高，需要理解接口（Interfaces）、泛型（Generics）、类（Class）、**枚举类型（Enums）**等前端可能不熟悉的概念
- 短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TS能够减少其维护成本。
- 集成道构建流程需要一些工具
- 可能和一些第三方库结合不是很完美
安装
- 安装好nodejs后，TS的命令行工具安装方法：
npm install -g typescript
- 以上命令回在全局环境下安装 tsc命令，可以在任何地方执行tsc命令
编译一个 TS 文件：
hello.ts中：
function sayHello(person:string){
return 'Hello'+person;
}
let user='Tom';
console.log(sayHello(user))
然后执行：
tsc hello.ts
TS中，使用**:指定变量的类型，:的前后有没有空格都可以。
上述例子中，我们用:指定person参数类型为string**。
TS只会进行静态检查，如果发现错误，在编译的时候就会报错。
基础
布尔值
布尔值是最基础的数据类型，在TS中，使用boolean定义布尔值类型：
let isDone:boolean=false
//编译通过
注意，使用构造函数 Boolean创造的对象不是布尔值：
let createByNewBoolean:boolean=new Boolean(1);
// Type 'Boolean' is not assignable to type 'boolean'.
// 'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.
在TS中，boolean是JS中的基本类型，而Boolean是JS中的构造函数。其他基本类型（除了null和undefine）一样，不再写。
数值
使用number定义数值类型：
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
var decLiteral = 6;
var hexLiteral = 0xf00d;
// ES6 中的二进制表示法
var binaryLiteral = 10;
// ES6 中的八进制表示法
var octalLiteral = 484;
var notANumber = NaN;
var infinityNumber = Infinity;
字符串
使用string 定义字符串类型：
let myName:string='Tome';
let myAge:number=25;
//模板字符串
let sentence:string=`Hello,my name is ${myName} I'll be ${myAge + 1} years old next month.``
编译结果
var myName = 'Tom';
var myAge = 25;
// 模板字符串
var sentence = "Hello, my name is " + myName + ".
I'll be " + (myAge + 1) + " years old next month.";
其中 ` 用来定义ES6中的模板字符串，${expr} 用来在模板字符串中嵌入表达式
空值
JS中没有空值（void）的概念，在TS中，可以用void表示没有任何返回值的函数：
function alertName():void{
alert('My name is Tom')
}
声明一个void 类型的变量没什么用，因为你只能赋值为undefined 和 null
let unusable:void=undefined
NULL和Undefined
在 TS中，可以使用 null 和 undefined 来定义这两个原始数据类型：
let u:undefined =undefined ;
let n:null=null;
与void的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给number类型的变量
//不会报错
let:number=undefined;
//这样也不会
let u:undefine;
let num:number=u
//而 **void** 类型的变量不能赋值给 **number**类型的变量：
let u:void;
let num:number=u;
// Type 'void' is not assignable to type 'number'.
任意值
任意值（Any）用来表示允许赋值为任意类型。
理解：如果一个普通类型，在赋值过程中改变是不允许的，但是如果是any 类型则是允许赋值为任意类型。声名一个变量为 任意值（any）之后，对它的任何操作，返回的内容的类型都是任意值。
let myNumber:string='string';
myNumber=1;
//Type 'number' is not assignable to type 'string'.
let myAny:any=1;
myString='aaaa'
myString=false
//正确
变量如果在声明的时候，未指定其类型并且没有赋值，那么它会被识别未任意值类型：
let something;
something = 'seven';
something = 7;
///等价于
let something:any;
something = 'seven';
something = 7;
类型推论
如果没有明确的指定类型并且没有赋值，那么TS会以找类型推论（Type Inference）的规则推断出一个类型。
let myNumber='even';
myNumber=1;
//Type 'number' is not assignable to type 'string'.
联合类型
联合类型（Union Types）表示取值可以为多种类型中的一种。联合类型使用** | ** 分割每个类型。
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
//正确
let myFavoriteNumber: string | number;
myFavoriteNumber = true;
// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
// Type 'boolean' is not assignable to type 'number'.
这里 let myFavoriteNumber: string | number; 的含义是：允许myFavoriteNumber的类型是string或者number，但是不能是其他类型。
访问联合类型的属性和方法
当TS不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性和方法：
function getString(something:string|number):string{
return something.toString();
}
//正确
//
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错
// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.
/*上例中myFavoriteNumbe=r 被推断成了 string，访问它的 length 属性不会报错。
而 myFavoriteNumber=7 被推断成了 number，访问它的 length 属性时就报错了。*/
对象的类型——接口
在TS中，我们使用接口（Interfaces）来定义对象的类型。
什么是接口
在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要有类（class）去实现（implement）。
TS中的接口是一个非常灵活的概念，除了可用于对类一部分行为进行抽象以外，也常用于对[对象的形态（Shape）]进行描述。
interface Person{
name:string,
age:number
}
let tom:Person={
name:'Tom',
age:25
}
//正确
let som:Person={
name:'som'
}
//错误：Property 'age' is missing in type '{ name: string; }' but required in type 'person'.
// 定义的变量 必须与接口的属性一致
上面的例子中，我们定义了一个接口Person，接着定义了一个变量tom，它的类型是Person。这样，我们就约束了tom的形状必须和接口Person一致。
理解：interface是个属性的集合
可选属性
interface Person{
name:'string',
age?:number
}
let tom:Person={
name:'Tom'
}
//正确：在属性的后面加个 ? 号指明此属性是可有可无的
任意属性
有时候我们希望一个接口允许有任意的属性，可以使用如下方式：
interface Person{
name:string,
age?:number,
[propName:string]:any;
}
let tom:Person={
name:'Tom',
gender:'mal'
}
//正确
注意：一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它类型的子集
interface Person{
name:string,
age?:number,
[propName:string]:string;
}
let tom:Person={
name:'Tom',
age:25,
gender:'male'
}
//Property 'age' of type 'number | undefined' is not assignable to string index type 'string'.
//Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'. Property 'age' is incompatible with index signature. Type 'number' is not assignable to type 'string'.
上面的例子中，任意属性的值允许是string，但是可选属性age的值却是number，number不是string的子属性，所以报错
一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：
interface Person{
name:string,
[propName:string]:string|number
}
let tom:Person={
name:'Tome',
age:11,
gender:'male'
}
只读属性
readonly 定义只读属性，只读的约束在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候
interface Person{
readonly id:number,
name:string,
age?:number,
[propName:string]:any
}
let tom:Person={
id:89757,
name:'Tom',
gender:'male'
}
tom.id=1111;
//error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
