Table of Contents

TypeScript

JavaScript


和Js的关系

Ts的全名是Typed JavaScript at Any Scale,代表是添加了类型系统的JavaScript,适用于任何规模的项目。

类型系统按照「类型检查的时机」来分类,可以分为动态类型和静态类型

Js是动态类型语言,在运行时才会进行类型检查,Ts是Js的拓展,Ts是静态类型语言,编译阶段就能确定每个变量的类型,这样能提高运行时的稳定性和效率,Ts代码是需要编译的,编译后即可得到类型安全的Js代码。Ts不会影响Js的运行时,运行的时候还是当作Js代码来运行。浏览器和Node.js运行的还是Js,和Ts没有关系。

类型系统按照「是否允许隐式类型转换」来分类,可以分为强类型和弱类型

TypeScript 是完全兼容 JavaScript 的,它不会修改 JavaScript 运行时的特性,所以它们都是弱类型。

和Js的不同

类型检查体现在哪些方面?

安装&编译

使用npm安装:

npm install -g typescript

编译一个Ts文件,输出Js文件:

tsc hello.ts

基础语法

// 强类型的JS
// TS会首先被编译为JS
 
// 类型推断:
// 初始赋值的时候,不用指定类型,但是类型会被固定下来
let s1 = 'str';
 
// 类型注解:
let s2: string;
let s3: string = 'hello';
 
// 类型断言:
let numArr = [1, 2, 3];
const result = numArr.find(item => item > 2) as number;
let t = result * 5;
 
let v1: string;
let v2: number;
let v3: boolean;
let v4: null = null;
let v5: undefined = undefined;
 
// 组合多个类型
let v6: string | null = null;
 
// 组合多个可选的值
let v7: 1 | 2 | 3 = 1;
 
// 指定数组的元素类型
let arr1: number[] = [1, 2, 3];
let arr2: Array<number> = [1, 2, 3];
 
// 元组,指定每个元素的类型
let t1: [number, string, number] = [1, 'a', 2];
let t2: [number, string, number?] = [1, 'a'];
 
// 枚举
enum FruitType {
    Apple, // 默认分配的就是0(从0开始)
    Banana
}
console.log(FruitType.Apple)
console.log(FruitType[0]);
 
// 指定参数和返回值的类型
function fun1(a: number, b: number): number {
    return a + b;
}
 
// 无返回值
function hi(): void {
    console.log("HI");
}
 
// 默认参数值和可选参数
function fun2(a: number = 10, b: number, c?: number): number {
    return a + b;
}
 
// 定义结构体?
interface Person {
    name: string,
    age: number
}
 
// JS对象就是JSON
const me: Person = {
    name: 'x',
    age: 1
};
 
// 类型别名
type Cx = number | string
let v8: Cx = 1
 
// 泛型
function fun3<T>(a: T, b: T): T[] {
    return [a, b];
}
let v9 = fun3<number>(1, 2);
// 泛型的类型推断
let v10 = fun3('a', 'b');

AI问答整理