ts

安装:npm install typescript -g
查看版本号:tsc -v
查看命令:tsc --help
运行:cls >>tsc 文件名.ts >>node 文件名.js
在node上直接运行:
安装:npm install @types/node -D >>> npm install ts-node -g
运行:ts-node 文件名.ts
html与ts文件连接(ts同步js)
tsc 文件名.ts --watch

创建ts文件:echo ''>index.ts,''表示内容为空
创建tsconfig文件:tsc -init

any和unknown区别:
1.unknown不可以调用属性和方法

//报错
let unkown:unknown={a:123}
unkown.a
//报错
let unkown:unknown={a:():number=>123}
unkown.a

2.unknown只能赋值给unknown或者any,any没有要求

//报错
let str:unknown='123'
let str1:string='1234'
str1=str
//不报错
let str:unknown='123'
let str1:any='1234'
str1=str

Object ,object, {}
1.Object表示包含所有类型,等于任何一个值,可以任意赋值
2.object只能赋值引用类型

let a:object='123'//错误 原始类型
let a1:object=123//错误 原始类型
let a2:object=false//错误 原始类型
let a3:object=[]//正确
let a4:object={}//正确
let a5:object=()=>123//正确

3.{}类似于Object ,但是无法对变量进行赋值操作

//报错
let a:{}={name:123}
a.age=234

interface中?表示非必须,[propName:string]:any表示任意属性 ,|表示联合类型,readonly表示只读,赋值报错

interface Person{
  name:string,
  age?:number,
  cb():number,//接口里定义函数
  [propName:string]:string | number
}
let p:Person={
  name:"张三",
  abc:123
  cb:()=>{
    return 123
  }
}

//类型加中括号
let arr:number[] = [1,2,3]
//这样会报错定义了数字类型出现字符串是不允许的
let arr:number[] = [1,2,3,'1']
//操作方法添加也是不允许的
let arr:number[] = [1,2,3,]
arr.unshift('1')
 
// 普通类型
var arr: number[] = [1, 2, 3]; //数字类型的数组
var arr2: string[] = ["1", "2"]; //字符串类型的数组
var arr3: any[] = [1, "2", true]; //任意类型的数组
//泛型
let arr4:Array = [1,2,3,4,5]

void表示没有返回值
fn(params:number):void{}表示没有return返回值,直接输出

let u:void=undefined
let n:void=null

let u:undefined=undefined
let n:null=null
//两种都行,但使用let u:undefined=undefined可赋值,使用void不可赋值

如果出现


image.png

终端:tsc -init 创建tsconfig.json找到strict,改为false

强转:0,1改成true或false !/!!

let fn =function(type:number|boolean):boolean{
  return !!type
}
let res = fn(1)

函数类型:

 const fn = function(name:string,age?:number):void{
    console.log(age+name);
    
 }
 fn("11",11)
//接口类型
interface Use{
    name:string,
    age:number
}
const fn = function(use:Use):Use{
    return use
}
fn({
    name:"张三",
    age:18
})

函数重载

function fn(params:string):void
function fn(params:string,params2:number):void
function fn(params:any,params2?:any):void{
 console.log(params,params2);
 
}
fn("11")

交叉类型:


image.png

类型断言:


//断言
interface A{
    run:string 
}
interface B{
    bulid:string 
}
const fn =function(type:A | B):void{
    console.log((type).bulid);
    
}
//或者

interface A{
    run:string 
}
interface B{
    bulid:string 
}
const fn =function(type:A | B):void{
    console.log((type as B).bulid);
    
}

window.abc=123//报错
(window as any).abc=123//不报错

class类

class Person{
    //需定义否则报错
    name:string
    age:number
    sub:boolean
    constructor(name:string,age:number,sub:boolean){
        this.name=name
        this.age=age
        this.sub=sub
    }
}
new Person("张三", 18, false )
//或者
class Person{
    //需定义否则报错
    name:string
    age:number=0
    sub:boolean
    constructor(name:string,age:number,sub:boolean){
        this.name=name
        // this.age=age
        this.sub=sub
    }
}
new Person("张三", 18, false )

类的修饰符public private protected,static
1.public内外部都可访问,不写默认public
2.private只有内部可访问
3.protected内部和子级访问
4.static只可访问静态

class Person{
    //需定义否则报错
    protected name:string
    public age:number=0
    sub:boolean
    constructor(name:string,age:number,sub:boolean){
        this.name=name
        // this.age=age
        this.sub=sub
    }
}
let p=new Person("张三", 18, false )
p.age//正确
p.name//错误

class Person{
    //需定义否则报错
    protected name:string
    public age:number=0
    private sub:boolean
    constructor(name:string,age:number,sub:boolean){
        this.name=name
        // this.age=age
        this.sub=sub
    }
}
class Man extends Person{
    constructor(){
        super("张三", 18, false )
        this.name//正确
        this.sub//错误
    }
}
let p=new Person("张三", 18, false )


class Person{
    name:string
    age:number
    sub:boolean
    static aa:string='12345'
    constructor(name:string,age:number,sub:boolean){
        this.name=name
        this.age=age
        this.sub=sub
        this.run()//报错
    }
    static run(){
        this.aa//正确
        this.age//报错
    }
}
class Man extends Person{
    constructor(){
        super("张三",22,false)
        this.age
    }
}
let p=new Person("张三",22,false)
p.aa//报错


