关于前端:typescript-小记

以前看 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 写代码了, 入门就是这么简略