typeScript介绍

type+javaScript
TypeScript是javaScript的超集 js有的ts都有
TypeScript简称TS
TS和JS之间的关系其实就是Less/Sass和CSS之间的关系
就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展
就像Less/Sass最终会转换成CSS一样, 我们编写好的TS代码最终也会换成JS
TypeScript是JavaScript的超集，因为它扩展了JavaScript，有JavaScript没有的东西。
硬要以父子类关系来说的话，TypeScript是JavaScript子类，继承的基础上去扩展。

为什么需要TypeScript?

简单来说就是因为JavaScript是弱类型, 很多错误只有在运行时才会被发现
而TypeScript提供了一套静态检测机制, 可以帮助我们在编译时就发现错误

搭建typeScript学习环境

Node和浏览器不能直接运行TS，需要把TS转换为JS

npm i -g typescript  //全局安装ts
tsc -v //查看版本

tsc hello.ts  //编译ts文件，生成js文件
node hello。js //执行js代码

简化运行TS的步骤 ts-node可以直接编译和运行ts文件

npm i -g ts-node //安装ts-node包
ts-node hello.ts //将ts转化成js 然后运行js代码

如果运行不了出现下面错误

Cannot find name 'console'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.

安装下面插件即可解决问题

npm install -g @types/node   //安装ts-node解析包

基础数据类型

JS的八种内置类型

let str: string = "jimmy";
let num: number = 24; 
let bool: boolean = false; 
let u: undefined = undefined;
let n: null = null;
let obj: object = {x: 1}; 
let big: bigint = 100n; 
let sym: symbol = Symbol("me");

其他类型

Array

对数组类型的定义有两种方式：

let arr:string[] = ["1","2"];  
let arr2:Array<string> = ["1","2"]；
//表示必须是字符串数组

定义联合类型数组

let arr:(number | string)[]; // 表示定义了一个名称叫做arr的数组,
// 这个数组中将来既可以存储数值类型的数据,也可以存储字符串类型的数据 
arr3 = [1, 'b', 2, 'c'];


let arr:number | string[];
//定义了一个变量arr 表示它的值要么是数字 要么是数组中只有字符串的数组

接口类型

想限制对象的类型，可以使用接口

//定义一个User接口，接口必须有name和id属性
interface User {
    name: string,
    id: number
}

//如果对象多出或缺少属性，就会报错
const user: User = {
      name: "张三"，
      id: 1234,
      age: 18    //对象多出了age属性，会报错
}

类型别名

相同的类型重复使用，这个时候就可以用到类型别名

type typeArray = (number | string)[];
let arr1: typeArray = [100, 200]
let arr2:typeArray = ['张三','list']
  <!-- 分隔符 -->
type typeObj = { name: string, age: number }
let obj: typeObj = { name: 'list', age: 18 }
let person:typeObj = {name:'小明',age:19}

元祖类型

元祖是另一种类型的数据，是明确元素数量和类型的数组

let arr: [number, string] = [15, '张三']
let arr1: [number, number] = [100, 200]

函数类型

给函数添加类型，实际给参数和返回值添加类型

// 普通函数
function fn(num1: number, num2: number): number {
    return num1 + num2
}

// 箭头函数
const fn1 = (num1: number, num2: number): number => {
    return num1 + num2
}

// 同时指定参数和返回值类型
const fn3: (num1: number, num2: number) => number = (num1, num2) => {
    return num1 + num2
}
console.log(fn3(100, 200));


// void类型 没有返回值类型
const fn4 = function (username: string): void {
    console.log("hello" + username);
}


// 可选参数
function mySlice(start?: number, end?: number) {
    console.log("起始索引", start, "结束索引", end);
}
mySlice()
mySlice(10)
mySlice(10, 20)

//可选参数
function sum(num1: number, num2?: number) {
    if (num2) {
        return num1 + num2
    } else {
        return num1
    }
}
let result = sum(5, 10)
let result1 = sum(5)
console.log(result);
console.log(result1);