接口类,使用implements连接

interface A{
    run():boolean
}
interface B{
    set():void
}
class Man{
    params:any
    constructor(params:any){
        this.params=params
    }
}
class Person extends Man implements A,B{
    run(): boolean {
        return 
    }
    set(): void {
        
    }
}


interface A{
    run():void
}
interface B{
    name:string
}
class Man{
    params
    constructor(params){
        this.params=params
    }
}
class Person extends Man implements A,B{
    name:"张三"
    run():void{

    }
}

抽象化类:类实例化后毫无用处,可定义为抽象类
抽象类中可以添加抽象方法抽象方法只能定义抽象类中,子类必须对抽象方法进行重写

abstract class A{
    name:string
    constructor(name:string){
        this.name=name
    }
    setName(name:string){//普通方法
         this.name=name
    }
    abstract getName():string
}

class B extends A{
    constructor(){
        super("张三")
    }
    getName(): string {
        return this.name
    }
}

let b =new B()
b.setName("11")
console.log(b.getName());

枚举enum(只能用const定义,不可用let或者var)

//数字枚举(默认从0开始)
enum Color{
red,
green,
blue
}
console.log(Color.red)//0
//增长枚举
enum Color{
red=1,
green,
blue
}
console.log(Color.red)//1
console.log(Color.green)//2
//字符串枚举
enum Color{
red='red',
green='green',
blue='blue'
}
console.log(Color.red)//red
console.log(Color.green)//green
//异构枚举
enum Color{
yes=1,
no='no'
}
console.log(Color.yes)//1
console.log(Color.no)//no
//接口枚举
enum Color{
yes=1,
no='no'
}
interface A{
  red:Color.yes
}
let obj:A={
red:Color.yes
}
//反向映射(不支持字符串)
enum Types{
success
}
let aa:number = Types.success
let key =Types[aa]
console.log(`value---${success}`,`key---${key}`)//value---0 key---success

类型别名

type s =string|number
let str:s='22'

type cb=()=>string
let fn:cb=()=>"11"

type t='yes'|'no'|5
let type ='yes'

never

interface A{
    type:'1'
}
interface B{
    type:'2'
}
type All = A|B
function type(val:All){
    switch(val.type){
        case '1':
            break
        case "2":
            break
        default:
            const check:never=val
            break
    }
}

symbol(只能传字符串和数字)

let s:symbol=Symbol('11')
let obj={
    [s]:'value',
    name:'22'
}
console.log(obj[s]);//obj[s]取值
//不能取到symbol
for(let key in obj){
    console.log(key);
    
}
console.log(Object.keys(obj));
console.log(Object.getOwnPropertyNames(obj));
console.log(JSON.stringify(obj));


//可以取到
console.log(Object.getOwnPropertySymbols(obj));
console.log(Reflect.ownKeys(obj));

迭代器

type MapKeys=string|number
let arr:Array=[1,2,3]
let set:Set=new Set([1,2,3])
let map:Map=new Map()

map.set('1','张三')
map.set("2",'李四')


function gen(erg:any){
    let it=erg[Symbol.iterator]()
    let next:any={done:false}
    while(!next.done){
        next=it.next()
        
        if(!next.done){
            console.log(next);
            
        }
    }
}
gen(map)

生成器

type MapKeys=string|number
let arr:Array=[1,2,3]
let set:Set=new Set([1,2,3])
let map:Map=new Map()

map.set('1','张三')
map.set("2",'李四')


for(let key of arr){
    console.log(key);
    
}
//如果用for in 生成的是索引值

for(let key in arr){
    console.log(key);//0,1,2
    
}

es6新增拿到对象所有属性
Reflect.ownKeys(obj)

泛型:

function add(a:T,b:T):Array{
  return [a,b]
}
add(1,2)  ||  add(1,2)
add('1','2')  ||  add('1','2')

定义多个类型的泛型

function sub(a:T,b:U):Array{
  let arr:Array=[a,b]
  return arr
}
sub(a,false)

泛型约束

interface Len{
 length:number
}
function getLength(arg:T){
 return arg.length
}
getLength([1,2,3])


//keyof约束泛型对象
function add(obj:T,key:K){
   return obj[key]
}
let s={
   a:1,
   b:2,
   c:3
}
add(s,'a')//正确
add(s,'d')//报错

class pop{
   attr:T[]=[]
   add(a:T):T[]{
       return [a]
   }
}
let a = new pop()
a.attr=[1,2,3]

配置tsconfig文件)
https://xiaoman.blog.csdn.net/article/details/122525099?spm=1001.2014.3001.5502

namespace(利用namespace避免全局变量造成的污染)
1.加export解决

export const a=2

2.使用命名空间

namespace A{
    export const a=2
}
console.log(A.a);

//嵌套
namespace A{
    export  namespace B{
        export const a=2
    }
    
}
console.log(A.B.a);

//通过import起别名
namespace A{
    export  namespace B{
        export const a=2
    }
    
}
import Q=A.B
console.log(Q.a);

//合并(与接口类似)
namespace A{
    export const a=2
}
namespace A{
    export const b=3
}

namespace A{
    export const a=2
    export const b=3
}

三斜线

//类似引入
///
//声明文件
///

声明文件
declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明(含子属性的)全局对象

你可能感兴趣的:(ts)