TypeScript学习文档
1、安装TypeScript
npm install -g typescript
yarn global add typescript
注意
NPM安装时出现 npm ERR! errno ETIMEDOUT 时，可能时因为访问外网限制导致
1、查看npm镜像设置
npm config get registry
2、将npm设置为淘宝镜像
npm config set registry https://registry.npm.taobao.org
3、再次查看npm镜像设置
npm config get registry
查看TypeScript版本
tsc -v
安装调试用到使用目录包
npm i ts-node typescript
VS调试的配置文件
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "调试TS函数代码",
"runtimeArgs": ["-r","ts-node/register"],
"args": ["${workspaceFolder}/code/hello.ts"],
}
]
}
2、创建第一个TS
创建hello.ts
console.log('hello TS')
转换js
tsc hello.ts
tsc监视模式
tsc --watch index.ts
简化TS操作,安装ts-node
#安装ts-node
npm i -g ts-node
#使用
ts-node hello.ts
3、变量的使用
//声明变量
let age: number
//给变量赋值
age = 18
//打印输出变量
console.log(age)
//声明变量同时赋值
let age1: number =20
console.log(age1)
变量和常量
//let变量，变量一旦初始化之后，还可以重新赋值。
let age: number =18
//const常量，常量一旦初始化，就不能重新赋值了，否则就会报错。
const age: number =18
除了const，let，var外，在 TypeScript 中还有一些其他的声明变量的关键字，如下：
**readonly：**用于标识只读属性或只读数组，不能被重新赋值。 **static：**用于标识类的静态属性或静态方法，不需要实例化类即可使用。 **abstract：**用于标识抽象类或抽象方法，不能被实例化，只能被子类继承并实现。 public、private、protected：用于标识类的属性或方法的访问权限。
类型注解
/*
约定了什么类型，就只能给变量赋值什么类型的值
基本数据类型
*/
//数字类型
number
//字符串类型
string
//布尔类型true或false
boolean
//只有一个值，值为类型本身
//undefined找不到值，没有
undefined
//null值为空
null
4、运算符
算术运算符
//加（+）、减（-）、乘（*）、除（/）
console.log(1 + 2)
console.log(4 - 2)
console.log(2 * 2)
console.log(4 / 2)
//加号字符串拼接
console.log('我i' + 'sm什么')
//加号将字符串类型转换为数字类型
console.log(5 - +'2')
赋值运算符
//等号（=）、加等（+=）、减等（-=）、乘（*=）、除等（/=）
let age: number =18
age = age + 1
age += 1
console.log(age)
递增/递减运算符
//自增（++）是+=1、自减（--）是-=1
let age: number =18
age++
console.log(age)
比较运算符
/*
大于（>）
大于等于（>=）
小于（<）
小于等于（<=）
等于（===）
不等于（!==）
*/
console.log(5 <= 6)
逻辑运算符
//与（&&）并且、或（||）或者、非（!）不是
console.log(2>1 && 2>=2)//结果为：true
console.log(2>8 || 2>=2)//结果只要一个为true为：true
console.log(!(2>6) && 2>=2)//!取反false转true
5、条件语句
if语句
let isVip:boolean = false
if (isVip){
console.log('看完整内容')
}
else{
console.log('没有权限')
}
三元运算符
//三元运算符的作用与if..else语句类似
//作用：根据判断条件的真假，得到不同的结果
//语法：结果 = 判断条件 ? 值1(true) ：值2(false)
let result:string = 5>3 ? '大于':'小于'
console.log(result)
6、循环语句
for循环
//for (初始化语句;判断条件;计数器更新){循环体}
for(let i:number =1;i <= 3; i++){
console.log('我来计数'+ i +'次')
}
break和continue作用
//break 终止循环
for(let i:number =1;i <= 5; i++){
if(i===3){
break
}
console.log('我来计数'+ i +'次')
}
//continue 跳过本次循环，继续下一个循环
for(let i:number =1;i <= 5; i++){
if(i===3){
continue
}
console.log('我来计数'+ i +'次')
}
7、数组
创建数组
let names:string[]=['数组A','数组B','数组C']
console.log(names)
数组长度和索引
//length数组数长度
let names:string[]=['数组A','数组B','数组C']
console.log(names.length)
//索引
console.log(names[0])
存值
//修改索引值
let names:string[]=['数组A','数组B','数组C']
console.log(names[1])
names[1]='新数组B'
console.log(names[1])
//添加新索引值
names[3]='数组D'
console.log(names)
遍历数组
let names:string[]=['数组A','数组B','数组C']
for (let i:number = 0;i < names.length ;i++){
console.log(names[i])
}
案例1、取最大值
let num1:number[] = [1,2,30,4,0,9,0,0,10,33]
let num2:number = num1[0]
for (let i:number = 1; i < num1.length; i++){
if(num2 < num1[i]){
num2 = num1[i]
}
}
console.log(num2)
案例2、找出数组0元素
let num1:number[] = [1,2,30,4,0,9,0,0,10,33]
let num2:number[] = []
for (let i:number = 0; i < num1.length; i++){
if(num1[i] !== 0){
num2[num2.length] = num1[i]
}
}
console.log(num2)
8、函数
函数封装代码
/*
声明函数
function 函数名称(){
函数体
}
*/
//封装数组数字相加之和 函数
function getSum(nums:number[]){
let sum:number = 0
for (let i:number = 0;i < nums.length;i++){
sum += nums[i]
}
console.log(sum)
}
//调用函数
let shuzu:number[]=[2,4,3,6]
getSum(shuzu)
案例1、计算2个变量的和
function sum(x:number,y:number){
let num1:number = x
let num2:number = y
let result:number = num1+num2
console.log(result)
}
sum(2,4)
*函数返回值
/*
指定返回值类型
function fn():类型注解{
return 返回值
}
*/
function sum(x:number,y:number):number{
let num1:number = x
let num2:number = y
let result:number = num1+num2
//console.log(result)
return result
}
let xx:number = sum(2,4)+sum(15,5)
console.log(xx)
console.log(sum(2,4)+sum(15,15))
返回值案例1、任意三角面积
function sanJiao(a:number,b:number):number{
let area:number = 1/2 * a * b
return area
}
console.log(sanJiao(5,6))
return案例1、未满18不再执行
function play(age:number){
if(age<18){
return
}
console.log('网吧上网好爽啊')
}
play(16)//不满足条件return直接不再执行不返回值
play(29)
9、对象
创建对象
let person = {
name:'徐老师',
age:18,
sayHi:function(){
console.log('大家好我是一个方法')
}
}
对象类型注解
//对象注解
let person: {
name: string;
age: number;
sayHi:() => void
}
//创建对象
person = {
name:'徐老师',
age:18,
sayHi:function(){
console.log('大家好我是一个方法')
}
}
接口使用
//interface创建接口
interface IUser {
name: string
age:number
sayHi:() => void
}
//引用IUse类型注解
let person: IUser = {
name:'徐老师',
age:18,
sayHi:function(){
console.log('大家好我是一个方法')
}
}
取值
//interface创建接口
interface IUser {
name: string
age:number
sayHi:() => void
}
//引用IUse类型注解
let person: IUser = {
name:'徐老师',
age:18,
sayHi:function(){
//console.log('大家好我是一个方法')
return '大家好我是一个方法'
}
}
//取值
console.log(person.name)
console.log(person.age)
console.log(person.name + person.age + person.sayHi())
存值
interface zz{
name:string
age:number
}
let jay:zz = {
name:'周杰伦',
age:20,
}
//修改name属性
jay.name='蔡依林'
console.log(jay.name)
内置对象：
MDN网站
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects
W3school网站
https://www.w3school.com.cn/jsref/index.asp
查参考手册
数组对象
//常用操作：添加、删除、遍历、过滤等
//属性（length）方法（push\forEach\some）
let songs:string[]=['昨天','今天','明天']
console.log(songs.length)
//push将一个或多个元素添加到数组的末尾，并返回该数组的新长度
let len:number = songs.push('后天')
console.log(songs,len)
//forEach遍历数组
songs.forEach(function (item,index){
console.log('遍历',index,item)
})
forEach练习（判断数组中是否包含大于10的数字）
let nums: number[]=[1,12,22,3,6]
let has: boolean = false
nums.forEach(function(num){
if (num >10) {
has = true
}
})
console.log(has)
some方法：遍历数组，查找是否有一个满足条件的元素（如果有，就可以停止循环）
循环特点：根据回调函数的返回值，决定是否停掉循环。如果返回true就停止，返回false就继续循环
let nums: number[]=[1,12,22,3,6]
let has:boolean = nums.some(function(num){
console.log(num)
if(num > 20){
return true
}
return false
})
//has返回布尔值
console.log(has)
10、断言
类型断言：手动指定更具体（精确）的类型
<img id="image" src="https://static.oschina.net/uploads/user/1603/3206710_50.jpg?t=1483675086000" alt="">
let img = document.querySelector('#image') as HTMLImageElement
img.src = 'http://hwoo.com/img/hwoo.png'
//查看DOM元素类型
console.dir(img)
//读取H1内容
let titles = document.querySelector('#title') as HTMLHeadElement
console.log(titles.innerText += '--周杰伦')
11、枚举
TS使用的语法，js是没有枚举的
//枚举名称大写字母开头,枚举是一组有名字的常量（只读）的集合
enum Gender { Female='男', Male='女' }
let userGender: Gender = Gender.Female
//或
let userGender: Gender
userGender = Gender.Female
userGender = Gender.Male
12、类
1、类的继承
extends super继承的好处在于，可以更好的重用代码，以及后期更好的维护代码
class Person{
name:string;
age:number;
constructor(name,age){
this.name = name;
this.age = age;
}
}
class student extends Person{
score:number;
constructor(name,age,score){
super();
this.score = score;
}
}
extends用来继承类，implements用来实现一个接口
implements和extends 前者通过声明这个类实现一个或者多个接口，而后者通过继承父类，拥有了父类的功能，可以重写父类的方法，也可以不重写。相对于implements而言，它是实现接口，可想而知，实现接口（interface）一般为空的，所以你一般要重写接口所有的方法。一个类不能extends多个类，但是可以通过接口然后让一个类去implements多个接口
punlic class A extends B implements C,D,E 这样。
Implement接口实现
class A implements B
B是interface类型的，且他的里面的方法都是abstract类型的方法。
extends重要的地方
extends可以继承父类的方法，也可以重写他，但是要注意的是，如果父类是抽象类，内部有抽象的方法，子类在extends的时候，如果子类不是抽象类，那么子类就一定要对父类中的抽象方法进行重写。但如果子类也是抽象类，则可以不可考虑重写。extends支持子类，孙类......即可以继承多代。
interface Person{
money:number
}
//implements是对某个接口的实现，必须满足接口的类型规范
class Father implements Person {
public money: number = 1000
}
//extends是对某个类的继承，可获取父类的所有的静态属性
class Son extends Father {
constructor() {
super();
}
getMoney(): void {
console.log(this.money,333);
}
}
const son=new Son()
son.getMoney()
2、修饰符
ts里面定义属性的时候给我们提供了三种修饰符
public： //公有 在类里面、子类、类外部都可以访问
protected： //保护类型 在类里面 子类里面可以访问，在类外部没法访问
private： //私有 在类里面可以访问，在子类、类外部都没法访问