ts

测试方便使用 ：npm i  ts-node -g   可以 编译 并且 跑在node上  

　　ts-node 依赖 另外2个包 :    npm i tslib @types/node -g 

运行 : ts-node 文件名.ts

正式的肯定用脚手架

 

let/const 标识符 :数据类型 = 赋值

 

细节1.

// string : TypeScript中的字符串类型
// String : JavaScript中的字符串包装类的类型
const name: string = "abc"
const age: number = 18
console.log(name,age);

 

细节2.

// 默认情况下进行赋值时,会将赋值的值的类型,作为前面标识符的类型
// 这个过程称为类型推导/推断
// foo 没有添加类型注释
let foo = 'foo'
foo = 123

 

细节3.

// 加上可以避免报错 : 报错的原因是 : 命名如果在window下有一样的名字,或者在当前文件夹下有相同的,就会报错. 作用域问题
export {}

 

数组写法

// 只知道names是一个数组类型,但数组中存放的是什么类型的元素
// 一个数组在ts开发中,最好存放的数据类型是固定的[相同类型]
const names: Array<string> = []  //不推荐这种写法
names.push("abc")

const names1:number[] = [] //推荐这种写法
names1.push()
names1.push(123)

 

对象的--不采取的

// 这种写法不可 : 因为  console.log(info.name);  取不出来的
// 推荐采用自动推导
const info:object = {
    name:"why",
    age:18
}
console.log(info.name);

 

symbol的应用场景

// symbol的应用场景
const title1 = Symbol("title")
const title2 = Symbol("title")
const info1 = {
    [title1] : "程序员",
    [title2] : "老师"
}

 

以下是typescript 才有的类型

any类型  【跟不写就一样了】

// typescript才有的类型 - any类型
// 在某种情况下,我们无法确定一个变量的类型,并且可能他会发生一些变化,这个时候就用any类型
// 在不想给某些JavaScript添加具体的数据类型时,就用any(原生JavaScript代码一致)
let message:any = "hello"
message = 123
message = true 
message = {}
message = null 
message = undefined 
message= []
const arr:any[] = []

 

unknown类型

// typescript才有的类型 - unknown类型
// 描述类型不确定的变量
// unknown 只能赋值给any 和 unknown 类型
// 但是any类型可以赋值给任意类型
function foo1(){
    return '123'
}

function foo2(){
    return '123'
}

let flag = true

let result: unknown  //最好不要使用any

if(flag){
    result = foo1()
}else{
    result = foo2()
}

let mess:string = result   // 错误  unknown 只能赋值给any 和 unknown 类型
let mess1:number = result  // 错误  unknown 只能赋值给any 和 unknown 类型
let mess2:unknown = result 
let mess3 = result   //不写就默认是any

 

void类型

// typescript才有的类型 - void类型
// void 用来指定一个函数是没有返回值的,那么它的返回值就是void类型
// 可以将null 和 undefined 赋值给void类型,也就是函数可以返回null或undefined
// 函数默认不写返回值 就是 void类型了
function sum(num1:number,num2:number){
    console.log(num1+num2);  
}

sum(20,30)

 

never类型 基本没用!!!

// typescript才有的类型 - never类型  基本没用!!!
// never表示永远不会发送值的类型,比如一个函数 : 
// 如果一个函数中是一个死循环或者抛出一个异常,那么这个函数不会返回值,
// 那么写void类型或者其他类型作为返回值类型都不合适,我们就可以使用never类型

 

tuple类型

// typescript才有的类型 - tuple类型
// tuple元祖 ： 多种元素的组合
// “why” 18  1.88
const  arr1: [string,number,number] = ['yjx',16,16]

 

函数的参数

普通参数

// 给参数加上类型注解 ： num1: number,num2: number
// 给返回值加上类型注释 ： ()：number
function sum1(num1: number,num2: number):number{
    return num1 + num2
}

// 在开发中，通常情况下可以不写返回值的类型（ 自动推导 ）
function sum2(num1: number,num2: number){
    return num1 + num2
}

 

匿名参数

// 匿名函数的参数类型
const names2 = ['abc','bcd','cdd']
// item 根据上下文的环境推导出来的，这个时候可以不添加类型注解
// 上下文中的函数：可以不添加类型注解
names2.forEach(function(item){
    console.log(item);
})

 

对象参数 和 可选类型

// 对象参数
// point ： {x,y} --》 对象类型
// z : 是可以传，可不传 加个？ 可选类型
function printpoint(point: {x:number,y:number,z?:number}){
    console.log(point.x);
    console.log(point.y);
}
printpoint({x:111,y:333})

 

联合类型  参数

概念 ：

　　1 联合类型是由两个或者多个其他类型组成的类型；

　　2 表示可以是这些类型中的任意一个值

　　3 联合类型中的每一个类型被称为联合成员

function printID(id: number | string){
    // 使用联合类型的值时，需要特别小心
    if(typeof id === 'string'){
        console.log(id.toLocaleLowerCase());  
    }
    console.log(id);
}
printID(123)
printID('abc')

 

