TS入门学习总结

TS：TypeScript,是JavaScript的超集，微软（Microsoft）开发的一门编程语言，TS通过编译变成JS,编译成的JS可以运行于任何浏览器。

TS增加了代码的可读性和可维护性，可以在编译时进行报错。提前发现错误，减少改BUG时间，即使编译报错也可以默认生成JS文件。

全局安装TS解析工具包，用来解析TS工具，使用tsc命令来进行编译转换。

npm install -g typescript

创建后缀名为.ts的文件

写入代码：

console.log('TS')

通过vscode终端运行

tsc 文件名.ts

报错：此系统禁止运行脚本，网络查找解决。

执行完成后生成.js文件

执行js文件

node 文件名.js

一、TS声明变量

var name: string = "qwerty";
//声明变量同时指定类型
name = 123456;//这个时候会报错，name指定了string类型
//普通类型再赋值过程中不允许改变类型


//如果要指定为可变类型可赋值为任意类型
var name:any="asdfg"


//any声明变量是任意值，任何操作返回的都是任意类型的值
let abc:any ="4"
abc = `string`;
abc = true;



//如果变量在声明的时候，未指定其类型未进行初始赋值，那就会被识别为任意值类型
//由于缺乏声明ts不能推断出类型，就是默认any类型

let zxc;  //相当于 let zxc:any;
zxc="seven";
zxc=7;
zxc.setName("rtyuiop")



//var/let/const 变量名: 数据类型 = 值

二、ts数据类型

//布尔值
let isDone: boolean = false;




//数字类型
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;





//字符串
let name: string = "bob";
name = "smith";




//数组
let list: number[] = [1, 2, 3];
//使用数组泛型，Array<元素类型>
let list: Array<number> = [1, 2, 3];




//Tuple(元组)定义一对值分别为string和number类型的元组

let x: [string, number];

x = ['hello', 10]; // OK

x = [10, 'hello']; // Error


//访问已知的元素类型

console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'





//枚举
//数字枚举
enum wwww {
   up,
   down,
   left,
   right,
 }
 console.log(wwww.Up); //0
 console.log(wwww[0]); //'up'


// 字符串枚举
 enum wwww {
   Up = "up",
   Down = "down",
   Left = "left",
   Right = "right",
 }
 const value = "up";
 if (value === wwww.up) {
   console.log("this is up!");
 }


// 常量枚举 
const enum wwww {
  Up = "up",
  Down = "down",
  Left = "left",
  Right = "right",
}
const value = "up";
if (value === wwww.up) {
  console.log("this is up!");





//Void
//void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：
function warnUser(): void {
alert("This is my warning message");
}

function fn(num:number, num2:number): number{
    return num+num2
}

function fn2(num:number, num2:number): void{
    console.log(num+num2)
}
let run = fn2(1,2)




//Null 和 Undefined
//TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null.
// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;
//js中null和undefined是两个基本数据类型
//在ts中 null和undefined他们是类型 也是值



//Never
//never类型表示的是那些永不存在的值的类型。 
//例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。

//never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。

function fn(): never{
    throw new Error("手动错误")
}
function fn1(): never{
    while (true){
        console.log(1)
    }
}

function checkType(msg: string | number | boolean){
    let str = "";
    switch (typeof msg){
        case "string":
            str = "string"
            break;
        case "number":
            str = "number"
            break;
        case "boolean":
            str = "boolean"
            break;
        default:
            let check: never = msg;
    }
    return msg+","+str
}
checkType("123")
checkType(123)





//unknown类型
function fn1(){
    return "这是一个字符串"
}
function fn2(){
    return 1234
}

//unknown类型 只能赋值给any和unknown类型的变量
//any类型 可以赋值给任意类型的变量

let flag = true;
let res: unknown;
if(flag){
    res = fn1();
}else {
    res = fn2();
}

let msg:unknown = res;

console.log(res)




//object类型
const obj = {
    name: "你好世界",
    age: 18
}

console.log(obj.name)



//symbol类型