TS-day1

129 阅读2分钟

一、项目中全局安装typescript:

npm install typescript -g

二、使用ts-node:

1、安装ts-node

npm install ts-node -g

2、依赖tslib和@types/node两个包

npm install tslib @types/node -g

3、通过ts-node运行ts代码

ts-node xxx.ts

三、声明变量:

let message: string = "Hellow World"

1、声明的类型成为类型注解(Type Annotation)

2、let/const定义的区别

let进行类型推导,推导出来的通用类型

const进行类型推导,推导出来的字面量类型

3、JS类型

number类型

let num: number = 100 or let num = 100

boolean类型

let flag: boolean = true

string类型

let message: string = "abc"

Array类型

写法1:

let names: string[] = ["a", "b", "c"]
names.push("d")

写法2(泛型):

let num: Array<number> = [123, 321, 111]

Object类型

type InfoType = {
    name: string
    age: number
}
let info: InfoType = {
    name: "MyName",
    age: 21
}

Symbol类型

const s1: symbol = Symbol("title")
const s2: symbol = Symbol("title")
const person = {
    [s1]: "学生",
    [s2]: "打工人"
}

null/undefined类型

let n: null = null
let u: undefined = undefined

4、函数类型

函数参数类型

function sum(num1: number, num2: number) {
    return num1 + num2
}

函数返回值类型

function sum(num1: number, num2: number): number {
    return num1 + num2
}

匿名函数不需要类型注解,因为函数执行上下文可以帮助我们确定参数和返回值的类型

函数参数是对象类型

type PointType = {x: number, y: number}
function printCoordinate(point: PointType) {
    console.log("x坐标", point.x)
    console.log("y坐标", point.y)
}

printCoordinate({x: 10, y: 30})

可选类型

type PointType = {x: number, y: number, z?: number}
function printCoordinate(point: PointType) {
    console.log("x坐标", point.x)
    console.log("y坐标", point.y)
    if(point.z) {
        console.log("z坐标", point.z)
    }
}

5、TS类型

any类型

某种情况下,我们无法确定一个变量的类型,并且可能它会发生一些变化

let a: any = "abc"
a = 123
a = true

unknown类型

它用于描述类型不确定的变量,unknnown类型的值上做任何事情都是不合法的,要求必须进行类型缩小

let foo: unknown = "abc"
foo = 123

if(typeof foo === "string") {
    console.log(foo.length)
}

void类型

void通常用来指定一个函数是没有返回值的,那么它的返回值就是void类型

function sum(num1: number, num2: number) {
    console.log(num1 + num2)
}

返回类型为void时,并不会强制函数一定不能返回内容

type FooType = (...args: any[]) => void
function fn(foo: FooType) {
    return 123
}

never类型

应用场景:开发框架工具、封装类型工具、类型体操

function handleMessage(message: string | number) {
    switch (typeof mwssage) {
        case "string":
            console.log(message.length)
            break
        case "number":
            console.log(message)
            break
        default:
            const check: never = message
    }
}

tuple类型

元组类型中每个元素都有自己特性的类型,根据索引获取到的值可以确定对应的类型

function useState(initialState: number): [number, (newValue: number) => void] {
    let stateValue = initialState
    function setValue(newValue: number) {
        stateValue = newValue
    }
    return [stateValue, setValue]
}

const [count, setCount] = useState(10)

setCount(100)