typescript基础学习---1

最新推荐文章于 2024-08-27 16:58:03 发布

qq_20047659

最新推荐文章于 2024-08-27 16:58:03 发布

阅读量64

点赞数

文章标签： typescript 学习 javascript

本文链接：https://blog.csdn.net/qq_20047659/article/details/129933587

版权

本文介绍了如何安装和配置TypeScript，包括全局安装、运行编译以及生成tsconfig.json文件。同时，文章讲解了类型注解、类型推断、模块配置、基本类型、联合类型和交叉类型等核心概念，特别提到了any、never和unknown类型的使用场景。

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

安装typescript

// 全局安装typescript
npm install -g typescript

// 运行
tsc ts文件
tsc ts文件 -w 持续运行

设置ts配置文件

这里只有部分配置，其它可以自己看看官网

// 生成tsconfig.json文件
tsc --init

// 设置转换的js文件输出目录
"outDir": "./dist",   // 默认是./ 我现在设置在当前目录dist文件夹下
注意上面修改后要输入tsc全局执行一下才行


// 设置转换后js代码风格 默认是commonjs
"module": "ES6",

类型注解和类型推断

// 这里规定了a必须是字符串
let a:string = "123"

a = 123 //这里会报错


let b = 321 // 在vscode中鼠标悬浮会自动进行类型推断

类型分类

基本类型

string、number、boolean、null、undefined、symbol、bigint

对象类型(object)

[] {} function(){}

Ts新增类型

any never void unknown enum

let s:string = "abc";
let c:object = []

// 联合类型
let a:string | number;
a = 123
a = "abc"

// 交叉类型(一般用在对象类型中)
type A ={
    username:string
}

type B ={
    age:20
}

let a:A&B = {username:'123',age:20}

never类型与any类型与unknown类型

// never:一般用来做校验
// 这个就会提示,不能将类型“number”分配给类型“never”
let a:string & number = 123 

// 作用
function foo(n: 1 | 2 | 3) { //这里表示n只能是1或2或3
  switch (n) {
    case 1:
      break
    case 2:
      break
    default:
    // 检测n是否可以走到这里，查看所有值是否被使用
    let m: never = n
  }
}



// any:任意类型 与js相同
let b: any = 123
b.map(()=>{}) //不检测



// unknown类型
let arr: unknown = 'hello'
// any类型不进行检测,unknown使用ts会检测
// arr.map(() => {}) 会被检测

类型断言与非空断言

// unknown类型
let arr: unknown = 'hello'
// arr.map会被断言报错，类型断言是为了让它通过编译阶段
(arr as []).map(() => {})

let b: string | undefined = undefined
// b.length 报错提示b是未定义
b!.length // 非空断言告诉只能是字符串