一、项目中全局安装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)