一分钟入门TypeScript

介绍

typescript是Javascript超集,是JavaScript+强类型

跨平台:TypeScript 编译器可以安装在任何操作系统上,包括 Windows、macOS 和 Linux。

ES6 特性:TypeScript 包含 ECMAScript 2015 (ES6) 的大部分特性,例如箭头函数。面向对象的语言:TypeScript 提供所有标准的 OOP 功能,如类、接口和模块。

静态类型检查:TypeScript 使用静态类型并帮助在编译时进行类型检查。因此,你可以在编写代码时发现编译时错误,而无需运行脚本。

可选的静态类型:如果你习惯了 JavaScript 的动态类型,TypeScript 还允许可选的静态类型。

1、安装

cnpm install -g typescript

2、编写ts代码

// 1-hello.ts
function foo(a:number,b:number){
  return a+b;
}

let result = foo(1,2);
console.log(result);

3、编译运行

$ tsc 1-hello.ts  ---将ts文件编译为js文件
$ node 1-hello.js  ---运行js文件

4.基础类型

TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型

// 布尔类型
let isDone: boolean = false;
// 数字
let num: number = 6;
// 字符串
let name: string = "bob";
// 数组
let list: number[] = [1, 2, 3];
// 泛型
let list: Array = [1, 2, 3];
// undefined
let u: undefined = undefined;
// null
let n: null = null;

引用数据类型
let arr1:Array=[4,5,6];
let arr:Object[]=['1','2'];
既有uumber又有string 
let arr: (number | string)[] = [1, 'a', 3, 'b']

let foo:Function=()=>{};

元组

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为 stringnumber类型的元组。

let x:[string,number]
x = ['hello',1]
console.log(x);     //['hello',1]
console.log(x[0]);  //hello
console.log(x[1]);  //1

枚举

enum类型是对JavaScript标准数据类型的一个补充。

enum Season {spring, summer, autumn,winter}

字符串枚举

enum Direction {    Up = "UP",    Down = "DOWN",    Left = "LEFT",    Right = "RIGHT", }

Any

有的时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用any类型来标记这些变量:

let a:any = 3;
a = true;
console.log(a);

void

某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是void

function foo() :void {  console.log('this is foo'); } foo();

object

object表示非原始类型,也就是除number,string,boolean,symbol,null或undefined之外的类型。

let o : object;
o = {name:'terry'}
console.log(o);

函数的可选参数

可选参数:在可选参数名的后面添加 ?(问号)

function mySlice(start?: number, end?: number): void {
  console.log('起始索引:', start, '结束索引:', end)
}

字面量类型

let str1 = 'Hello TS'
const str2 = 'Hello TS'

5.面向对象

1.接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

接口可以理解为是抽象到极致的抽象类,接口中只能存在抽象方法和属性。接口通过interface关键字来声明;

接口是需要实现得 类是可以继承

类实现接口必须具有接口得属性和方法,方法一般情况为一个没有方法体得方法

// 类接口
interface StudentInterFace{
	name:string;
	say(msg:string):void  //未实现方法
}
class Student implements StudentInterFace{
	name:string;
	constructor(name){
		this.name=name
	}
	say(msg: string): void {
		console.log(this.name+'说'+msg);
	}
	foo(){

	}
}
let student:StudentInterFace=new Student('terry');//父类得引用指向子类实例
student.say('hello');
// 对象接口  创建出来的对象可以使用接口去实现
enum Gender{
	male='男',
	female='女'
}
class Student{
	name:string;
	age:number;
	gender:Gender;
	weight?:number
}
interface PropInterFace{
	data:Array,
	visible:boolean
}
let prop:PropInterFace={
	data:[{
		name:'zhangsan',age:12,gender:Gender.male
	}],
	visible:false
};
console.log(prop);

javascript关于类得侧重点主要是原型对象
class Person{
	foo(){}
	bar(){}
}
let p1=new Person()
p1.var()
p1.foo()
面向对象类 类是创建对象得模板 一个类可以创建多个对象 
人 你好
张三 你好 
人 张三=new 人()

多态(一个对象多种形态)

父类类型得引用指向子类对象,通过该引用可以访问到父类得特性(属性、方法),但是无法访问子类得特性;

如果子类对父类得特性进行重写,通过该引用调用的重写特性依旧为子类特性。

重写

重写 如果子类中方法签名与父类一致 则会对父类方法进行重写

