TS基础内容(少部分)

1—TS优化编译

在安装好TS之后,文件中输入tsc --init 创建JSON文件即可解决,需要编译TS文件自动编译JS文件 需要启动 tsc --noEmitOnError --watch,如果不输入noEmitOnError 则就不会因为TS文件错误而自动编译JS文件

2—兼容浏览器代码 可以在配置里target设置版本–降级编译

3—配置入口源文件rootDir,输出文件outDir

4—使用any可以让改属性不用被校验

let obj:any={
x:0
}
obj.ooo() //TS文件并不会报错

5 TS类型声明

let str:string='hello types'    字符串
let num:number=100			数字
let bool:boolean=true			布尔
let arr:number[]=[1,2,3]      数组
let arr2:Array<number>=[1,2,3]   数组

function gerr(name:string):void{    //方法   void表示没有返回值,定义类型值也可以不需要,在TS中有上				        
    console.log(name)						//         下文类型  会自定义 如果确定需要定死值类型则需添加
}
gerr('222')

function pring(obj:{x:string,y:number}){
    console.log(obj.x,obj.y)
}
pring({
    x:'222',
    y:222
})

function paarr(obj:{x:string,y?:number}){
    console.log(obj.x,obj.y)
}
paarr({
    x:'wwww'
})
paarr({
    x:'wwww',
    y:222
})

联合类型

function prindd(id:string|number){
    if(typeof id == 'string'){
        console.log(id.toUpperCase())
    }else{
        console.log(id)
    }
    
}
prindd(123)
prindd('123')

function prinddss(id:string|string[]){
    if(Array.isArray(id)){
        console.log(id)
    }else{
        console.log(id)
    }
    
}
prinddss('2222')
prinddss(['a','b'])

function prinddyyy(id:string|number[]){
    return id.slice(0,3)
}
console.log(prinddyyy('abcde'))
console.log(prinddyyy([1,2,3]))

类型别名

type Point={
    x:number,
    y:string
}
function printcood(id:Point){
    console.log(id.x,id.y)
}
printcood({
    x:100,
    y:'122'
})
type ID = number | string
function printcoodd(id:ID){
    console.log(id)
}
printcoodd('123')
printcoodd(123)

type Userinput=string
function saninzz(str:string):Userinput{
    return str.slice(0,2)
}
console.log(saninzz('abc'))

接口形式控制类名

interface Pointt {
    x:number,
    y:number
}function prindd(pt:Pointt){

}
prindd({
    x:111,
    y:222
})

扩展接口

interface Anin{
    name:string
}
interface Bare extends Anin{
    arr:number
}
const aaa: Bare={
    name:'222',
    arr:222
}

类型别名扩展

type Anninn={
    name:string
}
type Aee = Anninn & {
    hone:number
}
const bbj:Aee ={
    name:'222',
    hone:222
}

向同类型添加字段 -----类型别名type不能通过同名 只能通过添加&符号添加

interface MYppp  {
    title:string
}
interface MYppp{
    count:number
}
const w:MYppp={
    title:'sss',
    count:222
}

类型断言

const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement
const myCanvas2 = <HTMLCanvasElement>document.getElementById('main_canvas')

const x = ('hello' as unknown) as number  //unknown为不知道什么类型

类型

function livv(x?:number|null){
    console.log(x!.toFixed())  //x!是表示不是null  undifent
}
function   handrr(url:string,method:'GET' | 'POST' | 'GUESS'){
    
}
const req ={
    url:'https://baidu.com',
    method:'GET'
} as const
handrr(req.url,req.method)

6枚举

enum Directon {
    up = 1,
    left,
    doo
}
console.log(Directon.up,Directon.left)  //left会自加1 递增

7 泛型类型 —TS会自行推断

//例子1
// function firstElement<Type>(arr:Type[]):Type | undefined{
//     return arr[0]
// }
// firstElement(['a','b','c'])
// firstElement([1,2,3])
// firstElement([])
//例子2  Input,Output 这两个是自行推断,随便起
function map<Input,Output>(arr:Input[],func:(arg:Input)=>Output):Output[]{
    return arr.map(func)   
}
const parsed = map(['1','2','3'],(n)=>parseInt(n))
function longest<Type extends {length:number}>(a:Type,b:Type){  //extends继承length这个属性  从而实现b,b拥有length这个属性
    if(a.length >= b.length){
        return a
    }else{
        return b
    }
}
function longest<Type extends {length:number}>(a:Type,b:number):Type{
    if(a.length >= b){
        return a
    }else{
        let ccc :any=b
        return ccc
    }
}
function aaaa<Type>(arr1:Type[],arr2:Type[]):Type[]{
     return arr1.concat(arr2)
}
const abb = aaaa<string | number>(['string'],[1,2,3])

8函数中的可选参数

function f (n:number = 100){  // 不传值默认传100
    console.log(n.toFixed())
    console.log(n.toFixed(3))
}
f(123.23)
f()

9 其他类型

void 表示没有返回值的函数的返回值
object 表示不是任何基元的值 和{} Object不一样
unknuwn 表示任何类型的值 与any相似 但是 unknuwn值做的任何事情都是不合法的
never 表示永远不会被观察到的值
Function 描述所有函数值的属性 不安全

不太常用的原语 bigInt Symbol

const one: bigint = BigInt(100)  //容易丢失精度 较大值比较会出现错误 16为以上的时候
const two: bigint = BigInt(100n)  //不会出现精度丢失

const one = Symbol('100')  //Symbol独一无二的防止覆盖
const two = Symbol('100')
if(one == two){   //不相等
    console.log('ok')
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值