1.语言介绍

1.JavaScript（简称：js）是一种运行在客户端（比如：浏览器）中的编程语言。当应用于浏览器时，为客户提供动态交互特性，让网页“动”起来。

2.JavaScript的运行环境：1浏览器 2Node.js。
Node.js让js摆脱了浏览器的束缚，让可以实现服务端/桌面端编程等

3.TypeScript是js的超集（js有的Ts都有）
TypeScript = Type + javaScript（为js添加了类型系统）
ts设计目标是开发大型应用。可以在任何浏览器、计算机、操作系统上运行。

4.ts的安装
npm install -g typescript 检查版本号 tsc -v

5.编译ts文件 —> js文件 —>在html文件中使用
创建一个ts文件终端执行命令tsc ./ts文件这样就能自动帮你编译一个js文件出来

也可以使用vscode自动将ts文件编译为js文件
运行：tsc --init，创建tsconfig.json文件
修改tsconfig.json文件，设置js文件夹：“outDir”：“./js/”
设置vscode终端 —> 运行任务 —> 监视任务tsconfig.json，之后修改项目中的ts，就会自动生成js

2.原有类型和新增类型

1.原有的类型：string、number、boolean、undefined、symbol、Array
2.ts新增类型: 元组（tuple）、枚举（enum）、任意类型（any）、
空类型（void）、其他类型（never）

简单使用例子

// 一开始指定了值类型是什么就是什么,设置其他类型的话会报错。

// 1.字符串类型
let heroName: string = '李白'
// heroName = 520    报错
   heroName = '貂蝉' //修改值
console.log(heroName); /* 貂蝉 */

// 2.数值类型
let dAge: number = 18;
console.log(dAge); /* 18 */

// 3.布尔值类型
let isSing: boolean = true;
isSing = false
// 注意:在js里面可以用0、1来代表true和false，但是在ts这里会报错
// isSing = 1 报错

// 4.undefined和null
let undef: undefined = undefined
let nul: null = null

// 5.数组
// 方法一：let 数组名：类型[] = [值1,值2]
let arrHeros: string[] = ['李白', '大乔']
// 方法二：let 数组名：Array<类型> = [值1,值2]
let arrHeros2: Array<string> = ['李白', '大乔']

`ts的新增类型`

// 7.元组（tuple）就是一个以知元素数量 和 每个元素类型的数组，内部的元素类型
let tup1: [string, number, boolean] = ['美女', 18, false];
// tup1 = ['帅哥', 19, true,1] 报错
tup1 = ['帅哥', 19, true]
// 内部数据类型根据你定义类型以及数量的来设置

// 8.枚举（enum）用一组标识来代表数值，方便调用理解
// 8.1初始化赋值
enum Gender {
    boy = 1,
    Girl = 2,
    Unknown = 3
}
console.log(Gender.boy);      /* 1 */
console.log(Gender.Girl);    /* 2 */
console.log(Gender.Unknown);/* 3 */

// 8.2初始化不给值，默认就是排序 从0开始
enum Gender2 {
    boy,
    Girl,
    Unknown,
}
console.log(Gender2.boy);      /* 0 */
console.log(Gender2.Girl);    /* 1 */
console.log(Gender2.Unknown);/* 2 */

// 8.3使用枚举
let usrSex: Gender = Gender.boy
console.log(usrSex); /* 1 */  /* 与 Gender.boy 是相等的 */


// 9.任意类型（any） 可以用来代表任意类型，一般可以用在 获取 dom对象使用
let txtName: any = document.getElementById('txtN')
// 它可以代表任意类型的数据
let text: any = 1
text = 'jack'
console.log(text); /* jack */

// 10.空类型（void）可以用来表示函数的无返回值
// 定义了一个 string 类型的返回值
function sayHi1(): string {
    return '你好呀'
}
// 使用void不用 return 返回值
function sayHi2(): void {
    console.log(11);
}

// 11.其他类型（never）可以用来表示不会出现的值 - 常用在 有抛出异常 或无限循环的函数 返回值类型声明处
// 死循环
 function test():never{
     while(true){
         console.log('ni'); 
     }
 }
// 抛出异常
function test2(): never {
    throw new Error('异常')
}
`补充：never类型是ts中的底部类型，所有类型都是never类型的父类，所以never类型值可以赋给任意类型的变量.`
 let x:never = test()
 let y:string= test()

`补充: 可以设置联合类型 表示可以为多种类型中的一种
 let 变量名：变量类型1 | 变量类型2 = 值;`
let age: number | string = 18;
age = 'ni'
console.log(age);

3.函数的使用注意点

// 1.函数 返回值 类型
function sayHi():string {
    return 'hi'
}
// 如果要用变量 接收,类型要和函数的类型一样。否则会报错
let res1:string = sayHi()
console.log(res1); /* hi */


// 2.函数 形参 类型 无返回值
function jumpSan(city:string):void{
    console.log(`${city}`);
}
// 2.1 ts中 实参 和 形参 的须类型一致，数量一致.否则报错
jumpSan('s城')  /* s城 */

// 小结：
//      1.函数必须定义 返回值类型,如果没有返回值,则定义返回值类型为void
//      2.实参 和 形参 的类型要一致
//      3.实参 和 形参 的数量要一致



// 函数的可选参数与默认值