// 类 
// es6 类 构造函数的另一种写法 创建对象的模板 一个类可以创建多个对象
// 人 你好
// 张三 你好
// 人 张三 = new 人()
enum Gender{
	male='男',
	female='女'
}
class Person{
	name:string;
	gender:Gender;
	say():void{
		console.log('普通讲话');
	}
}
class Student extends Person{
	stuNo:string;
	say():void{
		console.log('高端讲话');
	};
	study():void{
		console.log('好好学习,天天向上');
	}
}
// 纯粹的面向对象 new创建实例 一个对象有多种状态 ---多态
// 重写 如果子类中方法签名与父类一致 则会对父类方法进行重写
let s1:Student=new Student(); //父类得引用指向子类对象
s1.name='terry';
s1.gender=Gender.female;
console.log(s1);
s1.say();
s1.study();
// 字面量得形式 类型限制
let s2:Student={
	stuNo:'10010',
	name:'terry',
	gender:Gender.female,
	say():void{
		console.log('普通讲话');
	},
	study():void{
		console.log('好好学习,天天向上');
		
	}
};

抽象类

什么是抽象类? ​ 一般情况下,抽象类无法创建对象,抽象类中可以存在抽象方法,没有方法体得方法就是 ​ 抽象方法只有抽象签名,抽象类中可以存在抽象方法和非抽象方法,一个类中具有抽象方法, ​ 那个该类一定是抽象类 ​ 存在得意义? ​ 为了让其它类继承抽象类,并强制要求子类实现抽象方法;

子类继承抽象类 1.子类必须实现抽象类中得方法 2.子类成为抽象类

abstract class Person1{
	abstract study():void;
}
// 只要继承抽象类
// 1.子类必须包含抽象类中得抽象方法
class Student3 extends Person1{
	study(): void {
		console.log('好好学习,考上了广西科大');
	};
	cook():void{
		console.log('在广西科大,学会了做饭');
	}
}
let s2:Student3=new Student3();
s2.study();
s2.cook();
// 2.子类成为一个抽象类
// abstract class Student1 extends Person{
// 	abstract study(): void;
// }

访问修饰符

用于修饰类中的成员属性及成员方法(实例属性、实例方法)

访问权限

public 公开 当前类、子类、其他类

protected 受保护 当前类、子类

private 私有 当前类

class Person2{
	public name:string;
	protected age:number;
	private weight:number;
	protected foo(){
		console.log(this.name);
		console.log(this.age);
		console.log(this.weight);
	}
	constructor(name:string,age:number,weight:number){
		this.name=name;
		this.age=age;
		this.weight=weight;
	}
}
class Student2 extends Person2{
	constructor(name:string,age:number,weight:number){
		super(name,age,weight)
	}
	bar(){
		// super 父类实例得引用
		// console.log(super.age);
		super.foo()
	}
}
let s3=new Student2('terry',12,50);
s3.bar()
console.log(s3);
console.log(s3.name);

readonly修饰符

你可以使用 readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。

class Octopus {
 readonly name: string;
 readonly numberOfLegs: number = 8;
 constructor (theName: string) {
     this.name = theName;
 }
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.

ts--面试

1.子类继承父类,通过父类类型引用可以指向子类对象吗?[可以] class Child extends Parent{ } let c1:Person=new Child() 2.通过父类类型得引用可以调用子类得特性吗?[不可以] 3.什么是重写? 子类继承父类?子类中方法的签名与父类一致,子类的方法回重写父类得方法 就近原则 4.如果子类对父类进行了重写,通过父类类型引用指向子类体现谁的特点?(子类方法) 5.什么是抽象类? 1.无法实例化 2.抽象类存在抽象方法和非抽象方法 3.如果一个类中包含了抽象方法,该类一定是抽象类 4.如果一个类继承了抽象类,并且这个抽象类中有多个抽象方法 那么子类1.实现所有的抽象方法 2.成为抽象类 6.什么是接口?接口就是抽象到极致的抽象类 如果一个类实现了接口,那么这个类需要将接口中所有未实现方法进行实现

7.如何实现一个接口

class Student implements StudentInterFace{}

8.接口可以继承吗?

子接口可以将父接口中所有的未实现方法进行继承

9.在ts中,可以进行多继承吗?可以进行多实现吗?

你可能感兴趣的:(ts,typescript,javascript,前端)