typescript的深入讲解,值得阅读

tsc hello.ts
node hello.js
ts转为js,才可以在node中执行
第二种方式运行
安装命令:npm i  -g ts-node
使用方式： ts-node hello.ts
ts-node 文件名
使用 boolean 定义布尔值类型：let isDone: boolean = false;ts 
// 单行注释
ctrl+/
多行注释/**/ shift+alt+a
ts 是js的超集,为js 添加类型系统.相比js,开发体验更友好,提前发现错误,Bug 
更少,增加开发的幸福度
声明变量的并指定类型
let age: number;
给变量赋值
age=18
变量是可以变化的
age=19



变量的初始化
声明变量的同时就赋值
let age:number=20
ts的类型要注意


never类型：是其它类型（包括null和undefined）的子类型
let a:undefined
a=123 这是错误的写法
a=undefined   
let b:null
b=null

null 和 undefined 其他（never类型  数据类型的子类型
let num:number;
console.log(num) // 编译报错

let num:undefined;
console.log(num) // 输出： undefined 正确

let num1:number| undefined
console.log(num1,"定义没有赋值为undefined")

let num3= null 
num3 =133 // 报错
应该是
num3 = null 
console.log(num3)

一个元素可能是number,可能是null  可能是 undefined
let num:number | null | undefined
num = 1234
console.log(num)

变量的名称：数字 字母  下划线 美元符号（$)，并且不能以数字开头
let 2b 错 
let $name 对
let first_name 对
let @email 错
变量的名称是区分大小写的
let a:number=18错的无意义,不推荐使用
变量名称要有意义
变量名称驼峰命名法
let cityName
let yourAge

 变量的交换
let num1:number = 33
let num2:number = 2
let temp: number 
temp=num1
num1=num2
num2=temp
num1 // 2
num2 // 33


数据类型
ts数据类型
原始类型(基本数据类型)
常用的数据类型有5个
number string boolean undefined null
2对象类型(复杂数据类型)


数字类型
let size:number = 18
// 小数
let score:number=99.9 可以为正负
let age:number=+'1'
+''加后是跟数字类型


字符串类型
let food:string = '吃东西'

console.log('hello ts')


布尔类型的类型注释：boolean 真或假
let isString:boolean=true
let isPlayingGame:boolean=false


undefined null
undefiend类型的值：undefined
// 声明没有赋值
let u:undefined = undefined
或
let u1:undefined
console.log(u1)
null类型的值为null
let n:null = null
null:表示声明了变量并已赋值,值为null(能找到,值就是null)


加号的其它的作用
console.log('加'+'油');
console.log('2'-1) 报错
console.log(2-1) 1
console.log(2-+'1') 1
let age:number=+'1'


赋值运算符
let age:number=18
age=age+1 // 进行赋值 或age+=1 
console.log(age) // 19
+= *= -= /=


自增和自减     只能让变量的值增加或者减少1  不能加2或加3
let age:number=18
age++ 
console.log(age) // 19


===       !==

逻辑运算符
&&两个同时为满足
|| 只要一个为true就是true
! 取


else
在ts中else 语句必须结合if语句来使用

三元运算符
let  result:string=5>3?'大于': '小于'


let age:number=18
或者
age<18?'回家看熊':'2'
if(age<18){
    console.log('回家看熊');
}else{
    console.log('2')
}


for循环
for(let i:number=1; i<=3;i++){
    console.log('加油啊')
}


breack 
for(let i:number=1; i<=3;i++){
  if(i===3){
    break  
  }
  console.log(i)
}


continue
for(let i:number=1; i<=3;i++){
  if(i===3){
    continue // 调过本次循环,进行下次循环
  }
  console.log(i)
}


第一种：创建数组
let names:string[]=[] // 创建空数组
类型+[]
数组存储多个数据
let names:string[]=['2', '3', '4'] 规定了是string的类型


第二种：创建数组
let names:string[]=new Array('2', '3', '4')
let names:string[]=new Array()


数组的长度和索引
let foods:string[]=['we','me','jiayou']
console.log(foods.length)
console.log(foods[0])
foods[1]='mes'
foods[3]='!'

索引(下标)
数组索引是从0 开始的
let nums:number[]=[20,10,30,70,80]
let sum:number=0
for(let i:number=10,i<nums.length;i++){
    sum+=nums[i]
}


函数
正确的写法,没有返回值
// 表示方法没有返回任何类型
function run():void{
    console.log("num")
}
run()


function printLabel(label:string):void{
    console.log('printLabel')
}
printLabel('ax'); /*错误的写法*/


