typescript基础语法--变量/函数/指令/类

博客地址：https://www.cnblogs.com/sandraryan/

要把ts文件引入到html中，首先要转码为js文件。

步骤：

终端运行： npm i -g typescript

tsc --init

然后再vscode中ctrl shift b，点击watch

以后保存ts文件，js文件自动刷新

如果你觉得这个方法太简单你可以选择写一行代码在终端重新编译一次，指令是： tsc ts文件名，进行编译

然后看看基本语法叭

声明变量：

先搞一个html文件吧转码后的js文件引进去，然后我们操作ts文件（你懂我意思吧）

这个是ts文件命名为ts1.ts

声明变量很简单，都写在注释里了~~~~

总之就是：

ts变量的声明

1.ts在声明变量时，要规定变量的类型，

2.如没有规定，会在第一次为变量赋值时确定它的类型

3.一旦一个变量的类型被确定，那么之后使用这个变量时，不能改变变量类型（会报错）

let a = 100;

console.log(1);

/**

 * ts变量的声明

 * 1.ts在声明变量时，要规定变量的类型，

 * 2.如没有规定，会在第一次为变量赋值时确定它的类型

 * 3.一旦一个变量的类型被确定，那么之后使用这个变量时，只能依托这个类型

*/

// a = 'ji';

// 声明变量时约束类型

let bol:boolean = true;

// bol = 2333;

// 声明数组list，数组中所有类型都是字符串

let list:string[] = ['hi','guys','how','do','you','do'];

console.log(list);

// 声明数组另一种方法

let arr:Array<string> = ['hi','guys','how','do','you','do'];

console.log(arr);

// 元组: 声明时规定每个元素类型，规定元素个数，即一个固定长度的类型不同的数组

let t:[boolean,string,number] = [false,'hi',233];

// 不能push 不能修改

// 声明枚举类型

//将所有的可能性一一列举在某个数据中，需要取值时可以用index，获取index可以用数据获取

//下标从0开始 也可手动设置下标设置好后，下标从该设置往后延续10 11 ...

enum Color {

    //要枚举出来的数据本身

    yellow,red,green,blue

}

console.log(Color);

console.log(Color['yellow']);

console.log(Color[1]);

// 声明一个any的数据类型

let an:any = 90;

an = 'hello';

an = [2,3,4];

console.log(an);

// void类型的数据只能复制为null或者undefined

let v:void;

console.log(v);

这个是转码后的js文件

"use strict";

var a = 100;

console.log(1);

/**

 * ts变量的声明

 * 1.ts在声明变量时，要规定变量的类型，

 * 2.如没有规定，会在第一次为变量赋值时确定它的类型

 * 3.一旦一个变量的类型被确定，那么之后使用这个变量时，只能依托这个类型

*/

// a = 'ji';

// 声明变量时约束类型

var bol = true;

// bol = 2333;

// 声明数组list，数组中所有类型都是字符串

var list = ['hi', 'guys', 'how', 'do', 'you', 'do'];

console.log(list);

// 声明数组另一种方法

var arr = ['hi', 'guys', 'how', 'do', 'you', 'do'];

console.log(arr);

// 元组: 声明时规定每个元素类型，规定元素个数，即一个固定长度的类型不同的数组

var t = [false, 'hi', 233];

// 不能push 不能修改

// 声明枚举类型

//将所有的可能性一一列举在某个数据中，需要取值时可以用index，获取index可以用数据获取

//下标从0开始 也可手动设置下标设置好后，下标从该设置往后延续10 11 ...

var Color;

(function (Color) {

    //要枚举出来的数据本身

    Color[Color["yellow"] = 0] = "yellow";

    Color[Color["red"] = 1] = "red";

    Color[Color["green"] = 2] = "green";

    Color[Color["blue"] = 3] = "blue";

})(Color || (Color = {}));

console.log(Color);

console.log(Color['yellow']);

console.log(Color[1]);

// 声明一个any的数据类型

var an = 90;

an = 'hello';

an = [2, 3, 4];

console.log(an);

// void类型的数据只能复制为null或者undefined

var v;

console.log(v);

