typescript学习笔记《安装使用、热更新以及基本数据类型》

安装

npm install -g typescript

一、热更新

在写typescript的时候，很容易需要一个功能，就是保存后自动编译，因为typescript是不支持浏览器的，只能编译成浏览器熟悉的es5或者是es6才能被识别到，所以需要进行设置

• 运行指令: tsc --init，安装init文件，然后在安装好的tsconfig.json文件中，找到"outDir": "./"，保存后生成的js文件，然后自己修改路径，这样保存后的js文件会生成在你修改的路径下
• 点击顶部终端设置——运行任务——typescript——tsc：监视--tsconfig.json，就可以设置监视ts实时编译js啦

二、数据类型

在typescript中，也有像js一样的数据类型，这些类型主要作用，是起一个约束作用

• 布尔类型boolean
• 数字类型number
• 字符串类型string
• 数组类型array
• 元组类型tuple
• 任意类型any
• 枚举类型enum
• void类型void
• never类型never

// 编译前typescript的写法
let num: number = 222

let statusInfo: boolean = true

let currentString: string = 'string'

let arrInfo: Array<string> = ['1', '2', '3']

let arrInfoOne: Array<number> = [1, 2, 3]

let arrInfoTwo: Array<any> = ['1', 2, true]

let anyOne: any = '2'

function fun(): void {
  console.log(111)
}

let nullInfo: null = null

// 编译成es5或者es6后的展示形式
let num = 222;

let statusInfo = true;

let currentString = 'string';

let arrInfo = ['1', '2', '3'];

let arrInfoOne = [1, 2, 3];

let arrInfoTwo = ['1', 2, true];

let anyOne = '2';

function fun() {
    console.log(111);
}

let nullInfo = null;

三、函数

• 定义函数

// 在定义函数方面，ts和js大同小异
const fun = function():number {
	// 规定返回类型是number
	// 如果返回类型不是规定的number，就会ts编译报错
	return 1
}
// 箭头函数定义ts
const funOne = ():voild => {
	return 1
}

• 传参

// 正常传参
const obj = (name: string, age: number): string => { 
  return `${name}-- ${age}`
}

// 只传个别参数，形参和实参不用一一对应
// 只需要在可能不传值的参数后加问号
const obj = (name: string, age?: number): string => { 
	if (name && age) {
		return `${name}-- ${age}`
	}else {
		return `${name}-- 未知`
	}
}

// 注意，可选参数只能写在最后面
// 现在将name设置为可选参数，就会报错
const obj = (name?: string, age: number): string => { 
	if (name && age) {
		return `${name}-- ${age}`
	}else {
		return `${name}-- 未知`
	}
}

// 正常运行，将name放在最后面就正常运行了
const obj = (age?: number, name?: string): string => { 
	if (name && age) {
		return `${name}-- ${age}`
	}else {
		return `${name}-- 未知`
	}
}

• 剩余参数

// 剩余参数
const obj = (...result: number:[]) => {
	
}