Ts的知识

39 阅读2分钟

安装Ts

TS是微软开发的编程语言,只是在js之上增加了类型的标注。并能在编写阶段检查错误
如果我们要执行ts编写的代码,需要先将它转译成js才行。这时就要用到大名鼎鼎的转译器TSC

// 安装于 2023.03.15
sudo npm i typescript -g // 安装ts
tsc -v // 查看版本 Version 4.9.5
tsc --init // 创建 tsconfig.json
tsc code.ts // 将 code.ts 转译成 code.js

Ts数据类型

-   数字 number
-   字符串 string
-   布尔 boolean
-   万能类型 any
-   如果一个函数没有返回值的时候 `tuString: () => void`
-   永不存在的值 never
-   数组泛型写法 `Array<number>``number[], string[], boolean[]`
-   当一个函数没有返回值的时候 `tuString: () => void`
-   对象数据类型 interface

普通变量注解

// 初始值的普通变量 不需要指定类型。 编辑器可以自己做类型推导
let count: number = 1
let str = '浓好'
str = 'smith'
let b: string = `hello is ${str}`
let arr1: (string | number)[] = [1, 2, '5']
let arr2: Array<number> = [1, 2, 5]
let arr3: any[] = [1, 2, '5'] // 干脆不写

// 元祖类型
let tuple: [number, string] = [1, 'is']

// 枚举数据类型 限制取值, 这里的 hungry 只能取值 '吃饭' 或者 '不吃饭'
let hungry: '吃饭' | '不吃饭'
let dice: 1 | 2 | 3 | 4 | 5 | 6

// 限制对象的类型 interface[定义接口], 首字母大写
interface User {
    name: string;
    id?: number;
    readonly course: string; // 只读属性
    // [prop: string]: any; // 其他没有注解的字段为任意类型
    sayHi: () => string;
}
const user: User = {
    name: '张三',
    id: 77,
    course: '物理',
    sayHi: ():string => { return '嗨' }
}
user.course = '数学' // 上面定义了 readonly ,就不能在编辑了

// 将所有类型转换为可选属性
const user2: Partial<User> = {
    name: '张三',
}

函数类型注解

/**
 * 函数类型
 * 给参数赋值类型、给返回值赋值类型
 * ?: 代表这个参数是可选的
 */
function multiply(a: number, b?: number): number {
    return a * b;
}
multiply(1, 2)
multiply(1)


// 如果一个函数没有返回值。标记为 void 类型
function sayHi(): void {
    alert('嗨')
}
// 函数重载 每个参数有多个类型
// 类型别名, 用type 声明一个类型别名 赋值给参数和变量
type Foo = string | number | boolean
function withNever(foo: Foo) {
    if (typeof foo === 'string') {
        // ...
    }
}

tsconfig.json配置文件

创建tsconfig.json文件,终端命令行执行,tsc --init

修改tsconfig.json中"strict"的值为false,禁用严格模式。

image.png



编写ts报错

VS Code运行项目报错:Type annotations can only be used in TypeScript files
类型注释只能在TypeScript文件中使用

image.png

解决:

文件>首选项>设置,中搜索 javascript.validate, 把勾选去掉

image.png