引入html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script src="ts1.js"></script>

</body>

</html>

函数

ts中函数也很简单~ 举个例子

ts函数可以指定参数和返回值的类型，也可以添加默认值（在声明函数添加形参的时候）

// 函数

function fn(x:number,y:number):number{

    return x+y;

}

let r:number = fn(3,4);

console.log(r); //

// 声明函数时规定函数参数类型和返回值的类型，函数调用时必须严格遵循这个规定，否则编码报错

// 为参数设置默认值，拥有默认值的参数应该声明在参数列表最后面

function fn2(x:number=10,y:number=20):number{

    return x+y;

}

let r2 = fn2();

console.log(r2);

// 函数的剩余参数

// an是除了num之外的所有参数列表，成为剩余参数，类型规定为string，是个数组

function fn3(num:number,...an:string[]){

    console.log(num);

    console.log(an);

}

fn3(45,'a','b','c');

// 剩余参数也可以是个元组，规定类型

function fn4(num:number,...an:[string,boolean]){

    console.log(num);

    console.log(an);

}

fn4(45,'r',true);

转码后的js文件

"use strict";

// 函数

function fn(x, y) {

    return x + y;

}

var r = fn(3, 4);

console.log(r); //

// 声明函数时规定函数参数类型和返回值的类型，函数调用时必须严格遵循这个规定，否则编码报错

// 为参数设置默认值，拥有默认值的参数应该声明在参数列表最后面

function fn2(x, y) {

    if (x === void 0) { x = 10; }

    if (y === void 0) { y = 20; }

    return x + y;

}

var r2 = fn2();

console.log(r2);

// 函数的剩余参数

// an是除了num之外的所有参数列表，成为剩余参数，类型规定为string，是个数组/

function fn3(num) {

    var an = [];

    for (var _i = 1; _i < arguments.length; _i++) {

        an[_i - 1] = arguments[_i];

    }

    console.log(num);

    console.log(an);

}

fn3(45, 'a', 'b', 'c');

// 剩余参数也可以是个元组，规定类型

function fn4(num) {

    var an = [];

    for (var _i = 1; _i < arguments.length; _i++) {

        an[_i - 1] = arguments[_i];

    }

    console.log(num);

    console.log(an);

}

fn4(45, 'r', true);

类的声明

ts文件：

// 类的声明

// 类的属性需要先声明在使用

class Point{

// 在x=90这个表达式里x被隐式的规定为number类型

// 如果没有一开始就规定类型，会将第一次赋值的类型作为这个属性的类型

x = 90;

y:number;

// readonly 只读属性，不可以操作

readonly age:number = 100;

constructor(y){

this.y = y;

}

getAge():number{

return this.age;

}

let p = new Point(70);

// console.log(p);

// Point {x: 90, y: 70}

let age = p.getAge();

console.log(p);

// Point {x: 90, age: 100, y: 70}

js文件：

var Point = /** @class */ (function () {

function Point(y) {

// 在x=90这个表达式里x被隐式的规定为number类型

// 如果没有一开始就规定类型，会将第一次赋值的类型作为这个属性的类型

this.x = 90;

this.y = y;

}

return Point;

}());

var p = new Point(70);

console.log(p);

// Point {x: 90, y: 70}

抽象类

ts：

// 抽象类

abstract class People{

    // 声明属性

    readonly eyes:number = 2;

    // 声明类的一个普通方法

    public eat(){

        console.log('i can eat');

    }

    //声明类的抽象方法，抽象方法不能有方法体，只能约束参数和返回值的类型

    abstract run();

    abstract sum(x:number,y:number):number;

}

// 抽象类里不能实例化对象，因为抽象类中包含了抽象方法，抽象方法没有方法体，如果允许从抽象类中实例化对象，后面的逻辑都不成立

//let p = new People(); //报错：无法创建抽象类的实例。

"use strict";

// 抽象类

var People = /** @class */ (function () {

    function People() {

        // 声明属性

        this.eyes = 2;

    }

    // 声明类的一个普通方法

    People.prototype.eat = function () {

        console.log('i can eat');

    };

    return People;

}());