初识typeScript

中文文档

typeScript是javascript的超集，它包括了js的基本语法，另外还增加了接口、类型等特性，使得功能更加强大；

typescript不能直接在浏览器运行，有些高版本的谷歌浏览器可以运行；node环境也可以运行；

安装：

npm i -g typescript

检测：

tsc -V

 

 下面来写ts代码，ts代码里可以写js代码。

ts文件后缀都是.ts

我们创建一个ts文件，写上一些代码：

01_ts.ts

(function () {
    // str为string类型
    function sayHi(str) {
        return '你好啊' + str;
    }
    var text = "小甜甜";
    console.log(sayHi(text));
})();

我们需要在页面中运行，建立一个index.html页面；

如果用script标签直接引入ts文件；是不能运行的；需要执行

tsc ts的文件路径

编译成js再引入,才可以运行；（如果ts文件中全部是js代码，直接引入ts文件也是可以运行的）

编译后的代码：

01_ts.js

(function () {
    // str为string类型
    function sayHi(str) {
        return '你好啊' + str;
    }
    var text = "小甜甜";
    console.log(sayHi(text));
})();

注意到let声明的变成了var声明；

之后index.html页面引入这个编译好的js文件，就可以正常在页面运行了

 

vscode自动编译ts文件

初始化一下ts，执行下面命令会出现一个tsconfig.json

tsc --init

 

 

不过这样很麻烦，每次写一些代码还需手动编译一下；那么vscode可以帮我们自动编译；

 

首先我们改一下配置文件中的outDir配置项

代表将编译好的js代码放到js目录中

 "outDir": "./js", 

干掉严格模式：

"strict": false,   

怎么启动动编译呢？

鼠标切换到config.json文件；终端---运行任务---typescript---tsc: 监视

之后每次保存代码时就可以实时的更新页面的代码了

 

类型注解：

用来约束变量、参数的类型；

约束类型有：boolean、number、string、number[] |Array<number> 、[string, number] （元组）、enum Color {Red, Green, Blue} （枚举）、any|any[]、void （空值）、undefined、null、never （用不存在值的类型）

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

never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使any也不可以赋值给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) {
    }
}

类型断言：

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

类型断言有两种形式。 其一是“尖括号”语法：

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

另一个为as语法：

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

 接口：是一种能力，一种约束而已

(() => {
    // 定义一个接口
    interface IPerson{
        firstName: string //姓氏
        lastName: string //名字
    }
    // 输出姓名
    function showFullName(person:IPerson){
        return person.firstName + person.lastName;
    }
    // 定义一个对象
    const person = {
        firstName:"东方",
        lastName:"不败",
    }
    console.log(showFullName(person));
})();

由接口限制后，代码会自动提示，缺少参数后会提示缺少什么参数。

 ts中类的写法：

// ts中书写js的类，演示效果
(function () {
    // 定义一个类
    var Person = /** @class */ (function () {
        // 定义一个构造器函数
        function Person(firstName, lastName) {
            // 更新属性数据
            this.firstName = firstName;
            this.lastName = lastName;
            // 姓名
            this.fullName = this.firstName + "_" + this.lastName;
        }
        return Person;
    }());
    // 定义个函数
    function showFullName(person) {
        return "hello," + person.firstName + "_" + person.lastName;
    }
    // 实例化对象
    var person = new Person('诸葛', '孔明');
    console.log(showFullName(person));
})();

 

 

 

 

 

 。