TypeScript篇.01-简介,类,接口,基础类型的简单介绍

1.简介

(1)安装及编译

安装: npm install -g typescript

创建 .ts 后缀名的文件

编译: tsc 文件名.ts 编译后会生成同名 .js 的文件

查看: 在html文件中script引入js文件,运行查看控制台即可

(2)类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式变量或函数声明时, 可添加类型约束, 当传入其他类型时, ts会警告, 但还是会创建js文件

2.类

TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程

//  类
class Student {
    fullName:string;
        //  在构造函数的参数上使用public等同于创建了同名的成员变量
    // firstName:string;
    // lastName:string;
    constructor(public firstName:string,public lastName:string){
        this.fullName=this.firstName+"-"+this.lastName;
    }
}
const stu = new Student('haha','11')
const show2 = (mes:Stu)=>{
  console.log('11111111111',mes);  // Student {firstName: 'haha', lastName: '11', fullName: 'haha-11'}
}
show2(stu); // 传递的是对象

3.接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为代码或第三方代码定义契约。

// interface 接口
interface Stu{
    sname: string,
    age: number
}
const students = ( student: Stu ) => {
    console.log('++',student);
}
students({ uname: 'mm', age:  11 } )

4.基础类型

(1)Boolean布尔型

// 基础数据类型    ts中会自动判断数据类型,不可重新赋值    在js中, 赋值后可重新赋值(弱类型)
// 1. Boolean 布尔类型   
// let flag = true  不写类型会自动推断类型
// flag = 'abc'  //会报错
let flag: boolean = true    //  相当于 let flag = true 
console.log(flag);   // true

(2)Number数字型

// 2. Number 数字
let num1: number = 10
console.log(num1);  // 10

(3)String字符串型

// 3.String 字符串类型(模板字符串) 
let str = 'hello mm~~~'
let str2 = 'heihei'
console.log('str===>',str,'\tstr2===>',str2);  // str===> hello mm~~~     str2===> heihei

(4)Array数组型

// 4. Array 数组类型
// 定义方式 1: 元素类型后接[],表由此类型元素组成的一个数组
let arr: string[] = ['a','b']
let num: number[] = [1,2,3]
// 定义方式2: Array后接<元素类型>
let arr1: Array<string> = ['haha','heihei']
console.log('arr===>',arr,'\tnum===>',num,'\tarr1===>',arr1);   //arr===> (2) ['a', 'b']     num===> (3) [1, 2, 3]     arr1===> (2) ['haha', 'heihei']

(5)Tuple元组

// 5. Tuple 元组   元组类型允许表示一个已知数量和类型的数组, 各元素类型可以不同
let basket: [string,number,string[]] = ['aaa', 12, ['qe','as']]
console.log(basket);  //['aaa', 12, Array(2)]
console.log(basket[2]);  //  ['qe', 'as']
// 访问越界元素, 会使用联合类型替代  
basket[4] = '111'
console.log(basket);

(6)联合类型

// 6. 联合类型  使用 | 分割
let fruit: string | number = 'haha'
fruit = 5
console.log(fruit);  // 5

(7)Enum枚举

// 7. Enum 枚举类型
enum Gender {男, 女, 未知}
let sex: Gender = Gender.女
console.log(sex); // 1
sex=2
console.log(sex);  // 2
let sexName: string = Gender[2]
console.log(sexName);  // 未知

(8)Any任意类型

// 8. Any 任意类型  不希望类型检查器检查, 直接通过
let word: any = 'hhhh'
word = 12
// 调用方法 编译时不报错, 但运行时会报错   没有该方法  
// word.toUpperCase()   //Uncaught TypeError: word.toUpperCase is not a function 
// let word1: object = 1  //对象的原型上也没有该方法, 故找不到
// word1.toUpperCase()   // Uncaught TypeError: word1.toUpperCase is not a function
console.log(word);

(9)Void没有任何类型

// 9. Void 没有任何类型, 一般情况下用于函数的返回类型, 当函数没有返回值时,类型就为void
let fun1 = (msg: string, age: number) => {
  // 参数类型
}
let fun2 = (msg: string, age: number) : void =>{
    // 函数也有类型, 没有返回值时,类型就为void
}
let fun3 = (msg: string, age: number) : string =>{
    // 函数也有类型, 有返回值, 则为返回值的类型
    return 'aaaa'
}

(10)Null和Undefined

// 10. Null 和 Undefined   默认情况, null和undefined是所有类型的子类型, 可以将null和undefined赋值给任意类型    常在联合类型中使用
let numUnd: number = undefined
let numNull: null = null
console.log(numUnd); // undefined
console.log(numNull);  // null
console.log(numUnd == numNull);  // true
console.log(numUnd === numNull);  // false 
// 联合类型中使用      
function fun5(mes:string | undefined){
    console.log(mes);
}
fun5('mmmm')  // mmm
fun5(undefined)  // undefined

(11)Never永不存在的值的类型

// never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。
// 11. Never  永不存在的值的类型    任何类型的子类型   只有never才能赋值给never类型
// 返回never的函数必须存在无法达到的终点   相当于死循环, 不终止
function error(message: string): never {
    throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

(12)Object非原始数据类型

// 12. Object 非原始数据类型, 定义Object类型的变量, 就可以使用Object中提供的方法  除number，string，boolean，symbol，null或undefined之外的类型。使用object类型，就可以更好的表示像Object.create这样的API
let obj:object = {name: 'Mouk', age: 22, msg: 'sleeping in class!!!!!'}
let obj1 = {
    msg1: 'I have a story to tell you...',
    msg2: "Someone said: 'I don't want to sleep!'",
    msg3:'Two seconds later......',
    msg4:'Mouk has fallen asleep!!! hhhhhhhhh'
}
console.log('====>',Object.keys(obj1));  //['msg1', 'msg2', 'msg3', 'msg4']

(13)类型断言

// 类型断言    类似强制类型转换
// 有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型
let username:any = 'admin';
const len:number = (username as string).length;
console.log(len);  // 5

参考文档: https://www.tslang.cn/docs/handbook/basic-types.html