1.TypeScript变量和编译选项_tsc 条件编译-CSDN博客

本文链接：https://blog.csdn.net/lazylYYY/article/details/125304598

一：TypeScript是什么

1.以JavaScript为基础构建的语言

2.一个JavaScript的超集

3.可以在任何支持JavaScript的平台执行，但是TS不能被JS解析器直接执行，需要中间商（）先将TS编译成JS

4.TS扩展了JS，并添加了类型

二：TS增加了什么

1.TS给变量设置了类型

2.TS增加很多新的数据类型

3.支持ES的新特性

4.添加ES不具备的新特性：抽象类，接口，各种工具，装饰器。

5.丰富的配置选项：①对类型的控制可以严谨也可以不

②指定兼容

6.强大的开发工具

三：TS开发环境搭建和使用

1.下载并安装Node.js或者此链接左侧版本

2.使用npm全局安装typescript:在命令行输入 npm i -g typescript

安装成功

3.创建一个ts文件

但是我们网页不认识.ts文件。我们需要用编译器tsc将ts转换成js

4.使用tsc将ts编译成js

在此文件所在文件夹打开cmd命令行，输入：tsc 文件名.ts (或者在vscode使用快捷键 ctrl+~ 打开命令行)

回车，无报错弹出代表成功，此时目录新增

四：TS的类型声明

参考此链接

1.变量类型声明

上图报错但是可以用tsc解析成js，后续可以添加配置，当代码有错误时，编译js不成功

2.函数参数类型声明

3.函数返回值类型声明

五：TS的变量声明

1.声明为指定值：只能为10，此时为11都不行

let a : 10;
a = 10;
//a = 11; 报错，值只能为10

2.声明用|隔开：可以使用 | 来连接多个类型（联合类型）

①值只能为固定的二者之一

②值只能为指定类型的

3. 声明为any ：指定为任意类型，均不报错

let a : any;
//或者 let a;  不写时自动认为时any
a = 1;
a = '哈哈';
a = true

4. 声明为： unknown 不确定值类型

let a : unknown;
a = 1;
a = '哈哈';
a = true

any和unknow(严谨)的区别：

如果想让any变得更加严谨

if(typeof a === "string"){
    x = a
}

如果想让unknown不报错

（类型断言）
// 写法1
x = a as string;
// 方法2
x = <string>a;

5.声明为：void 用于标识方法返回值的类型，表示该方法没有返回值。

function hello(): void {
    alert("Hello Runoob");
}

6. 声明为：never → 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常（程序终止，无返回值）或无法执行到终止点（例如无限循环），示例代码如下：

let x: never;
let y: number;

// 编译错误，数字类型不能转为 never 类型 ；( never ) 是num的子类
x = 123;

// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确，never 类型可以赋值给 数字类型 ；( never ) 是num的子类
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

7.声明为 : {} → 限制变量值是对象

let b:{name:string, age?:number};  // ? 代表可选属性，有无均可
b = {name:'杨杨',age:18};
b = {name:'杨杨'};

上述声明不严谨，如下情况报错

let b:{name:string};  // 只限制了name属性
b = {name:'杨杨'};    // 不报错
b = {name:'杨杨',age:18,c:5,d:5};  //报错 因为新增了其他属性

解决方法：[xxx:string]:any （string是因为js里面的属性名其实就是字符串）

翻译为：[任意字符串的属性名xxx]：任意类型的变量

let b:{name:string,[qita:string]:any};  // 只限制了name属性 （any 对 name的也有限制）
b = {name:'杨杨'};    // 不报错
b = {name:'杨杨',age:18,c:5,d:5};  //不报错 
b = {myName:'杨杨',age:18,c:5,d:5};  //报错, 此时要求变量中必须包含name
b = {myName:'杨杨',name:'嘿嘿',age:18,c:5,d:5};  //不报错, 此时要求变量中必须包含name