// 3.函数 可选参数 ? 
function buyGun(gunName?:string,count?:number):void{
            // 这里是如果不传参数，就是用默认值
    console.log(`${gunName ? gunName : 'm4a1'},${count ? count: 1}`);
}

// ? 解决了 实参 和 形参 的数量要一致的问题。
buyGun() /* m4a1,1 */

// 这里是第一个传参数，第二个不传
buyGun('ak47') /* ak47,1 */

// 这里是第一个不传参数，第二个传参数
buyGun(undefined,2) /* m4a1,2 */


// 4.函数 参数默认值另一种写法 给初始值
function buyGun2(city:string = 'bj',count:number = 2):void{
    console.log(`${city},${count}`);
}
buyGun2() /* bj,2 */
// 补充:传参和上面 buyGun() 的写法是一样


// 5.函数 剩余 参数
// 问题：如果确定了第一个第二个的类型数量，第三个之后剩余的数量不确定。
// 解决：写法 ...形参:类型[]
function add2(x:number,y:number,...resOfNum:number[]){
    let res:number = x + y
    for(let ele of resOfNum){
        res += ele 
    }
    console.log(res);
}

add2(1,2,3,5,6,8) /* 25 */
// 特点:
//     1.剩余参数 只能 定义一个
//     2.剩余参数 只能 定义为数组
//     3.剩余参数 只能 定义在 形参列表最后

4.对象以及类的使用

//使用class 关键字
class City {
    cName:string;
    cLevel:number;
    constructor(Name:string,Level:number){
        this.cName = Name;
        this.cLevel = Level
    }
    // 方法
    about(){
        console.log( this.cName+','+this.cLevel);
    }
}
let c1 = new City('p城',1)
c1.about(); //'p城',1


` ts类成员的访问修饰符 以及 类的继承`
// public：公开的 默认 所有人都可已访问
// private：私有的，只能在当前类中进行访问
// protected：受保护的 只能在当前类或子类中进行访问
class Person {
    name: string;
    age: number;
    constructor(Name: string, Age: number) {
        this.name = Name;
        this.age = Age;
        this.sayhi()
    }
    //private：只能在当前类中进行访问
    private sayhi() {
        console.log(this.name+','+this.age);
    }
}

// 继承 通过extends
class Dog extends Person{
    type:string;
    constructor(Type:string,name:string,age:number){
        super(name,age)
        this.type = Type;
    }
    // 如果在子类中的方法和父类的方法重名 将会重写这个方法
    sayhi1(){
        console.log(this.type+','+this.name+','+this.age);
        
    }
}

let dog = new Dog('大傻','哈士奇',5)
dog.sayhi() //报错 因为这个方法设置了private
dog.sayhi1() /* 大傻,哈士奇,5 */

//配合枚举来使用类
enum Color{
    red,
    yellow,
    blue,
}

class Cor{
   //这个在enum 定义了类名
    color:Color;
    constructor(){
        this.color = Color.red
    }
  // protected：受保护的 只能在当前类或子类中进行访问
    protected loadPeope(){
        console.log(6);
    }
}
class Audi extends Cor{
    sayHi(){
        console.log(this.color);
        this.loadPeope() /* 能访问到这个方法 */
    }
}

let audi = new Audi()
audi.sayHi() /* 0 */
// audi.loadPeope()  报错 因为protected只能在当前类或者自类中使用

5.ts类成员的储存器

class Penole{

    private _name:string = ''
    // 取值
    get Name():string{
        return this._name
    }

    // 存值
    set Name(value:string){
        this._name = value
    } 
}
let p = new Penole()
p.Name = "你好呀"
console.log(p);  //"你好呀"

6.ts的接口使用

// 接口可以理解为一个约定 一个规范
// 接口使用interface进行声明,定义了类型
interface Ajax{
    url:string;
    type:string;
    data:object;
    dataType?:string;
    success(data:object):void
}

function ajax(options:Ajax){}

//赋值的时候要按照接口里面定义的类型来复制
ajax({
    url:'www.baidu.com',
    type:'get',
    data:{},
    success(data){}
})


`函数的类型接口`
//定义了参数类型，还有返回值的类型
interface Sum{
    (a:string,b:number):number
}

let sum:Sum =  (a:string,b:number) =>{
    return parseInt(a) + b
}
console.log(sum('1',2));

//使用[键名：类型]：类型 添加多个属性
interface Point{
    readonly x:number;
    y:number;
// 后期想要添加多个属性，使用 [propName: string] 定义任意类型的值。
// 需要注意的是，一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性：
    [propName:string]:any
}
let poi:Point = {
    x:100,
    y:200,
    s:20,
    a:true,
    w:'50'
}

7.ts的只读属性和参数属性

class Car {
    // 如果给属性添加了readonly修饰 则这个属性无法被赋值
    // 而且属性必须在参数前面或者在构造函数被赋值
    readonly name: string;
    // type:string
    // 在参数前面加修饰符 相当于声明了一个属性
    constructor(public type: string) {
        this.name = '橘猫';
    }
}

let cat = new Car('小猫')
console.log(cat.type);/*  小猫 */
console.log(cat.name); /* 橘猫  */
cat.name = '花猫' //报错 设置了只读属性 readonly  无法在外部给他赋值

TypeScript 简单入门