Typescript 学习之路

Typescript

TypeScript，简称 ts，是微软开发的一种静态的编程语言，它是 JavaScript 的超集
1.简单来说，js 有的 ts 都有，所有js 代码都可以在 ts 里面运行。
2.ts 支持类型支持，ts = type +JavaScript。
那么 ts 和 js 有什么区别呢？
1.JavaScript 属于动态编程语言，而ts 属于静态编程语言。
2.js：边解释边执行，错误只有在运行的时候才能发现
3.ts：先编译再执行，在写的时候就会发现错误了（ts不能直接执行，需要先编译成 js ）
4.ts 完全支持 js ，可以直接转换

TS用法：代码例子说明

//单属性
let a:Number=18
let b:symbol=Symbol()
console.log(b,"asdasd");
let c:number=15

//单属性多类型
let timer:null|number=null
type s =string
const ss:s='abc'

//数组两种方式
let numArr:number[]=[1,2,3]
let strArr:Array<string>=['1','2','3']


//函数
function add(a:string,b:number):any{
    return a+b
}
//箭头函数
const fun=(a:number=1,b:number=1):any=>{
    return a+b
}
fun(1,1)
//函数简写
type Fn=(ni:number,n2:number)=>number
const fun3:Fn=(a,b)=>{
    return a+b
}


//void类型（三种情况：1，函数没写return。2，只写了return，没有具体得返回值。3，return得是undefined）
function fun4(a:string){
    console.log(a)
}
//1, 什么都不写  函数得返回值为void
const fun5=()=>{}
//2,只写return其他什么都不写  函数返回值为void
const fun6=():void=>{
    return
}
//3,返回undefined 函数的返回之为void
//如第三种情况  不能直接指明返回之:undefined  这样写会报错
const fun7=():void=>{
    return undefined
}

//像直接指明返回值为void的话与上面不定情况返回之类型相同
const funS=():void=>{}



//可选参数
function fun8( a?:number,b?:number){
    console.log(111);  
}
function fun88( a:number,b:number){
    console.log(111);  
}
fun8()
fun8(1,2)
fun8(1,2)


// 对象   
// const 对象名: {
//     属性名1：类型1，
//     属性名2?：类型2，
//     方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
//     方法名2:(形参1: 类型1，形参2: 类型2) => 返回值类型
//   } = { 属性名1: 值1，属性名2：值2  }
  
//l类型别名Type

type obj={
    a:string,
    b?:number,
    fun10():void
}
let obj1:obj={
    a:'1',
    b:18,
    fun10(){}
}

//两种形式描述对象 1：类型别名 type   2：接口 interface

//interface声明接口
interface obj2{
    name:string,
    price:number,
    fun11:()=>string
}
//利用声明得接口名称作为变量的名称
const good1:obj2={
    name:'1',
    price:200,
    fun11:function(){
        return '1'
    }

}
const good2:obj2={
    name:'1',
    price:200,
    fun11:function(){
        return '1'
    }

}


//接口类型interface和类型别名type对比
//相同点：都可以给对象指定类型
//不同点：1，接口只能给对象指定类型（可以继承）2，类型别名，不仅可以给对象指定类型，实际上可以为（任意类型）指定别名
//先又得interface后有得type推荐使用type

//写法   接口得写法
interface Person1{
    name:string,
    age:number,
}
const user1:Person1={
    name:'1',
    age:12
}

//写法 类型别名
type Person2={
    name:string,
    age:number
}
const user2:Person2={
    name:'1',
    age:12
}

//接口得继承
//注意：在日常开发中   如果两个接口之间又相同得属性或者方法，可以将（公共得属性或者方法抽离出来，通过继承extends实现复用）语法：
 interface obj3{
    a:number,
    b:number,
 }
//  interface obj4{
//      a:number,
//      b:number,
//      c:number
//  }

//obj4利用继承

interface obj4 extends obj3{
    c:number
}//这样obj4就用了obj3得属性或者方法（obj4用 a b c 三个属性）





//元组：特殊得数组（特殊 1，约定了元素的个数 2，约定了特定索引对应的数据类型）

//例，react中的useState
function useState(n:number):[number,(number)=>void]{
    const setN=(n1)=>{
        n=n1
    }
    return [n,setN]
}
const [num,setNum]=useState(10)


//字面量声明
let str1='holle Ts'  //str1的类型是string
const str2="holle Ts" //str2的类型是'hello Ts'
//str1用let声明它的值可以是任意的字符串所以类型为string
//str2用const声明，它的值不能在变化所以只能是'hello Ts'，因此他的类型是'hello Ts'（字面量类型）也就是说某个特定的字符串也可以作为 TS 中的类型
//字面量类型一般和联合类型一起使用
type aaa='a'|'b'
let ga:aaa='a'
let ga2:aaa='b'
// let ga3:aaa='c' 错误

//enum 枚举：功能类似于 字面量类型+联合类型组合的功能 来描述一个值，该值只能是 一组命名常量 中的一个。 在没有 type 的时候，大家都是用枚举比较多的，现在比较少了。
//定义 (1，一般枚举名称以大写字母开头 2，枚举中的多个值之间通过，（逗号）分隔 3，定义好枚举后，直接使用枚举名称作位类型注解)
enum Dir{a,b,c,d}
//使用
Dir.a
Dir.b
Dir.c
Dir.d

//枚举也分数值枚举 和 字符串枚举。 数值枚举： 默认情况下，枚举的值是数值。默认为：从 0 开始自增的数值 当然，也可以给枚举中的成员初始化值
//数值枚举
enum DDR{a=10,b,c,d}
DDR.a//10
DDR.b//11
DDR.c//12
DDR.d//13

enum DDR2{a=1,b=2,c=3,d=4}

//字符串枚举 (注意：字符串枚举是没有自然增长的行为，因此字符串枚举的每个成员必须要有初始值)
enum DDRR{a='1',b='2',c='3',d='4'}

//any 任意类型   设置后相当于取消了类型的限制
let obj5:any={a:0}
obj5.b=100
obj5()

const n:number=obj5
//any类型使用场景，1，例如，console.log() ； 定义一个函数，输入任意类型的数据，返回该数据类型   2，临时使用 any 来“避免”书写很长、很复杂的类型
//还有一种隐式any 触发条件1，声明变量不提供类型也不提供默认值 2，定义函数时，参数不给类型
//当然不推荐使用any 

转载原文：https://juejin.cn/post/7092415149809598500#heading-13