typescript基础语法

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

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

步骤:

终端运行: npm i -g typescript

tsc --init

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

typescript基础语法

以后保存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); //7
// 声明函数时规定函数参数类型和返回值的类型,函数调用时必须严格遵循这个规定,否则编码报错
// 为参数设置默认值,拥有默认值的参数应该声明在参数列表最后面
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); //7
// 声明函数时规定函数参数类型和返回值的类型,函数调用时必须严格遵循这个规定,否则编码报错
// 为参数设置默认值,拥有默认值的参数应该声明在参数列表最后面
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(); //报错:无法创建抽象类的实例。

js

"use strict";
// 抽象类
var People = /** @class */ (function () {
    function People() {
        // 声明属性
        this.eyes = 2;
    }
    // 声明类的一个普通方法
    People.prototype.eat = function () {
        console.log(‘i can eat‘);
    };
    return People;
}());