TypeScript简介
typescript是由微软发明,是javascript的类型的超集,可以编译成javascript,运行在浏览器中的开源语言。它试图取代javascript,然而现在并没有实现,但是,现在很多的库和组件已经开始接受typescript,因此typescript的学习也变得很有必要。
为什么typescript会出来,可能就是因为javascript实在是缺乏太多的东西。js连一个类型的都不支持,以及js连面向对象的基本特性比如抽象比如接口都不支持。当然了,微软也是一个爱发明编程语言的公司。
typescript的优势肯定是由很多的,比如它开始支持类型,抽象和接口等js所没有的特性。typescript更加的严谨,更适合大型项目的开发,比如java,就是一门超级严谨的语言,不允许你犯任何低级的错误。
如何开始使用typescript
- 全局安装typescript npm install -g typescript
- 编译typescript tsc XX.ts -> XX.js
- 运行编译后的js node XX.js
TypeScript基本语法
类型
这里的类型包括参数类型,变量类型和返回值类型。我们可以给一个变量,参数或者是返回值定义一个类型,这样我们就不能随便更改类型。
指明类型:
- 显示声明 let a:string;
- 隐式声明 let a='abc' (专业术语叫类型推断)
// 常用的变量类型
let num:number = 12;
let num:boolean = true;
let num:string = 'abc';
let num:any;
// 参数类型
function add (a:number, b:number) {
return a+b;
}
// 返回值的类型
function add (a:number, b:number): number {
return a+b;
}
// 数组类型
let c: number[] = [1,2,3];
let c: Array<number> = [1,2,3]
// 在数组中加入别的类型(使用any或者联合类型用在数组中)
let c: any = [1,2, 'abc'];
let c: (number|boolean) = 12;
let c: (number|boolean) = true;
let c: (number|string)[] = [12, 23, 'abc'];
c.push(true) //error!!!
// 枚举类型
enum Gender { Male, Female };
let gender: Gender = Gender.Male ;
// 元祖类型
let e: [number, boolean] = [12, true]
let e: [number, boolean] = [true, 12] //error
// 一般不给一个变量声明void
let a: void ;
let a: void = 12; error! 我们不能给void变量赋值
// 一般给没有返回值的函数声明一个void,虽然它默认式void
function show(name: string): void {
console.log(`${name}`);
}
// null 和 undefined 类型只能装null 和 undefined
let a: undefined = undefined;
let a: null = null;
// never 从不,绝不
let param: never = 12; error!!
// 如果你声明一个函数的返回值为never, 则这个函数不应该让它执行结束
function show(): never {
let a:string = 'abc'
throw new Error('error!') //这个时候,函数运行到半路报错,所以不会运行到头
}
// 关于json的类型
let json: {a: number, b: number} = { a: 1, b: 1}
类
ES6中的类
es6中的类存在的问题: 属性都是动态的加载到构造函数中, 而我们想要一开始就规定有哪些属性。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
show () {
console.log(`my name is ${this.name}, and my age is ${this.age}`)
}
}
let person = new Person('Lili', 12);
person.show();
TypeScript中的类
typescript中类的问题: 我们可以在类的外部访问或者是修改类的成员。
class People {
name: string;
age: number;
constructor (name: string, age:number) {
this.name = name;
this.age = age;
}
show (): void {
console.log(`my name is ${this.name}, and my age is ${this.age}`);
}
}
let people: People = new People('Lili', 13);
people.show();
// 外部还可以访问和修改name,age
people.name="Mike",
people.age = 33;
people.show(); //my name is Mike, and my age is 33
因此我们给类添加修饰符,修饰符有访问修饰符和其它修饰符。
- 访问修饰符
- public: 公共的,带有这个修饰符的成员可以在任何地方被访问。
- private: 私有的, 带有这个修饰符的成员只能在自己的类中的得到访问。
- protected: 保护的, 带有这个修饰符的成员可以在自己的类和子类中得到访问。
class A {
protected name: string;
private age: number;
constructor (name: string, age: number) {
this.name = name;
this.age = age;
}
show () {
console.log(`my name is ${this.name}, and my age is ${this.age}`)
}
}
class B extends A {
public job: string;
constructor (name: string, age: number, job: string) {
super(name, age);
this.job = job;
}
public show () {
super.show();
console.log(this.name); //name是protected, 是允许在子类中使用的
// console.log(this.age); //error age is private
console.log(`我的岗位是 ${this.job}`)
}
}
let b = new B('Mike', 12, 'doctor');
b.show();
- 其它修饰符
- static:静态成员,类无需实例化即可调用。
- const:只读成员
class D {
public static age: number = 12 ;
// public static name: string = 'Lili'; // error
// public const static age:number = 13; //error 不能对静态成员使用const
constructor( age: number, private name: string) {
// this.age = age; //error age is not exist 因为有static,age属性不在这个类的实例里面,而this就是指向类的实例,而age此时是属于整个类
}
}
let d = new D(12, 'Lili')
console.log(D.age)
D.age = 33;
console.log(D.age) //可以被改变
typescript中简写的类
class C {
constructor ( private name: string, protected age: number){
// 省略了三步
// 1.声明一个属性
// 2.声明一个参数
// 3.将参数赋值给属性
}
public show (): void {
console.log(`my name is ${this.name}, and my age is ${this.age}`)
}
}
存取器
当我们想要使用私有成员,而不想在外暴露,那么这时候可以使用存取器 get / set 来解决。
class F {
private _name: string;
constructor (_name: string) {
this._name = _name;
}
get name (): string {
return this._name;
}
set name (newName: string) {
this._name = newName;
} //这里返回值设置为void,报错???
}
let f = new F('Kim');
f.name='Yu';
console.log(f.name)
抽象类
抽象类只能直接作为父级使用,不能直接被实例化。
抽象类中的抽象方法不应该有方法体,而且必须在继承抽象类中的子类中必须实现抽象方法。
抽象类的特点: 只提供一个模板,而不去自己实现,目的是去规范它的一个子类。
abstract class Shape {
abstract area(): number;
fun1 () {
console.log('抽象类也可以实现某些非抽象方法')
}
}
class Circle extends Shape {
constructor(private r: number) {
super ();
}
area () {
return Math.PI*this.r*this.r
}
}
接口
接口使用implements来实现的,而不是使用extends来继承。
interface Shap {
area (): number;
}
class React implements Shap{
constructor(private width: number, private height: number){
}
area (): number{
return this.width * this.height;
}
}
let react = new React(12,23);
console.log(react.area())