可选类型 和 联合类型

// 让一个参数本身时可选的
// 当一个参数是可选类型的时候，它其实类似于世这个参数是  类型/undefined 的联合类型
function fooo(message?: string){
    console.log(message);
}
fooo()

 

类型别名

// 类型别名  type用来定义类型别名店
type IDType = string | number | boolean

type PointType ={
    x: number,
    y: number,
    z?: number
}

// 联合类型的优化
function printIDs(id: IDType){
    // 使用联合类型的值时，需要特别小心
    if(typeof id === 'string'){
        console.log(id.toLocaleLowerCase());  
    }
    console.log(id);
}
printIDs(123)
printIDs('abc')

// 对象的优化
function printpoints(point: PointType){
    console.log(point.x);
    console.log(point.y);
}
printpoints({x:111,y:333})

 

可选链

// 可选链
// 可选链不是typescript的特性，他是es11增加的特性
// 可选链使用可选链操作法  ?.
// 它的作用 ： 当对象的属性不存在时，会短路 直接返回undefined  如果存在，那么继续执行
function mess(message?:string){
    // 报错，因为可选的， 除了本身，还有undefined
    // console.log(message.length);
    // 优化 ： 采用可选链
    console.log(message?.length);
}
mess()

 

!!操作符 和 ??操作符

// !!操作符 ： 讲其他类型转换为boolean类型
const message = "heel"
const flag = !!message
console.log(flag);

//  ？？操作符  当操作符 左侧为null或者undefined  则返回右侧的数  否则返回左侧
//  跟三元运算符差不多
let message1:string | null = null
const abc = message1 ?? '默认值'

let message2 
const abc2 = message2 ?? '默认值1'

console.log(abc,abc2);

 

字面量类型

// 字面量类型 ： 必须结合联合类型
let align: 'left' | 'right' | 'center' = 'right'
align = 'left'
align = 'center'
// align = 'abc' //报错，必须一致

// 升级
type alignType =  'left' | 'right' | 'center' 
let aligns: alignType = 'right'
aligns = 'left'
aligns = 'center'
// aligns = 'abc' //报错，必须一致

 

类型缩小 Type Narrowing  也叫做类型保护

常见的类型保护 ： typeof   平等缩小（比如 ===  !==）  instanceof(是谁的类)  in

typeof

type typeId = string | number
function printID(id:typeId){
    if(typeof id === 'string'){
        console.log(id.toLocaleLowerCase());     
    }else{
        console.log(id);
        
    }
}
printID('123455')
printID(123455)

 

平等缩小（比如 ===  !==

type Direction = 'left' | 'right'
function direction(direction:Direction){
    if(direction === 'left'){
        console.log('left');
    } 
}

 

函数详解 

// 函数的类型
// 1.当函数作为参数时，如何写这个参数的类型呢？ （）=> void[代表的是返回值的类型]
function foo(){}

function bar(fn:()=>void){
    fn()
}

bar(foo)

// 2.定义常量时，编写函数的类型
type AddType = (num1:number ,num2:number) => number
const add:AddType = (a1:number,a2:number)=>{
    return a1+a2
}

// 3.函数的可选类型  可选类型必须写在必选类型后面
function foo1(x:number,y?:number){
    if(y){
        console.log(x+y);
    }
    
}
foo1(10,20)

// 4.参数的默认值
function foo2(x:number=100,y?:number){
    if(y){
        console.log(x+y);
    }
    
}
foo2(undefined,10)

// 5.函数的剩余参数
function sum(...nums:number[]){

}

// 6.this的默认推导

// 7.this的不确定类型

// 8.函数的重载 ： 函数的名称相同，但是参数不同的几个函数，就是函数的重载
// 方式一 ： 联合类型实现
function getLength(args:string | any[]){
    return args.length
}

console.log(getLength('abc'));

console.log(getLength([123,234,345]));

// 方式二 ： 函数的重载
function getLengths(args:string) : number;
function getLengths(args:any[]) : number;
function getLengths(args:any) : number{
    return args.length
}

console.log(getLengths('abc'));

console.log(getLengths([123,234,345]));

 

类

// 类
// 1.定义类
class Person{
    // 属性和方法
    // typescript 需要初始化
    name:string =""
    age:number =0
    eating(){
        console.log(this.name+"eating");
    }
}

// 2.类的继承
// 提取Student和Teacher共同拥有的属性和方法
class Persion{
    name:string = ''
    age:number = 0
    eating(){
        console.log('eating');
    }
}

class Student extends Persion{
    // name:string = ''
    // age:number = 0
    sno:number = 0
    // eating(){
    //     console.log('eating');
    // }
    studying(){
        console.log('学生studying');
    }
}

class Teacher extends Persion{
    // name:string = ''
    // age:number = 0
    title:number = 0
    // eating(){
    //     console.log('eating');
        
    // }
    studying(){
        console.log('老师studying');
    }
}

const stu = new Student()
stu.name = 'yjx'
stu.age = 10
console.log(stu.name);
console.log(stu.age);
stu.eating()

 

接口