TypeScript【前端必备知识---快速上手】

Daisy__yangyang

已于 2022-03-04 17:09:53 修改

阅读量457

点赞数

分类专栏： TypeScript 文章标签： typescript

于 2020-11-14 22:45:37 首次发布

本文链接：https://blog.csdn.net/weixin_37883657/article/details/109693890

版权

本文详细介绍了如何快速上手TypeScript，包括在VS Code中使用、数据类型、设置错误消息、枚举、函数类型、类型断言、接口、类与接口的结合、泛型和类型声明等核心概念。TypeScript作为一种强类型语言，能够帮助开发者提前发现错误，提高代码质量和可维护性。

摘要由CSDN通过智能技术生成

1、TypeScript 使用

2、TypeScript 如何在 vs code中单独运行

3、TypeScript 数据类型有哪些

4、TypeScript 如何设置中文错误消息

为什么要使用 TypeScript ?

（1）Javascript 弱类型语言只有在代码运行后才能发现问题的错误在哪里

const obj = {}
obj.foo()

setTimeout(() => {
    obj.foo()
}, 100000)

（2）Javascript 弱类型语言的参数不明确，会造成功能的错误

function sum (a, b) {
    return a + b
}
console.log(sum(100, 100)) //200
console.log(sum(100, '100')) //100100

（3）因为若类型的关系，就会出现对对象索引器错误的用法

const obj = {}
obj[true] = 100
console.log(obj['true'])

使用 TypeScript 的好处？

（1）错误更早暴露

（2）代码更智能，编码更准确

（3）重构更牢靠

（4）减少不必要的类型判断

1、TypeScript 使用

yarn init 初始化项目
yarn add typescript --dev 安装依赖
新建文件 01-getting-start.ts

const hello = (name: string) => {
    console.log('hello', `${name} `)
}

hello('daisy')

运行 yarn tsc 01-getting-start.ts

2、TypeScript 如何在 vs code中单独运行

yarn tsc --init 会创建一个tsconfig.json文件 ,x修改里面的配置如下图
操作如下图，这样编译器就会帮我们监视ts文件，并自动生成js文件，然后运行node **.js文件就可以了

node 01-getting-start.js

3、TypeScript 数据类型有哪些

//TypeScript 原始类型

const a: string = 'foo'

const b: number = 100// NaN /Infinity

const c: Boolean = true /false

const d: Boolean = null //与 Flow 不同的一点，TypeScript可以设置类型为 null

const e: void = undefined

const f: null = null

const g: undefined = undefined

const h: symbol = Symbol

//Symbol会报错，是因为标准库找不到内置对象的声明&

最低0.47元/天解锁文章