基础数据类型

let name: string = "123"
let age: number = 18
let isStudent : boolean = true

当然部分场景下 是可以省略前面的类型修饰的 编译器也会根据后面的值进行类型推导

打印输出

console.log(name)

这里说个小技巧 打印的时候也可以使用快捷键c.l 就可以快速补全提示语句

另外默认的console.log 只能打印字符串类型的 如果要打印number类型的该如何选择呢 可以通过以下两种方式进行处理

let haha: number = 200
// 如果数字类型打印不了 可以转换成.toString() 转换成字符串类型打印
console.log(haha.toString())

let haha1: number = 200.20202020
// toFixed(value) 是将字符串转成浮点型数据的时候 允许小数点后面保留的位数
console.log(haha.toFixed(2))

也可以使用 模版字符串 ${}修饰符 进行修饰 这个一般适合多个参数拼接的字符串

let age: number = 18
console.log(`好的 我的年龄是 ${age} 啊`)

这里需要强调一点 格式化字符串用到的符号不是'' 而且`` 打错会导致不生效的

函数的语法规则

// 不带形参的函数方法
function initString() {
  console.log('好的');
}

initString()

// 带形参的函数方法
function initHaha(name: string, age: number, height: number) {
  let result: number = age * height
  return result
}

let apple: number = initHaha('123', 18, 168)

也可以使用箭头函数

let buy = (age: number, height: number) => {
  let result: number = age * height
  return result
}

let age345: number = buy(123, 123)

接口和对象实例

interface Person {
  name: string
  age: number
  height: number
}

let person: Person = {
  name: '123',
  age: 18,
  height: 0
}

// 实例
interface DanceAndSing {
  name: string
  singsong: (songName: string) => void
  dance: (danceName: string) => void
  haha: () => void
}

let sing: DanceAndSing = {
  name: '',
  singsong: (songName: string): void => {
    console.log('我唱的歌是',songName);
  },
  dance: (danceName: string): void => {
    console.log('我跳的舞是',danceName);
  },
  haha: (): void => {
    console.log('啥也没干');
  }
}

sing.singsong('爱的供养')
sing.dance('好啊好啊')
sing.haha()

要说明一下 实例必须要实现接口函数的所有参数包括函数

如果函数比较多需要实现 可以通过系统的报错提醒来快速补全 看下图

通过快捷键或者点击提示语 都可以快速补全函数

联合类型和约定类型

联合类型定义之后的参数 可以接受不同类型属性的值

约定类型 可以提前约定该属性可选择的值

// 联合类型
let haha: number | string = 100
haha = 'asd'
console.log(haha);
haha = 200
// 如果数字类型打印不了 可以转换成.toString() 转换成字符串类型打印
console.log(haha.toString());

// 约定类型
let gender: 'man' | 'woman' | 'secret' = 'man'
console.log(gender)

枚举类型


enum ColorType {
  Red = '#ffffff',
  Green = '#ff7100',
  Yellow = '#30b30e'
}

let color: ColorType = ColorType.Red
console.log(color);