Typescript

rollbar.com/blog/top-10… TS 静态（边写边发现错误） JS 动态

TS 初体验

安装ts

• npm 安装 npm i -g typescript
• yarn 安装 yarn global add typescript
• sudo yarn global add typescript

查看 ts 版本

tsc -v

编译 TS：

1. 新建 hello.ts 文件
2. 当前目录打开命令行窗口，执行 tsc hello.ts 命令，自动生成 hello.js 文件
3. 执行 node hello.js 验证一下

思考：

• 以后我们写 ts 都是手动的编译执行吗？

  • 在开发中：一般使用 webpack vite 等工具自动构建编译。

知识点

泛型

function fn(a){
    return a;
}
let a240 = fn(123);
let a241 = fn('123');


function fn1(a:number|string){
    return a
}
let a249 = fn1(123) as number;
a249.toFixed(2)

let a252 = fn1('123') as string;
let res2253 = a252.includes('123');
function fn2<T>(a:T){
    return a;
}
let a250 = fn2(123).valueOf;
let a251 = fn2('123').includes('123');


type User276 = {
    name:string,
    age:number,
    gender?:number
}
// 调用
// 简写：xxx(val)
// 完整： xxx<type>(val)
const user = fn2({name:'1',age:2});
// Property 'gender' does not exist on type '{ name: string; age: number; }'.
if(user.gender){
    console.log('gender')
}

const user2 = fn2<User276>({name:'1',age:2});
if(user2.gender){
    console.log('gender')
}

泛型使用

type Data<T>={
msg:string;
code:number;
data:T
}

interface Data<T>{
    msg:string;
    code:number;
    data:T
}

interface Goos{
    name:string;
    pageNum:number
}

type LoginAPIRes = Data<{
    token:string,
    name:string
}>

const profile:Data<{name:string,age:number}[]> ={
    code:123,
    msg:'123',
    data:[{
    name:'dasf',
    age;30
    }]
    
}
const a307:Data<Goos>={
    msg:'123',
    code:123,
    data:{
        name:'123',
        pageNum:78
        // age:123
    }
}

常见问题

枚举和字面量类型的区别

使用场景相同：表示一组取值范围 区别： 任意值都可以作为字面量+联合 枚举：只能数字或者字面量 数字用枚举，语义化程度更高 字符串用联合，使用字面量+联合

js typeof 和 ts typeof

const obj192={
    a:{
        b:{
            c:{
                d:{
                    e:'xcsac'
                }
            }
        }
    }
}
// 一个是 ts 写在类型的位置
type ObjType219 = typeof obj192;
// 一个是 js 写在值的位置
const obj220 = typeof obj192;

编写错误

    // parse 不接收 null 可以通过 || 返回 '[]'
        const str = localStorage.getItem(KEY)
    // list 默认是 any 类型
        const list =JSON.parse(null || '[]') 
   
    
    // 明确类型
      type MyData = {count:number,time:string}
      const list:MyData[] =JSON.parse(null || '[]') 
      
      
    //类型断言
    const div = document.querySelector("#app") as any;
    
    document.querySelector('div') // 鼠标浮动上去，会出来提示
    
    //推荐写法
     const div = document.querySelector("#app") as HTMLDivElement;
    

参考

优医问诊 常用工具类型