function printLabel(labelInfo:{label:string}):void{
    console.log('printLabel')
}
printLabel('e')                   /*错误的写法*/
printLabel({name: 'pe'})          /*错误的写法*/
printLabel({label: 'fdk'})        /*正确的写法*/

错误的写法
function run():undefined{
    console.log("num")
}
run()


 下面的写法是正确的
function run():number{
    return 123
}
run();


function sing(songName:string){
    console.log('2')
}
sing('类型为字符串类型')


匿名函数
let fun2=function():number{
    return 123;
}
alert(fun2()) /*调用方法*/


TS中定义方法传参
// 传参数类型name为string 和 age 为number 类型,返回值类型为string类型
function getInfo(name:string,age:number):string{
    return `${name}---${age}`;
}
alert('小溪', 20)


匿名函数的写法
let getInfo = function (name: string,age: string):string{
    return `${name}---${age}`;
}
alert('小溪', 20)


没有返回值的方法
function run():void{
    console.log("run")
}
run();


方法可选参数 用?这个符号
// es5里面方法实参和形参可以不一样，但是ts中必须一样,如果不一样就需要配可选参数
错误的写方法
funtion getInfo (name:string,age:number):string{
    if(age){
        return `${name}--${age}`;
    }else{
        return `${name}--年龄保密`
    }
}
getInfo("lisi")


正确的写法
age? age是可传参数
funtion getInfo (name:string,age?:number):string{
    if(age){
        return `${name}--${age}`;
    }else{
        return `${name}--年龄保密`
    }
}
getInfo("lisi",923)

默认参数
// es5里面没有法设置默认参数,es6和ts都可以设置默认参数
function getInfo (name:string,age:number=20):string{
   if(age){
       return `${name}--${age}`
   }else{
       return `${name}---年龄保密`
   } 
}
alert(getInfo("开始"))
alert(getInfo("开始",30))



剩余参数
function sum(a:number,b:number,c:number,d:number):number{
    return a+b+c+d
}
alert(sum(1,2,3,4))

参数的个数不知道,三点运算符,接受新参参数传过来的值
function sum(...result:number[]):number{
    var sum=0;
    for(var i=0;i<result.length;i++){
        sum+=result[i];
    }
    return sum;
}
alert(sum(1,2,3,4,5,6));


function sum (a:number,b:number,...result:number[]):number{
    var sum=a+b;
    for(var i=0;i<result.length;i++){
        sum+=result[i];
    }
    return sum;
}
alert(sum(1,2,3,4,5,6));


