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<number> = [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((<B>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<number>=[1,2,3]
let set:Set<number>=new Set([1,2,3])
let map:Map<MapKeys,MapKeys>=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<number>=[1,2,3]
let set:Set<number>=new Set([1,2,3])
let map:Map<MapKeys,MapKeys>=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<T>(a:T,b:T):Array<T>{
  return [a,b]
}
add<number>(1,2)  ||  add(1,2)
add<string>('1','2')  ||  add('1','2')

定义多个类型的泛型

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

泛型约束

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


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

class pop<T>{
   attr:T[]=[]
   add(a:T):T[]{
       return [a]
   }
}
let a = new pop<number>()
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
}

三斜线

//类似引入
///<reference path='XXXX'/>
//声明文件
///<reference types='node'/>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容

  • 一、安装TS,完成HelloWorld 参考TypeScript 安装[https://www.runoob.co...
    合肥黑阅读 31,277评论 1 10
  • 1.js语言是动态弱类型语言 赋值各种类型不报错 函数有参数不传参调用,传多个参调用也不报错2.ts是静态语...
    前端林木木阅读 540评论 0 0
  • ts的优点:静态编译提示错误,强类型,接口和继承,是js的超集,需要编译后执行 编译 1、ts后缀建立文件后通过t...
    看到这朵小fa了么阅读 452评论 0 0
  • JavaScript 是一种弱类型的,动态类型检查的语言。 弱类型 在定义变量的时候,我们可以为变量赋值任何数据,...
    _1633_阅读 610评论 0 0
  • 整理之前学习ts时的一些笔记。 安装 或者安装 ts-node ,将以上两步合并为一步 ts-node hello...
    YukiWeng阅读 631评论 0 0