TypeScript学习笔记（十四）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章TypeScript学习笔记（十三）中，我们学习了TypeScript的相关知识点，包括useState的使用、useEffect的使用、useState 进阶用法等相关知识点。在本篇文章中，我们将学习TypeScript的相关知识点，包括非空断言、react路由的使用，包括useHistory的使用、useLocation的使用、useParams的使用的使用等内容。

非空断言

如果我们明确的知道对象的属性一定不会为空，那么可以使用非空断言 !。需要注意的是，非空断言一定要确保有该属性才能使用，不然使用非空断言会导致bug。

在以下示例中，告诉typescript, 明确的指定obj不可能为空。

let nestedProp = obj!.second;

react路由的使用

在typescript中使用react路由步骤：

• 安装react-router-dom的类型声明文件yarn add @types/react-router-dom
• 新建组件Home.tsx和Login.tsx
• 配置路由

import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/login">登录页</Link>
          </li>
        </ul>
        <div>
          <Route path="/home" component={Home}></Route>
          <Route path="/login" component={Login}></Route>
        </div>
      </div>
    </Router>
  )
}

有了ts的支持后，代码提示变得非常的精确。

useHistory的使用

useHistory可以实现路由之间的跳转，并且在跳转时可以指定跳转参数state的类型。useHistory的源码如下：

export function useHistory<HistoryLocationState = H.LocationState>(): H.History<HistoryLocationState>;

useHistory如果仅仅实现跳转功能，和js中使用语法一致。

const history = useHistory()
const login = () => {
  history.push('/login')
}

useHistory可以通过泛型参数来指定state的类型。

const history = useHistory<{
  aa: string
}>()
const login = () => {
  history.push({
    pathname: '/login',
    state: {
      aa: 'cc',
    },
  })
}

useLocation的使用

useLocation接收一个泛型参数，用于指定接收的state类型，与useHistory的泛型参数对应。useLocation的源码如下：

export function useLocation<S = H.LocationState>(): H.Location<S>;

基本使用。

import { useLocation } from 'react-router'

export default function Home() {
  const location = useLocation<{ aa: string } | null>()
  const aa = location.state?.aa

  return <div>Home组件---{aa}</div>
}

因为useLocation和useHistory都需要指定Location类型，因此可以将类型存放到通用的类型声明文件中。

// types.d.ts
export type LoginState = {
  aa: string
} | null

useParams的使用

useParams接收一个泛型参数，用于指定params对象的类型。

import { useParams } from 'react-router'

export default function Article() {
  const params = useParams<{ id: string }>()
  console.log(params.id)

  return (
    <div>
      文章详情
      <div>12</div>
    </div>
  )
}

unkonw类型

unknown是更加安全的any类型。我们可以对 any 进行任何操作，不需要检查类型。

// 没有类型检查就没有意义了，跟写JS一样。很不安全。
let value:any
value = true
value = 1
value.length

也可以把任何值赋值给 unknown,但是不能调用属性和方法，除非使用类型断言或者类型收窄。

let value:unknown
value = 'abc'

(value as string).length

if (typeof value === 'string') {
  value.length
}