typescript5 学习 ts引用第三方库的使用 声明文件 cnpm i @types/jquery -S_ts 引入第三方库的type

// ts6

type E =Exclude<string|number|boolean,string>

// 排除string

let e:E = 10

let e2:E = true

let e3:E = 'x'// 不允许了

//Extract

type E2 = Extract<string|number|boolean,string>

let e22:E2 = 'hello'// 只能用字符串了

 

interface Face1{

name:string

}

interface Face2{

name:number

}

interface Face3{

name:boolean

}

type E3 = Extract<Face1|Face2|Face3,Face1>

let e33:E3 = {name:'zimo'}

 

//ReturnType 获取一个函数的返回类型

function getUserInfo(){

return {name:'zimo',age:10}

}

type UserInfo = ReturnType<typeof getUserInfo>

// 返回的是对象 {name:string,age:number}

let userInfo:UserInfo = {name:'zimo',age:10}

// 给js写类型声明文件

// 不是箭头函数

declare const $:(selector:string) =>{

click():void

width(length:number):void

}

// ts就可以这样使用了

$('#root').click();

$('#root').width(100)

 

declare let name:string

declare let age:number

declare function getName():string

declare class Animal {name:string}

interface Person{

name:string

}

type Student = {

name:string

}

// 外部的枚举 声明在外部 是一个枚举

// 外部枚举是declare enum 定义的枚举

declare enum Season{

Spring,

Summer,

Autumn,

Winter

}

let seasons = [

Season.Spring,

Season.Summer,

Season.Autumn,

Season.Winter,

]

// 编译后Season 不存在了 编译后就被干掉了

// 常量枚举

declare const enum Season{

Spring,

Summer,

Autumn,

Winter

}

//namespace 命名空间 用来定义包含很多子属性的全局变量的

// 如果在html里面通过cdn 引用了全局变量jquery $ 全局变量

declare namespace $ {

function ajax(url:string,setting:any):void

let name:string;

namespace fn{

function extend(object:any):void

}

}

$.ajax('/users',{})

$.fn.extend({})

// typings/jquery.d.ts typings文件见下声明文件

// 声明文件中放

declare const $:(selector:string) =>{

click():void

width(length:number):void

}

// 让他生效需要修改tsconfig.json文件修改参数

//增加include

"include":[

"src/**/*",

"typings/**/*"

]

// 配置好后 可以在1.ts中进行使用

// ts中使用第三方库

// 第三方前缀 @types;

//https://github.com/Microsoft/Typescript/tree/master/src/lib

cnpm i jquery -S

import * as jQuery from 'jquery'

jQuery.ajax('/user')

// types/jquery/index.d.ts

declare function jQuery(selector:string):HTMLElement;

declare namespace jQuery{

function ajax(url:string):void

}

export default jQuery;

// tsconfig.json path修改

"baseUrl":"./",

"paths":{

"*":["types/*"]

}

// 真实的不会自己写 从网上找 没有的话 自己找

cnpm i @types/jquery -S