TypeScript基础

什么是TypeScript?

TypeScript 是 JavaScript 的超集;
通俗点也可以理解成TypeScript是JavaScript的扩展语法
TypeScript 生于JavaScript 忠于JavaScript
就像Sass Less 一样; 虽然用Sass Less 的语法但是最终会编译成css,
TypeScript 也一样,虽然用的是TypeScript进行编写,最后还是会编译成JavaScript

简单点说,ts可以理解成一种规则,规定js声明变量的时候必须加上数据类型,函数返回时,也要添加返回的类型

TypeScript的使用:

第一步安装TS

	npm install typescript -g
	`如果是mac`:sudo npm install typescript -g

第二步配置环境

	1.项目目录下初始化项目     npm init -y		生成package.json文件
	2.创建 `tsconfig.json`  tsc --init   tsconfig.json是TypeScript的配置文件
	3.安装@types/node 	   npm install @types/node --dev-save  解决模块声明问题

第三步使用:

	1.创建hello.ts文件,
	2.在命令行用 tsc hello.ts 编译,会自动生成一个hello.js
	3.在命令行用 node hello.js 运行代码

TS中类型:

TypeScript中的数据类型有：
undefined ;
number:数值类型;
string : 字符串类型;
boolean: 布尔类型；
enum：枚举类型；
any : 任意类型;
void：空类型；
Array : 数组类型;
tuple : 元祖类型; 已知声明一个数组,数组里面的类型可以不同; *****项目中不推荐使用
Null ：空类型。

	//js 声明变量
	var arr;
	//ts 声明变量
	var arr:number;  ---> 这个arr变量的类型是number, 一般TS声明的变量类型不可以更改;
	var arr:string;  ---> 这个变量的类型是string; 
	...
	enum arr{ nan, nv }  --->这个变量类型是枚举类型, 没有赋值返回索引
	console.log(arr.nv) //1 返回的是索引 跟数组相似
	也可以给赋值 
	enum arr{ nan='男', nv='女' } 赋值返回value值
	console.log(arr.nan) // 男
	
```数组表示的3种方法```
//1:类型+[]
var arr:number[]	   -->这个变量是数值类型的数组 
//2.数组泛型 Array<elemType> 
var arr:Array<string>  -->这个变量是字符串类型的数组
//3.接口方法表示
interface iArr{
	[index:number]:number
}
var arr:iArr = [1,2]
//解析: 变量arr的类型是iArr 数组是数值类型的数组
`联合类型`
var arr :number|string
//解析: arr 可以是number 也可以是string 这就是所谓的联合类型

类型断言

1.(<类型>值)
2.(值 as 类型)
断言类型只是做类型的选择,而不是类型的转化
断言类型只是做类型的选择,而不是类型的转化
断言类型只是做类型的选择,而不是类型的转化
重要的问题说3遍~~~~

	function fn(name:string|number){
	   console.log(name.length)//会报错,number类型没有lenght
	   console.log((<string>name).length)//正确
	   console.log((name as string).length)//正确
	}

函数

	function boy (name:string,age?:number):string{
	`解析:这个函数的参数name必须是string类型,age必须是number类型 返回的必须也是string`
	`age?:number 可选参数,可传可不传`
	return `我叫${name}年龄${age}`
	}
	console.log(boy('bob',18)) //我叫bob年龄18

注意 :
1.如果函数内有return 返回数据类型,没有就写:void 空
2.可选参数必须配置到最后面

TS面向对象

	class Xiaojiejie{  
		var name:string
		var age:number
		constructor(name:string,age:number){
			this.name = name
			this.age = age
		}
		say():void{
			console.log('hello')
		}
	}
	var xiaojiejie:Xiaojiejie = new Xiaojiejie('小姐姐',18)
	//解析: xiaojiejie 这个变量的类型就是类名称  

点击跳转面向对象详细介绍

extends继承

class Father{
	say():void{
		console.log('我是爸爸')
	}
class Son extends Father{

}
var son:Son = new Son()
son.say()
}

如果要重写父元素的方法 用super.父元素方法调用

class Father{
	say():void{
		console.log('我是爸爸')
	}
class Son extends Father{
	say():void{
		super.say()
		console.log('找小姐姐')
	}
}
var son:Son = new Son()
son.say()//先打印  我是爸爸  再打印找小姐姐
}

访问修饰符

修饰符

1. public 共有的
2. protected 受保护 只有熟悉的人才知道
3. private 私有
4. readonly 只读修饰符

	class Xiaojiejie{
    public sex:string 
    protected name:string
    private age:number
    public constructor(sex:string,name:string,age:number){
        this.sex = sex
        this.name = name
        this.age = age
    }
    public say(){
        console.log('Hello')
    }
    protected sayLove(){
        console.log('love you')
    }
}
var Jiejie:Xiaojiejie = new Xiaojiejie('男','bob',18)
console.log(`${Jiejie.sex}`)  //可以访问
console.log(`${Jiejie.name}`) //属性受保护,只能Xiaojiejie这个类以及子类能访问
console.log(`${Jiejie.age}`) //私有的只能在Xiaojiejie这个类中访问

class Man{
    public readonly sex:string = '男'
}
var man:Man = new Man()
man.sex = '女' //只读,不可以赋值

如果省略修饰符 , 默认是public,不允许多重继承

一个男人只能和一个人女结婚, 品, 细细的品!

TypeScript接口 interface

接口就是定义一种规范或者说是要求
小姐姐想找男朋友需要 高富帅,这就是规范或者要求
必须满足小姐姐要求的才有可能成为好朋友哈

//1 用 interface 关键字定义接口
interface Husband{
	sex:string //sex 必须是字符串
	age:number //age 必须是number
}
let mybob:Husband = {sex:'男',age:18}
//解析: mybob想当小姐姐的男的朋友 看看需求是不是符合
//mybob的类型就是Husband
//{sex:必须是string类型,age:必须是numbenr}