ts方法的重载
function getInfo (name:string):string;
function getInfo (age:number):string;
function getInfo (str:any):any{
    if(typeof str==='string'){
    return '我叫：'+str;
}else{
    return  '我的年龄是'+str;
}

参数的校验
alert(getInfo('文化')); // 正确
alert(getInfo(20));     // 正确
alert(getInfo(true));   //错误的写法


ts方法的重载(参数个数,不一样）
同样的方法,传的参数不一样,功能不一样
function getInfo (name:string):string;
function getInfo (name:string,age:number):string;
function getInfo (name:any,age?:any):any{
    if(age){
          return  '我的年龄是'+name+'我的年龄是'+age;
}else{ 
          return '我叫：'+name;
}

参数的校验
alert(getInfo('文化'));         // 正确
alert(getInfo(20));            // 编译错误
alert(getInfo('文化',20))
alert(getInfo('文化',true))    // 编译错误


箭头函数的this,是指定的是上下文
setTimeout(()=>{
    alert('run')
,1000})


多个参数
function sing(songName:string,age:number){
    console.log('2')
}
sing('类型为字符串类型',19)

函数和数组一起使用
注意:如果没有指定函数的返回值,那么函数返回值的默认类为void(空,什么都没有)

void类型: typescript中的void表示没有任何类型,一般用于定义方法的时候方法的返回值
// function getsum(nums:number[]):返回值的类型
function getsum(nums:number[]):number{
    let sum:number=0
    for(let i:number=0;i<nums.length;i++){
        sum+=nums[i]
    }
    console.log(sum)
    return sum 
}
let result:number=getSum([1,3,5])+getSum([2,4,6])
console.log(result)


基本使用
1.指定返回值类型 2.指定返回值
1.指定返回值类型
function fn():类型注释{
    
}


在声明函数的括号后面,通过：类型注解指定
function fn():number{
    return 返回值
}
// 注意：返回值必须符合返回值类型的类型要求,否则会报错


function fn():number {
    return 18
}
let result:number = fn()
console.log(result/10)
console.log(result/2)


函数的作用域
function fn(){
    let num:number=1
    console.log(num)
}
fn()
console.log(num) // 函数外部不可以使用


创建对象
let person={
    name:'小迷'
    age： 19,
    sayhi:function(){
        console.log('我是一个方法')
    }
}


对象的类型注解
对象类型的约束
// 此处类型的注释
let person:{
    name: string,
    age: number
}
// ts的对象
person={
    name: '刘老师'
    age: 18
}



对象的方法类型注解
 let person: {
  sayHi:()=>void
  sing:(name:string)=>void
  sum:(num1:number,num2:number)=>number
 } 


// ---
let p1:{
    sayHi:()=>void
}
p1={
    sayHi:funcion(name){  // 报错
        console.log('不错哦')
    }
}


let p2:{
    sing:(name:string)=>void
}
p2={
    sing:function(name:string){
        console.log('歌曲名'+name)
    }
}


let p3:{
    sum:(num1:number,num2:number)=>number
}
p3={
    sum:function (num1:number,num2:number){
        return num1+num2
    }
}
或者
let p2:{
    name:string
    age:number
    sayHi:()=>void
}={
    name:'rose',
    age:17,
    sayHi:function(){
        console.log('晚点不要急')
    }
}

接口 interface 接口是I开头
    接口：可选属性
    interface FullName{
        firstName: string;
        /接口的属性可传,可不传
        secondName?: string;
    }
    function getName(name:Fullname){
        console.log(name)
    }
    getName({
        firstName: "l";
        secondName: sh"";
    })


做一个请求数据的接口
定义接口传入参数的类型
$.ajax({
    type: "GET",
    url:  "text.json",
    data: {username:$("#username").val(),content:$("#content").val()},
    dataType: "json",
    });


ts定义接口传入参数的类型
interface Iconfig{
    type: string,
    url:  string,
    // 请求数据可选
    data?: string,
    dataType: string,
}
function ajax(config:Iconfig){
    
}


可索引接口
interface UseArr{
    [index:number]:string
}
var arr:UserArr=['aaa','bbb']
console.log(arr[0])

泛型
泛型就解决类接口方法的复用性,以及对不待定数据的支持


any 放弃了类型检查,传入什么,返回什么。比如：传入 number 类型必须返回number类型,
传入string类型必须返回 string类型
// 传入的参数类型和返回的参数类型可以不一致
function getData(value:any):any{
       return "哈哈哈"
}




T泛型：可以支持不特定的数据类型,要求:传入的参数和返回的参数不一致
function getData<T>(value:T):T{
        return value
}
getData<number>(123);   // 传入的和返回的都必须是number
getData<number>("123"); // 错误
getData<string>("lsh")


第二种写法
function getData<T>(value:T):any{
    return "hahaha"
}
getData<number>(123);           // 参数传必须是number类型,返回的可以是任意类型
getData<string>("这是一个泛型"); // 参数传必须是string类型,返回的可以是任意类型


interface IUser{
    name:string
    age:number
    sayHi:()=>void
}
let p1:IUser={
    name:'jack',
    age: 18
    sayHi:function(){
        console.log('晚点不要急')
    }
}
let p2:IUser={
    name:'jack',
    age: 18
    sayHi:function(){
        console.log('晚点的')
    }
}


同时返回string类型和number类型,any放弃类型检查
function getData(value:any)
     return value
}
getData(123)


泛型,可以支持不特定的数据类型,要求:传入的参数和返回的参数一样
T表示泛型,具体什么类型是调用这个方法的时候决定的
function getData<T>(value:T):T{
    return  value
}
getData<number>(123)
getData<string>('123')

 
任何类型
function getData<T>(value:T):any{
    return  value
}
getData<number>(123)
getData<string>('123')


泛型类
class Minclass{

}

数组的定义第一种方式
let arr:string[]=["php","java"]
let arr:Array<string>=["php","java"]
let arr:Array<number>=["php","java"]

元数组的类型
let arr:[string,number,boolean]=["java",18,true]


定义数组的任何(any)类型
let arr3:any[]=['123',true,90]


枚举类型
enum Flag {success=1，error=-1}
var  f:Flag=Flag.success
console.log(f) // 1


enum Flag {success=1, error=-1 }
console.log(Flag.error)


enum Color {red,blue,orange}
var c:Color=Color.orange
console.log(c)  // 输出 red没有赋值默认是0 , 从索引值开始 2

enum Color {red,blue=5,orange}
var c:Color=Color.orange
console.log(c)  // 输出 1 默认是索引值 6


原型链上面的属性会被多个实例共享 构造函数不会
原型链上的方法可以访问构造函数的属性
实列方法,要new才可以用

es5定义类
function Person(){
    this.name=name;
    this.age=age;
    this.run=function(){
        console.log(this.name)
    }
}
var p =new Person("we");
p.run();