typescript 小记

Posted 2021-09-13 杨柳岸残月孤轮

以前看ts就像天书,毕竟是习惯js的人,看ts的写法简直有点过分,这是人干的事吗?
现在看ts, 真香. 变量错误就会有提示,函数错误有提示,值有错误还有提示,还不用刷新界面

来吧,一起入坑

首先,ts是需要下载才可以使用的
npm install -g typescript
文件名是ts结尾的,比如index.ts, 在react中组件文件会写成component.tsx
如果你想看index.ts编译后的js文件,执行 tsc index.ts,就会生成同名js文件,如果编辑器提示变量重复的错误,别怕, 删除生成的js文件即可. 因为编辑器同时识别ts和js,就当成变量重复了

接下来 就开始愉快的嗒嗒嗒吧
我对ts的初步认识就是,这玩意就是在js的基础上给js加类型判断. 所有能加的地方都加, 声明变量可以加,声明函数可以加,函数的参数还可以加,函数的返回值也能加,类也能加,类的属性还能加. 只有你想不到,没有我加不了,来看几个简单的例子

let person:string = \'ren\'
let howMany: number = 10
function hitPerson(x: string, y:number):void {
    console.log(x, y);
    
}
interface Ren {
    eye: number;
}
class You implements Ren{
    beatiful: boolean;
    eye: number;
}

在react的函数组件中使用(可以先自己查一下React.FC,此处不做介绍):

import React from \'react\'

const Component: React.FC = () => {
    return (
        <>

        </>
    )
}

export default Component

看到这里,你基本就已经可以用ts写代码了, 入门就是这么简单
想不想跟执行js文件一样,使用node index.js就能运行index.js?
下载ts-node, ts-node index.ts就可以
npm i -g ts-node