TypeScript有时需要手动进行一些类型转换才能消除错误提示。对大部分vue使用者：本人推荐 vue 3.0 + Volar，TS的体验比较可以。相关代码摘自TypeScript 入门教程。及深入理解 TypeScript

常规编码

断言

断言是指把一个any类型的对像转成程序员认定的类型。

语法

值 as 类型

或

<类型>值

如：

interface Foo {
  bar: number;
  bas: string;
}
const foo = {} as Foo;
//或者
const foo = <Foo>{}
foo.bar = 123;
foo.bas = 'hello';

注意点：通常不用‘<类型>值’!

因为在JSX中使用 <类型>值的断言语法时，这会与 JSX 的语法存在歧义：

let foo = <string>bar;</string>;

因此使用 as foo 的语法来为类型断言。

typesrcipt中的问号与感叹号

与js相对应的三目运算符与取反操作就不说了。来看看typescript的特殊用法。此部分代码及文字部分采用TypeScript中的问号 ? 与感叹号 ! 的含义 - guo&qi - 博客园 (cnblogs.com)

？问号的使用

第一种情况

// 这里的？表示这个name属性有可能不存在
class A {
  name?: string
}

第二种情况

// 这里 Error对象定义的stack是可选参数，如果这样写的话编译器会提示
// 出错 TS2532: Object is possibly 'undefined'.
return new Error().stack.split('\n');

// 我们可以添加?操作符，当stack属性存在时，调用 stack.split。若stack不存在，则返回空
return new Error().stack?.split('\n');

// 以上代码等同以下代码
const err = new Error();
return err.stack && err.stack.split('\n');

! 感叹号的使用

第一种情况

// 因为接口B里面name被定义为可空的值，但是实际情况是不为空的，那么我们就可以
// 通过在class里面使用！，重新强调了name这个不为空值
class A implemented B {
  name!: string
}

interface B {
  name?: string
}

第二种情况

// 这里 Error对象定义的stack是可选参数，如果这样写的话编译器会提示
// 出错 TS2532: Object is possibly 'undefined'.
new Error().stack.split('\n');

// 我们确信这个字段100%出现，那么就可以添加！，强调这个字段一定存在
new Error().stack!.split('\n');

使用JSX/TSX

可以看我写的另一篇文章有用的vue3 JSX&TSX使用说明。 (juejin.cn)

TypeScript在vue编码中使用小结（ts的？！类型转换等方面问题）