typescript入门（初学笔记1）

typescrip入门（初学笔记1）

注意：ts文件最终会转换成js文件编译、运行
中文网地址：https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

安装

1. npm install -g typescript
2. npm -init：会创建一个tsconfig.json,关掉严格模式，指定js生成路径
3. 监视tsc，使其在创建一个ts文件时，会自动创建对应的js文件，命令：tsc -watch（注意：在powershell中运行报错，具体原因不明）
4. 效果图如下：

接口

interface IPerson {
  firstName: string
  lastName: string
}

function getName(person: IPerson) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let person = { firstName: '张', lastName: '三' }

document.body.innerHTML = getName(person)

结果：Hello，张 三

类

// 类
class Student {
  fullName: string
  constructor(public firstName, public middleInitial, public lastName) {
    this.fullName = firstName + ' ' + middleInitial + ' ' + lastName
  }
}

// 接口
interface Person {
  firstName: string
  lastName: string
}

function getStudent(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let student = new Student('Xue', 'M.','112314')

document.body.innerHTML = getStudent(student)

结果：Hello，Xue 112314

类型

let num: string = 'zhangsan'
// 注意：undefined 和 null 是所有类型的子级
num = undefined
let bool: boolean = false
// bool = null

// 和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。
let decLiteral: number = 6
// 十六进制
let hexLiteral: number = 0xf00d
// 二进制
let binaryLiteral: number = 0b1010
// 八进制
let octalLiteral: number = 0o744
console.log('decLiteral', decLiteral) // 
console.log('hexLiteral', hexLiteral)
console.log('binaryLiteral', binaryLiteral)
console.log('octalLiteral', octalLiteral)

// 数组
// 第一种方式
let arr1: number[] = [10, 20, 30]
console.log('arr1', arr1)

// 第二种方式:泛型
let arr2: Array<string> = ['yuan', 'zhangsan']
console.log('arr2', arr2)

// 第三种方式：定义每一个元素的类型
let arr3: [number, boolean, string] = [10, false, 'hahhh']
console.log('arr3', arr3)

document.body.innerText = num
console.log('bool', bool)

结果：

枚举

// 枚举类型：定义元素，元素从0开始依次递增;  可以自定义元素的序号
enum Color {
  Red = 10,
  Green,
  Yellow,
}

let color: Color = Color.Green

console.log('Color', Color)
console.log('color', color) // color 1

// 可以由枚举的值得到key
console.log('key', Color[12]) // key Yellow

结果：

any，void，object，联合类型，类型断言，类型推断

// any类型：可以定义变量为任何类型
let str: any = '出面不觉熊'
console.log('str', str) // str 出面不觉熊

str = true
console.log('str2', str) //str2 true

str = 1050
console.log('str3', str) // str3 1050

let arr: any[] = [10, 'df', 30]
console.log('arr', arr) // arr (3) [10, 'df', 30]

// void类型：没有返回值
function fn(): void {
  console.log('此函数值没有返回值')
}
console.log('fn', fn()) // 此函数值没有返回值 \n fn undefined

// object类型
function fn2(obj: Object): Object {
  return obj
}

let obj = {
  str1: '没有如果',
  str2: '没有未来',
}
fn2(obj)
console.log('fn2', fn2(obj)) // fn2 {str1: '没有如果', str2: '没有未来'}

// 联合类型：定义一个可以多种类型的变量
function fn3(num: number | string): string {
  return num.toString()
}
console.log('fn3', fn3(10)) // fn3 10
console.log('fn3', fn3('春眠不觉晓')) // fn3 春眠不觉晓

// 类型断言：告诉编译器我知道自己在干嘛，在什么类型下执行此命令
function fn4(str: number | string) {
  if ((<string>str).length) {
    // 我要哦干嘛。。。
  }
  if ((str as number).toString()) {
    // 我要打人啦。。。
  }
}

// 类型推断：在没有指定明确类型时，编译器会进行类型推断
let x = 100 // x:number

结果：